Gifs animados

  1.- Primero lo que necesitas es una secuencia de imágenes (hechas por ti o ya existentes) que caractericen el movimiento. Recuerda: es un gif por lo tanto cuida de hacer pocos cuadros o mejor aún de no hacer un movimiento complicado, no haremos una película con esto, así que piensa en algo sencillo (también es importante por el peso final de tu gif animado… de ser muy grande corres el riesgo de que tarde en cargar si lo requieres para web. El primer paso es tener la imagen inicial lista de tu gif abierta en el Photoshop.


Aquí puedes quitarle el fondo si deseas que tu gif sea transparente. Entonces cuando estés listo con todos los cuadros de tu gif guardados continuemos al siguiente paso. 2.- Verifica que tus imágenes estén en el modo RGB. Después debes ir al menú File (Archivo) y buscar la opción Jump to (Ir a…). Ahí encontrarás el programa Adobe Image Ready (según la versión de PPS con la que cuentes) Esta acción abrirá una nueva ventana aparte de la ventana de Photoshop con tu imagen inicial (como lo muestra la ilustración).


Una vez en el Image Ready comenzará lo laborioso, si no prestas atención a tu gif te confundirás un poco y seguramente te atorarás... así que procura seguir estos pasos cuidadosamente la primera vez para no perderte, cuando tengas dominado el arte de hacer gifs animados trata de innovar como tu gustes. En la ventana de Image Ready tienes ciertas caracteristicas del Photoshop para editar aún más tu imagen, como quitarle el fondo, pero no te recomiendo que le hagas muchos cambios aquí. 3.- A estas alturas del partido se supone que ya sabes perfectamente qué hará tu gif animado, así que con ese conocimiento procederemos a crear los cuadros que llevará. En la ventana Animation (Animación), que aparece debajo de tu dibujo, podrás introducir los frames (cuadros) que necesites. Haciendo click en el botón Duplicates Current Frame (Duplica cuadro actual) que tiene la forma de una hoja doblada.


En el caso de este ejemplo, el cabello de Mary simulara que se mueve con el viento, asi que solo necesito 3 cuadros más. 4.- Ahora con tus frames esperando para las siguientes imágenes, crearemos Layers (capas). En la ventana Layer (Capa) que aparece a la derecha de la pantalla crea el la misma cantidad de capas que de frames, porque aquí irán las otra imágenes que simularan el movimiento.

5.- Regresa a la ventana de Photoshop (sin cerrar la ventana del Image Ready) y abre los otros cuadros de tu gif animado. Cópialos y pégalos en los layers correspondientes cuidando que las imágenes queden perfectamente alineadas unas con otras, sino tu gif animado parecerá brincar… y no queremos eso! Notarás que la parte donde los cuadros son diferentes esta encimada, eso es porque falta amocodar los layer en sus frames correspondientes…

6.- Como tenemos la misma cantidad de frames que de layers es muy fácil acomodarlos. Vayamos en orden: Para el 1° Frame necesitamos que el 1° layer se vea y nada mas, así que seleccionamos el 1° frame y el 1° layer, y escondemos los demás layers. Para el siguiente cuadro seleccionamos el 2° Frame y el 2° layer y escondemos el 1° layer, y así sucesivamente hasta que tengamos en cada frame el layer correspondiente.


Puedes verificar el movimiento de tu gif haciendo click en el botón Plays/Stops animation (Inicia/ Detiene animación) en la parte inferior de la ventana Animation.

PASO OPCIONAL: También puedes agregar texto!... ó dibujar algún fondo algo austero… y dejarlo durante toda la animación o solo en ciertos cuadros. Por ejemplo le pondré el nombre Maritza a este gif.

7.-
Primero agrega un nuevo layer, pero depende qué es lo que pondrás para la ubicación del layer. Como le voy a poner el nombre (texto) y quiero que aparezca durante toda la animación pondré el layer hasta arriba. Añado texto, lo modifico a mi antojo y lo acomodo en el lugar que lo quiero. Para que se vea durante toda la animación dejaré visible ese layer en cada frame.


Ten mucho cuidado al añadir un nuevo elemento a tu animación, debes hacerlo siempre con el primer frame seleccionado, de no ser así el nuevo elemento se desplazará a medida que las imágenes cambien. 8.- Una vez verificado que el gif se mueve correctamente y que tiene todos los elementos deseados, pasemos a guardarlo! En el menú File (Archivo) selecciona la opción Save Optimized As… (Salvar Optimizado Como). En la ventana de diálogo nombra tu gif, verifica que sea en formato .GIF y listo!!! Podrás ver tu gif animado en acción en el explorador o en cualquier aplicación que soporte las animaciones.   Nota importantísima: Antes de pasar tus imágenes al Image Ready cerciorare de que ese es el tamaño que deseas para tu gif final, porque si intentas cambiar el tamaño de tus imágenes en el Image Ready distorsionará tus imágenes y el gif brincará cuando esté animado. Una vez que hayas dominado esta receta, descubrirás que puedes brincarte muchos pasos dentro del Image Ready (pero con cierto nivel de dificultad) Por ejemplo, no necesitarás pegar imagen por imagen transportándolas del Photoshop al Image Ready. Si guardas un archivo .PPS con cada imagen de tu gif en un layer distinto, puedes abrir ese mismo archivo directamente en el Image ready sin necesidad de “Saltar” de programa. Juega y diviértete con este programa haciendo gifs animados de tus personajes favoritos, seguramente descubrirás muchas más aplicaciones en este programa!



Ver el ejemplo terminado y animado: