https://cdn.steemitimages.com/DQmUDZfH2GwkSABU1QaGS1DYptat1tK8S6Pk2i28wGoDarU/MINIATURA.png

Muy buenas Steemers! Hoy les quiero compartir algo que gusta mucho crear y no es complicado como parece, les hablo de los GIF, el cal es un formato de imagen que permite aimaciones cortar y son muy populares en el mundo web. Al hacer mi banner de despedida para Steemit me ha parecido curioso mostrarlesun poco de mi conocimiento en el area, no soy una profesional, pero estoy segura de que a alguien le sera util este pequeño tutorial.

Lo que necesitas

Photoshop, yo estoy usando la version CC 2017.
Varias imágenes
¡Creatividad y mucha paciencia!

https://cdn.steemitimages.com/DQmaTQF1krrsWv2DiK4eBshJXCeArUhtTfy8U3b41ZzhEP6/1%20banner.png

https://cdn.steemitimages.com/DQmT6gA8SLHFGy1v1YoB7YCTntrLuN865Hm7jc5AfS9Fo2m/00.JPG

Primero que nada debemos tener una secuencia de imágenes agrupadas por orden, tal como se ve arriba, yo cree las mías propias con el programa Paint Tool SAI. Recomiendo tener mínimo tres imágenes para que nuestro GIF tenga más vida y personalidad.

https://cdn.steemitimages.com/DQmPJRfm2BFAQw38xXmUhPSxRgAkjQ5JANJdPFf2JwU5v81/0.JPG

Para abrir la ventana de animaciones debemos ir Window>Timeline

https://cdn.steemitimages.com/DQmZANJ5RAaTSZiebonht4Znb1Pw8s3ipq8h1DPWuGR9Y96/1.JPG

Una vez abierto el Timeline creemos nuestra primera capa de animación, en la imagen superior les señalo el botón que debemos darle. Es muy importante que al crear esta nueva y primera capa tengamos seleccionada la capa normal que contiene la primera ilustración que queremos en el GIF y oculta las demás. Como se ve en el menú de capas normales.

https://cdn.steemitimages.com/DQmfGxXFhC8VkzfCAu8y2JEF8XWGeGwsADGZsC4kqEBHKS8/2.JPG

https://cdn.steemitimages.com/DQmek4NiM5UU4aPVgT1wXpaFCMzedVHTptS7QZPG2BdNinS/3.JPG

Repetimos el mismo proceso con todas las imágenes que queremos que salgan en la animación, recuerden seleccionar la capa normal y ocultar las demás al crear la capa. Al terminar de crear nuestras capas de animación nos debería quedar como la imagen de arriba

https://cdn.steemitimages.com/DQmcs9PZAphdNZRZLH5C75Y9vBicAJEizm7kEanM3gb5CQg/2%20banner.png

https://cdn.steemitimages.com/DQmWgSvcGBz9Y4CXA6zkNU68tXQym6HnMuHmBGA7HfvbAdr/4.JPG

Ya que tenemos las capas de animación es hora de crear las capas de transición, las cuales son la magia tras un buen GIF. En la imagen de arriba les señalo la opción que se debe clicar para crear las respectivas capas. NOTA: seleccionar la herramienta en la capa principal en la que queramos hacer transiciones, es decir, clicar la opción teniendo una capa principal seleccionada como se ve en la imagen.

https://cdn.steemitimages.com/DQme6MMU7m4qpDCoq4pUSEXo4Ludirpu4EJM86t1uscNQKV/5.JPG

Al clicar les saldrá este recuadro con la configuración que queremos para las capas de transición, es muy importante tener la opción de Tween With en Next Frame. La cantidad de capas de transición se determinan por el número que coloquemos en Frames to Add, por gusto persona yo he colocado 2, sin embargo, el la opción preterminada es 5. NOTA: Se debe crear capas de transición para cada capa de animación principal.

https://cdn.steemitimages.com/DQmWQsQdN7Nsd46A2sn88FDTJiAeQEGFXN84j6SmhTPGaXc/6.JPG

Arriba podemos observar las primeras capas de transición que se encuentran entre la primera capa de animación principal y la segunda de esta, repetimos este proceso con todas las capas principales.

https://cdn.steemitimages.com/DQmPLkYnfUC7zqN12w9UyRgtG7yYd8HccEmj32vwwg9zSDX/7.JPG

Ahora procederemos a editar el tiempo de transición de todas las capas, clicamos la opción resaltada arriba. Recomiendo crear un patrón de tiempo entre capas, por ejemplo, mi secuencia es 2 segundos las capas principales y capas de transición les he colocado 0.1 segundo. Esto es a gusto y pueden probar en la opción de reproducción que está en el renglón de herramientas de Timeline.

https://cdn.steemitimages.com/DQmaU6cTEUZBFpPGHCfktZBShwtLDnRrYyDCMzoL8knBViu/8.JPG

Aquí les dejo el orden que use para el GIF, en rojo les señalo las capas principales y en azul las de transición. Noten la diferencia de velocidades entre capas que use.

https://cdn.steemitimages.com/DQmeUkZZ99EYfAu6mvDWKrkY5h8Bp3V5zekEctWM1nktg4c/9.JPG

https://cdn.steemitimages.com/DQmcYAaVt9DvYHgamZAA8TDrxQvVwqmbyB7WKXyN4t6yeKn/3%20banner.png

Ya hemos terminado lo más importante, lo que resta es verificar ciertos detalles y aprender como guardar nuestro archivo GIF.

https://cdn.steemitimages.com/DQmS9hgoRQZ4WrVnTvAzGQfwJHddtko961ogkhtrFbdpuUg/10.JPG

https://cdn.steemitimages.com/DQma4rPjuTttzB2PN5HCyKzj8gGAqwFmVPiFADrsaP4BgHL/11.JPG

Clicamos en las opciones señaladas y verificamos que las opciones de animación estén correctas en el recuadro llamado Optimize Animation.

https://cdn.steemitimages.com/DQmRJqA7DZPn27Fp41mXQPAdQUWBrqLe4Lpy8WHPTWS888Y/12.JPG

¡Ahora si estamos cerca de terminar! Vamos a File>Export>Save for Web (Legacy) como les maestro arriba y se nos abrirá una ventana en la cual verán varias opciones.

https://cdn.steemitimages.com/DQmb4f5GNQhxXbFXQHvRnV95NkS5aPK4wVPYAL3K1oUsQmF/13.JPG

La opción más importante es la sección donde dice GIF, si no está seleccionado el formato cámbialo, si no, no podremos crear la animación. En caso de querer ver la animación previa al guardado podemos reproducirla en la esquina inferior derecha. Si todo está correcto le daremos a Save.

https://cdn.steemitimages.com/DQmecNmSDpC61CKX6H2RV8mhNk5rR77ujJrgnDBWcYQ2aNz/14.JPG

Verificamos que nuestro GIF tenga la respectiva configuración y clicamos Save. ¡Felicidades! Ya has creado un GIF que puedes publicar y usarlo como quieras.

https://cdn.steemitimages.com/DQmUBsaDnGjhD7SSDnY6zDNesw38EEquhVUd8fNajTQ1Njm/3.gif