Construir Gif animado en Photoshop e ImageReady (Tutorial)

[metacortex]

Hola compañeros, debido a la cantidad de posts solicitando ayuda en cuanto a la creación de gifs animados, he decidido ofrecer esta humilde guía, a fin de orientarnos en los procedimientos para tal fin. Debo advertir que aquí se explica el método mediante el uso alterno de Adobe Potoshop y Adobe Image Ready... La intención de la siguiente explicación tendrá dos objetivos: 1) Aprender a construir gif animado bajo las mencionadas aplicaciones y 2) Comprender la conveniencia entre la integración de Photoshop e ImageReady, por lo cual si los usuarios más expertos notan que algunos pasos entre PS e IR son innecesarios, deben comprender que es con un fin didáctico y de ejercicio en las aplicaciones.



En esta oportunidad vamos a crear una animación simple, que es ésta:








a. Primeramente crearemos un documento nuevo con las medidas en píxeles (400 x 120 px):









b. Luego creamos el texto... en esta oportunidad usé Futura ExtraBlack Condensed a 20 pts.:








c. Seguidamente le damos color al fondo y al texto, además de centrarlo debidamente, pues será la matriz de la cual sacaremos las otras capas:








d. Duplicamos las capas, de tal manera que nos quede un respaldo en texto y rasterizamos las otras como imágenes. Les asignamos una transparencia, de tal forma que reduzca de 20 en 20 su porcentaje, partiendo del 100%. La vista de capas nos debe quedar de esta manera (para mayor visualización, le asigné nombre a las capas según su porcentaje):








e. Vamos entonces al menú “Archivo” y presionamos “Editar en ImageReady” o bien las teclas (Shift + Control + M):








f. Ya en ImageReady, nos encontraremos con una herramienta especial, la paleta “Animación”, la cual utilizaremos para darle movimiento a nuestro trabajo. El botón que aparece ampliado se llama “Duplicar cuadro actual” y precisamente reproduce una copia del cuadro seleccionado:








g. A continuación haremos lo siguiente:

g.1. Seleccionamos la visualización (el ojito) de la capa “Foros 100” y la repetimos dos veces.




g.2. Quitamos el “ojito” de “Foros 100” y activamos “Foros 80”... La repetimos una par de veces más y así hacemos con todas las demás, por supuesto dejando al final dos cuadros con el fondo solo.

Después de estas acciones, la paleta “Animación” debería verse de esta manera (se resaltó también la paleta de capas para mostrar el resultado):









h. Luego construiremos el gif, simplemente desplazándonos al menú “Archivo” y presionando “Guardar optimizada” o su comando equivalente “Control + Alt + S”. Le asignamos un nombre cualquiera y la guardamos en el directorio que nos plazca:








Hasta los momentos, la animación debería verse así:








i. Luego seguimos con la creación de las otras palabras. Desplazamos el documento a Photoshop (Shift + Control + M) y trabajamos las palabras “DEL” y “WEB”, tal como se explica desde el paso “b” de este texto.


j. Luego de hacerlo, la paleta en Photoshop debería visualizarse de esta manera, conteniendo todas las letras en sus distintos porcentajes:








k. Al final, iremos a Image Ready (Shift + Control + M). Ya en ImageReady haremos click menú “Archivo” y presionaremos “Guardar optimizada” o su comando equivalente “Control + Alt + S”.



... Y el resultado será tal cual vimos en la primera animación.



Saludos!