Gif animado en Photoshop.


En este tutorial vamos a aprovechar una antigua imagen que realizamos hace algunos días para generar un gif animado. 

PROGRAMA: Adobe Photoshop CS6
DIFICULTAD: Fácil.
TIEMPO: 20 min




Resultado final del tutorial



Utilizamos nuestro viejo archivo de Illustrator para generar nuestros fotogramas que servirán para crear la animación. Omitiré este paso puesto que se tratar únicamente de dar diferentes colores a los neones y ya está explicado en el anterior tutorial.

Cambiando progresivamente el color de los neones tanto del cartel como del fondo vamos guardando tantas imágenes como fotogramas queramos para nuestra animación.



 Fotogramas de la animación

Yo he realizado 3 imágenes para nuestro gif. Fíjate que todo permanece igual excepto los colores del cartel de schweppes los cuales he ido cambiando en cada fotograma sin un orden lógico y los colores del fondo para los que he seguido un método que luego al generar la animación diese un aspecto de transformación lineal.

Una vez tenemos nuestros fotogramas vamos al photoshop que será donde realizaremos nuestro gif animado.

Abrimos la primera imagen del grupo de fotogramas y sobre ésta vamos a ir colocando por orden cada una de las demás.

Estos dos comandos se encuentran en la barra superior:
  Archivo_ Abrir...
     Archivo_ Colocar...


Procura que cada una de las imágenes este bien colocada sobre la misma posición que la anterior.


Según vamos colocando nuestras imágenes se irán colocando en capas diferentes. Si pinchamos sobre el ojo que hay en cada capa la activamos o desactivamos, la hacemos visible o no. Esto es importante para el siguiente paso. 

Activamos la barra de herramientas para realizar una animación. Para eso vamos a Ventana_ Línea de tiempo



Creamos un nuevo cuadro en la animación. Crearemos tantas cuadros de animación  como capas del archivo tengamos.


Para ello entramos en el menu de opciones de línea de tiempo situado en su esquina superior derecha

Pinchamos sobre la opción Crear cuadros a partir de capas.


Una vez generados todos los cuadros cambiamos el retardo de cada uno que por defecto es ahora de 0 seg. Pinchamos encima y nos aparecerán diferentes intervalos de tiempo. Yo he escogido para esta animación 0,2 seg. 



Podemos previsualizar el resultado de nuestra animación antes de guardarlo como gif.

Una vez que vemos que todo está correcto vamos a Archivo_ Guardar para web y guardamos como GIF. No hay que tocar nada puesto que viene por defecto guardar en este formato.


Y ya está!!!. Por fín tenemos nuestro gif animado. Como ves no es nada complicado. 

Espero que os haya gustado.



Mimic estudio.


No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...