Crear un Gif Animado con

Photoshop CC
Cmo crear un Gif Animado en Photoshop CC, a travs de
la ventana "Lnea de tiempo", optimizado para web.
En este artculo vamos a tratar un recurso que nos puede ayudar en ciertas
ocasiones, como son los GIF animados. Podemos crearlos, o editarlos, por
medio del archiconocido programa de diseo Photoshop, que sera la mejor
opcin posible como herramienta de diseo. El proceso es muy simple. Editas
tu imagen con Photoshop y, sin salirte del programa, puedes animarla o una
vez creada la secuencia de fotogramas, tambin optimizar el archivo para que
pese menos. Al final del artculo encontrars un vdeo que resume el proceso y
donde puedes aprender de manera visual a crear tus propias animaciones con
GIF.
Los Gif Animados son imgenes normales, en un archivo ".gif", con la
particularidad que presentan una animacin. Es igual que cualquier otro archivo
GIF que no tuviese una animacin, por lo que lo puedes subir y mostrar en
cualquier web, compartir en redes sociales, etc., igual que cualquier imagen. Es
por ello que es una excelente opcin para mostrar movimiento en diversas
situaciones.
Hubo un tiempo en la web que los Gif animados eran enormemente populares
en la web. Hoy han pasado un poco de moda, pero siguen utilizndose en
algunas parcelas. Los banner todava se hacen habitualmente con Gif animado,
pero sobre todo a la gente le encanta compartir Gifs Animados en redes
sociales con pequeos cortes de vdeo, mensajes dinmicos, etc.

Cmo crear o editar imgenes Gif

Animado
Si quieres crear un Gif animado existen diversas herramientas, nosotros en
este artculo usaremos Photoshop, pero seguro que hay otros programas ms
simples. Adems vamos a usar la versin de Photoshop CC, pero seguro que
muchos otros Photoshop de los ltimos aos usan la misma receta.
Nota: Para versiones de Photoshop ms antiguas se usaba Image Ready, que es un software que
acompaaba a Photoshop, a partir de la versin 5.5. Ms adelante Image Ready se descontinu,
pero la mayora de sus utilidades de integraron con Photoshop. En DesarrolloWeb.com se explic en
su da cmo crear Gifs animados en Image Ready.

En Photoshop la clave para la creacin de Gifs animados est en la ventana

"Lnea de tiempo". La encuentras en el men "Ventana / Lnea de tiempo". En
ingls se llama "Time line". Si ya conoces Photoshop quizs no necesites ms
referencias para encontrarlo y crear tu propio Gif.

Cmo componer una imagen con

Photoshop para crear un Gif Animado
El procedimiento es bien simple, como lo haras con cualquier otra imagen. Irs
creando los elementos de la animacin en capas independientes, para que
puedas ocultarlos o mostrarlos en los diferentes fotogramas.

Luego abres la mencionada ventana "Lnea de tiempo" o "Timeline" en ingls

(La encuentras dentro del men "Ventana" o "Window" en ingls). En ella es
donde vas a poder realizar toda la gestin de las capas que se deben ver o
ocultar en cada uno de los pasos de la animacin.
Al principio en la ventana de Time Line quizs te pregunte qu tipo de
animacin deseas hacer. Te salen dos opciones:

Crear lnea de tiempo de vdeo

Crear animacin a cuadros

Seleccionas "animacin a cuadros" y a partir de entonces vers que la ventana

de Lnea de tiempo te muestra una imagen en miniatura, en un cuadrito. Ese es
el primer fotograma de tu animacin.
Podrs desde esa ventana crear nuevos fotogramas, con el botn nuevo que se
parece al de crear una nueva capa en el men de capas.

En cada fotograma por separado podrs definir qu capas deseas mostrar u

ocultar, desde la ventana de capas. Agregando nuevos fotogramas y mostrando
y ocultando las capas hasta que tu animacin se complete.

Desde la ventana de la Lnea de tiempo podrs acceder a varios controles de tu

animacin, por ejemplo para ponerla en marcha o pararla, pasar de un
fotograma al siguiente, etc. Los controles principales que tendrs que tocar
aqu son los de asignar tiempo y el tipo de animacin que ahora te describimos.
Para editar el tiempo que deseas asignar a cada fotograma usas un control que
est justo debajo de la imagen de miniatura. El tiempo depender mucho del
efecto que quieras conseguir y/o del mensaje a mostrar en tu banner. En la
medida de tiempo que aparece debajo de la miniatura podrs seleccionar
cualquier otro valor de los preestablecidos o bien colocar uno de tu preferencia
con "Otro". Puedes seleccionar varios fotogramas en el Timeline de una sola
vez para editar el tiempo de todos ellos y colocar el mismo valor en todos esos
pasos de la animacin.

En general puedes escoger varios fotogramas a la vez y todos los ajustes que
hagas se aplicarn a todos esos fotogramas. Imagina que tienes una capa que
quieres quitar de varios fotogramas de la animacin, pues seleccionas todos los
cuadritos del timeline y ocultas esa capa, la ordenas, etc.
Otra cosa que podrs hacer en la ventana de la lnea de tiempo es ajustar el
bucle de animacin, si quieres que se vea una vez, un nmero de veces dado o
que la animacin se repita de manera infinita.

Guardar el Gif Animado desde "Guardar

para web" de Photoshop
La opcin "Guardar para web" de Photoshop es la que nos sirve para guardar
imgenes optimizadas. La debes de conocer. Si ests guardando un GIF
animado simplemente te tienes que fijar que el formato de tu imagen es Gif.

En la parte de abajo adems puedes elegir el estilo de tu animacin Gif. Es

bien sencillo, pero ten en cuenta que esa opcin solo aparece activada si ests
guardando un Gif en el que tienes varios fotogramas en una animacin.

Al guardar el archivo te tienes que fijar que indicas la extensin .gif.

Generalmente el propio Photoshop te la coloca. Con ello ya tendrs tu Gif
Animado listo para usar donde quieras o necesites.