CÓMO HACER UN TEXTO EN MOVIMIENTO CON PHOTOSHOP - GIF


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).



photoshop-gif

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.


photoshop-gif

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.


Abrir Ventana de 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 boton-opciones de la derecha de la ventana de Animación para configurar más opciones (Figura 03).


Definir opciones de Animación - Gif de Texto

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).


Crear Cuadro Nuevo para Animación

9. Vamos a la ventana de Capas (Derecha) y damos click sobre los dos ojos Visibilidad de Capa 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).


photoshop-gif

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).


Colocar Imagen

Damos Enter (en el teclado) para que se fije la imagen en Photoshop o doble click sobre el banner (Figura 07).


Colocar Capa en Animación

11. Hacemos lo mismo para colocar el cuadro-medio y el cuadro-final: click en el botón boton-opciones de opciones de la ventana de Animación > Crear nuevo cuadro; en Capas > click en los ojos Visibilidad de Capa 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 photoshop-boton-play de la ventana de Animación (Figura 08).


photoshop-gif-texto-en-movimiento

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).


photoshop-gif

En el siguente video se explica otra manera de hacer un gif, con la ayuda de imageready (1K) Adobe ImageReady.


Este es el resultado:


photoshop-tutorial-gif-texto
Tutoriales Photoshop

Cómo hacer gifs de texto utilizando Adobe Photoshop


¿Cómo Dejar de Fumar?