PASOS A SEGUIR
1. Abrir el Photoshop. Ir a Archivo y seleccionar Nuevo; Escogemos las medidas y demás, por ejemplo, Anchura: 200px, Altura: 30px, Modo de Color: RGB, Contenido de fondo: Color de fondo (También podemos seleccionar "Transparente" para que no afecte los colores de nuestra página).
Click en OK.
2. Escribimos el texto completo; por ejemplo, "Crear y Configurar" (Figura 01).
2. Guardamos esta imagen con el nombre de cuadro-final (Si es transparente guardar como GIF o PNG; si tiene color de fondo, no importa).
Vamos a Archivo > Guardar para web (En otras versiones "Guardar optimizada como...") y seleccionamos la carpeta en que la vamos a alojar (Recuerde: con el nombre de cuadro-final para el ejemplo).
3. Sombreamos ahora la palabra "Configurar" de nuestro ejemplo, teniendo seleccionada la herramienta Texto (T) y la eliminamos desde el teclado con Suprimir (Delete) y damos click sobre la Capa del texto (Figura 02).
Guardamos esta nueva imagen con el nombre, por ejemplo, cuadro-medio.
4. Eliminamos la "Y" y guardamos la imagen con el nombre de cuadro-uno (Se ve sólo la palabra "Crear").
5. Ahora, borramos "Crear" y nos queda solamente el fondo (No guardamos nada).
6. En la parte superior, vamos a Ventana, > Animación.
7. En la ventana de Animación, seleccionamos el tiempo de retardo de los cuadros (Pestaña 1 seg) y definimos, por ejemplo, 0,5 (Medio segundo).
Podemos seleccionar la cantidad de veces de repetición del movimiento del texto desde la pestaña Infinito que se encuentra debajo del tiempo de retardo de los cuadros (seg).
Damos click en el botón
de la derecha de la ventana de Animación para configurar más opciones (Figura 03).
8. Click en Cuadro nuevo. Las demás opciones deben quedar deshabilitadas (Sin marcar).
Aparecen ahora dos cuadros iguales en la ventana de Animación (Figura 04).
9. Vamos a la ventana de Capas (Derecha) y damos click sobre los dos ojos
que indican la visibilidad de las capas para que desaparezcan del cuadro 2 de la Animación.
Nos quedan entonces, el cuadro 1 con la imagen de fondo y el cuadro 2 vacío (Figura 05).
10. Para agregar la primera imagen, vamos a Archivo > Colocar y buscamos la carpeta que contiene el cuadro-uno; lo seleccionamos y damos "Colocar" (O doble click sobre la imagen) para que se ubique en la animación (Figura 06).
Damos Enter (en el teclado) para que se fije la imagen en Photoshop o doble click sobre el banner (Figura 07).
11. Hacemos lo mismo para colocar el cuadro-medio y el cuadro-final: click en el botón
de opciones de la ventana de Animación > Crear nuevo cuadro; en Capas > click en los ojos
de Visibilidad; Ir a Archivo > Colocar > Seleccionar el cuadro en la carpeta > Colocar y Enter.
12. Para ver el texto en funcionamiento, damos click en el botón Play
de la ventana de Animación (Figura 08).
Podemos cambiar la velocidad de la animación, cuadro por cuadro, con valores diferentes según la necesidad; También podemos hacer la animación letra por letra, pero siempre empezando con el texto completo; centrarlo e ir borrando uno por uno los caracteres al tiempo que los vamos guardando en una carpeta.
Para deshacer una acción ir a Edición > Paso atrás.
13. Vamos a Archivo > Guardar para web ("Guardar optimizada como...") > Optimizada (Pestaña superior) > Gif > Selectiva > Guardar y seleccionamos la carpeta para guardar el GIF (Figura 09).
Se debe guardar en Formato GIF - Selectiva ya que es una animación (En otro formato no funcionará - Photoshop).
En el siguente video se explica otra manera de hacer un gif, con la ayuda de
Adobe ImageReady.
Este es el resultado: