Gif animado, imagen con movimiento, válido para Photoshop CS 6

En este tutorial aprenderás a realizar un Banner publicitario con movimiento, que es una imagen en formato GIF con movimiento, todas las versiones de Photoshop, incluso las más antiguas  pueden generar imágenes en movimiento. La mejor manera de aprender a hacer gif´s animados es haciendo uno, asi que manos a la obra.

1º.- Haz un documento nuevo vé al menú superior: "Archivo / Nuevo", en la ventana escribe los siguientes valores:
Anchura: 360 px
Altura: 130 px
Resolución: 72 px / pulgada

2º.- Elige la " Herramienta Zoom-Lupa" y amplia el documento.

3º.-  Rellena de negro el documento, vé al menú superior: "Edición / Rellenar" en la ventana elige en el desplegable Negro, y pulsa "Ok".

4º.- Conmuta los colores Frontal / Fondo, pincha en el icono de la "curva con doble flecha" de la caja de herramientas, fíjate en la imagen

5º.- Elige la "Herramienta texto" en la ventana superior Opciones de esta herramienta elige:
Arial, Black, 36 pt, Enfocado, ...

6º.- ...ahora escribre el texto: "Drive the Change"

7º.- Ahora Pincha sobre esta imagen para ampliarla, una vez ampliada, haz "click" con el botón derecho del ratón y en el menú contextual elige la opción "Guardar Imagen...", guárdala en tu ordenador ya que vas a usar esta imagen para hacer el gif animado.

8º.- Abre la imagen anterior, vé al menú superior: "Archivo / Abrir"  búscala  ( se llama imagen 1.jpg  ) y ábrela 

Luego vé al menú superior: "Selección / Todo", y desde el menú superior elige "Edición / Copiar"

Cierra este documento sin guardar los cambios ya que no vas a necesitarlo más.

9º.- Tras cerrar la imagen "imagen 1.jpg", vé al menú superior: "Edición / Pegar", así quedará pegado en una capa por encima del texto que escribiste anteriormente , fíjate en la Ventana de Capas ( Ya sabes que para abrir la ventana de Capas se hace desde el menú superior: Ventana / Capas)

10º.- Ahora vas a abrir la Ventana Línea de tiempo o la Ventana Animación ( esta denominación depende de la versión de CS que uses) vé al menú superior: "Ventana / Linea de Tiempo" o "Ventana / Capas"


Si usas versiones anteriores al CS, deberás abrir "Image Ready", pinchando en el icono inferior de la caja de herramientas, el resto del tutorial es común para todas las versiones de Ps

11º.- Solo en las ultimas versiones de Photoshop CS hay que pulsar en  el botón "Crear animación de Fotogramas" para poder añadir el primer cuadro o fotograma a la ventana Línea de tiempo-Animación.

En la parte inferior de la ventana Animación - Línea de Tiempo está el icono "Duplicar Cuadro- Fotograma" fíjate porque tendrás que usarlo

12º.- Vé a la ventana de Capas y apaga el "ojo" de la Capa del faro, la de más arriba, para que no se vea.

13º.- En la Ventana de Capas pincha en la Capa de Texto, a continuación modifica el contador Opacidad y colócalo a 0 %, fíjate en la imagen

14º.- Vé ahora a la Ventana Linea de Tiempo-Animación y pulsa el icono "Duplicar Cuadros Seleccionados", así generas el fotograma nº 2

15º.- Vé a la Ventana de Capas y coloca el contador opacidad a 25 %.

16º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 3

17º.- Ventana de Capas, coloca el contador Opacidad al 50 %

18º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 4

19º.- Ventana de Capas, coloca el contador Opacidad al 75 %

20º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 5

21º.- Ventana de Capas, coloca el contador Opacidad al 100 %

22º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 6

23º.- Ventana de Capas, hora enciende el ojo de la Capa del Faro, así quedará visible,  fíjate en la imagen.

24º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 7

25º.- En la Ventana de Capas, apaga el "ojo" de la capa de texto, para que quede oculta, luego pulsa sobre la capa del faro y coloca el contador opacidad al 75 %. Fíjate en la imagen.

26º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 8

27º.- En la Ventana de Capas, coloca el contador de opacidad al 50 %.

28º.- Ventana Linea de Tiempo- Animación, pulsa sobre el icono "Duplicar Cuadros Seleccionados" así generas el Fotograma nº 9

29º.-  En la Ventana de Capas, coloca el contador de opacidad al 25 %.

30º.- Ahora vás a configurar los tiempos en la Ventana Linea de Tiempo-Animación., pincha sobre el fotograma-cuadro nº1 y pincha en la flechita de color negro que está en la esquina inferior derecha de este cuadro, de desplegaran unas opciones de tiempos en segundos, selecciona 2 seg. Fíjate en la imagen.

31º.- Ventana Linea de Tiempo-Animación., pincha sobre el fotograma-cuadro nº 2 y pincha en la flechita de color negro que está en la esquina inferior derecha de este cuadro, de desplegaran unas opciones de tiempos en segundos, selecciona 0,1 seg. Fíjate en la imagen.

32º.- Ventana Linea de Tiempo-Animación., pincha sobre el fotograma-cuadro nº 3, y elige 0,1 seg., luego el nº 4: 0,1 seg, nº 5: 3 seg., nº 6: 3 seg., nº 7: 0,1 seg., nº 8: 0,1 seg. y el fotograma nº 9: 0,1 seg.
Fíjate en la imagen para colocar los mismos tiempos de retardo.

33º.- En la Ventana Linea de tiempo-Animación pulsa el botón "Play" para probar la animación

34º.-  Por último queda el paso más importante el guardado de la animación.
Vé al menú superior "Archivo / Guardar para Web",
(no pueden guardarse animaciones si eliges Archivo / Guardar Como), en la parte inferior de la ventana guardar para web, puedes elegir el número de veces quedeseas que se repita la animación del gif, déjalo en Infinito para que no cese de repetirse, luego pulsa el botón "Guardar", ponle un nombre y pulsa "Ok".
Ya tienes tú Gif con movimiento

Importante: los Gifs con movimiento solo pueden verse en los navegadores,Photoshop no reproduce imágenes en movimiento, colócate encima del gif que acabas de guardar, haz click con el botón derecho del ratón y elige la opción "Abrir con..." elige Internet Explorer, Mozilla Firefox, Chrome o el navegador que uses habitualmente.

Si te ha gustado este tutorial, compártelo, gracias.