Crear un Gif Animado con Photoshop CC

  • Por
Cómo crear un Gif Animado en Photoshop CC, a través de la ventana "Línea de tiempo", optimizado para web.

En este artículo 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 diseño Photoshop, que sería la mejor opción posible como herramienta de diseño. 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, también optimizar el archivo para que pese menos. Al final del artículo encontrarás un vídeo que resume el proceso y donde puedes aprender de manera visual a crear tus propias animaciones con GIF.

Los Gif Animados son imágenes normales, en un archivo ".gif", con la particularidad que presentan una animación. Es igual que cualquier otro archivo GIF que no tuviese una animación, 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 opción 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 utilizándose en algunas parcelas. Los banner todavía se hacen habitualmente con Gif animado, pero sobre todo a la gente le encanta compartir Gifs Animados en redes sociales con pequeños cortes de vídeo, mensajes dinámicos, etc.

Cómo crear o editar imágenes Gif Animado

Si quieres crear un Gif animado existen diversas herramientas, nosotros en este artículo usaremos Photoshop, pero seguro que hay otros programas más simples. Además vamos a usar la versión de Photoshop CC, pero seguro que muchos otros Photoshop de los ultimos años usan la misma receta.

Nota: Para versiones de Photoshop más antiguas se usaba Image Ready, que es un software que acompañaba a Photoshop, a partir de la versión 5.5. Más adelante Image Ready se descontinuó, pero la mayoría de sus utilidades de integraron con Photoshop. En DesarrolloWeb.com se explicó en su día cómo crear Gifs animados en Image Ready.

En Photoshop la clave para la creación de Gifs animados está en la ventana "Linea de tiempo". La encuentras en el menú "Ventana / Linea de tiempo". En inglés se llama "Time line". Si ya conoces Photoshop quizás no necesites más referencias para encontrarlo y crear tu propio Gif.

Cómo componer una imagen con Photoshop para crear un Gif Animado

El procedimiento es bien simple, como lo harías con cualquier otra imagen. Irás creando los elementos de la animación en capas independientes, para que puedas ocultarlos o mostrarlos en los diferentes fotogramas.

Luego abres la mencionada ventana "Línea de tiempo" o "Timeline" en inglés (La encuentras dentro del menú "Ventana" o "Window" en inglés). En ella es donde vas a poder realizar toda la gestión de las capas que se deben ver o ocultar en cada uno de los pasos de la animación.

Al principio en la ventana de Time Line quizás te pregunte qué tipo de animación deseas hacer. Te salen dos opciones:

  • Crear línea de tiempo de vídeo
  • Crear animación a cuadros

Seleccionas "animación a cuadros" y a partir de entonces verás que la ventana de Línea de tiempo te muestra una imagen en miniatura, en un cuadrito. Ese es el primer fotograma de tu animación.

Podrás desde esa ventana crear nuevos fotogramas, con el botón nuevo que se parece al de crear una nueva capa en el menú de capas.

En cada fotograma por separado podrás definir qué capas deseas mostrar u ocultar, desde la ventana de capas. Agregando nuevos fotogramas y mostrando y ocultando las capas hasta que tu animación se complete.

Desde la ventana de la Línea de tiempo podrás acceder a varios controles de tu animación, por ejemplo para ponerla en marcha o pararla, pasar de un fotograma al siguiente, etc. Los controles principales que tendrás que tocar aquí son los de asignar tiempo y el tipo de animación 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 podrás 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 animación.

En general puedes escoger varios fotogramas a la vez y todos los ajustes que hagas se aplicarán a todos esos fotogramas. Imagina que tienes una capa que quieres quitar de varios fotogramas de la animación, pues seleccionas todos los cuadritos del timeline y ocultas esa capa, la ordenas, etc.

Otra cosa que podrás hacer en la ventana de la línea de tiempo es ajustar el bucle de animación, si quieres que se vea una vez, un número de veces dado o que la animación se repita de manera infinita.

Guardar el Gif Animado desde "Guardar para web" de Photoshop

La opción "Guardar para web" de Photoshop es la que nos sirve para guardar imágenes optimizadas. La debes de conocer. Si estás guardando un GIF animado simplemente te tienes que fijar que el formato de tu imagen es Gif.

En la parte de abajo además puedes elegir el estilo de tu animación Gif. Es bien sencillo, pero ten en cuenta que esa opción solo aparece activada si estás guardando un Gif en el que tienes varios fotogramas en una animación.

Al guardar el archivo te tienes que fijar que indicas la extensión .gif. Generalmente el propio Photoshop te la coloca. Con ello ya tendrás tu Gif Animado listo para usar donde quieras o necesites.

Espero que te haya servido de ayuda. A veces conocemos herramientas como Photoshop pero desconocemos lo que se puede hacer con ellas. Diviértete creando tus Gif animados!

Aquí te dejo el Gif que he usado de ejemplo, aunque lo he reducido mucho de tamaño para que no ocupase una barbaridad. El Gif Animado lo he creado con una secuencia de fotogramas con fotos realizadas por Beatriz Alvarez Sánchez.

Videotutorial Gif Animado con Photoshop CC

Si lo prefieres, puedes ver este proceso en un vídeo cortito donde creamos un Gif animado sencillo, lo configuramos y optimizamos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Luis

13/2/2015
Cómo crear?
Se debería llamar "Se pueden crear Gif animados con Photoshop CC", porque esto de manual tiene bastante poco.
Además, redacción deja mucho que desear.

midesweb

13/2/2015
Como dices?
Me temo que no estamos viendo el mismo artículo.
Está explicado el proceso entero de creación del gif animado, así q el título es perfectamente correcto.
Saludos

Alexcorp

14/2/2015
Gif con photoshop
Esta excelente el artículo!! ..Con Desarrolloweb siempre hay mucho que aprender..

Roci

16/2/2015
Estupendo!!!
Muchas gracias por el tutorial, sois los mejores...

Andrea

27/4/2015
ESTUPENDO!
Claro como el agua... esta buenísimo! Gracias.

Jaime Hinojosa

08/6/2015
Informacion correcta
Llamese o no manual, lo importante es que la informacion es correcta y util como guia para crear una anomacoon. Gracias

Roberto Ortega

19/6/2015
Photoshop y pantalla touch
Hola.

Tengo un problema, mi lap top tiene pantalla touch y cuando hago zoom sobre el lienzo y quiero ocupar la herramienta del pincel, en vez de pintar desplaza el lienzo como si estuviera usando la herramienta de la mano. Hay alguna manera de configurar esto para que no mueva el lienzo y pinte?

gracias

pAbLO

05/10/2015
COMO CONSEGUIR AL ARCHIVO .GIFF
Cuando ya tengo todas las imágenes preparadas, y quiero guardar, al seguir tus pasos el programa me da un archivo, que emplea como icono el navegador que uso, y en sus características dice que es un archivo "Chrome HTML Document (.html)" . Al abrirlo se abre una página del navegador donde se ve el GIFF, y si copio la dirección de la barra https que aparece arriba, no sirve para luego yo poder compartir el archivo.
Hay que conseguir un archivo .GIFF?? Cómo se comparten los GIFF??

Kike

18/11/2015
Versión
Se puede hacer lo mismo con el Photoshop CS6?

Salva

18/12/2015
Gracias
excelente, me sirvió mucho.

saludos.

Fermin Guadalupe Espinoza Padilla

07/1/2016
Felicitaciones
Muchas gracias por tu ayuda, estoy aprendiendo a usar photoshop y tenia la curiosidad de saber como hacer un GIF en el, espero ver mas articulos sobre photoshop tuyos mas adeante.
Gracias.

marcia

16/1/2016
gracias
me sirvió mucho tu guía ,gracias

Carolina Diaz

03/3/2016
Duda instagram
Hola! Muy buena expliación! Quería saber si estas animaciones gif que creamos en photoshop, se pueden subir a instagram? Como?

Gracias de antemano.

Irene

17/3/2016
Perfecto!
Justo lo que estaba buscando, muy bien explicado :) gracias!!!

Luis Miguel

17/3/2016
Falta detalle al guardar el gif
Este artículo necesita actualizarse y detallar mejor el guardado del archivo Gif, la opción Guardar para web ahora aparece como heredada, dentro del menú Exportar.

Laura

21/3/2016
COMO OBTENGO EL ARCHIVO .GIFF
Cuando ya tengo todas las imágenes preparadas, y quiero guardar, al seguir tus pasos el programa me da un archivo, que emplea como icono el navegador que uso, y en sus características dice que es un archivo "Chrome HTML Document (.html)" . Al abrirlo se abre una página del navegador donde se ve el GIFF, y si copio la dirección de la barra https que aparece arriba, no sirve para luego yo poder compartir el archivo.
Hay que conseguir un archivo .GIFF?? Cómo se comparten los GIFF??

agenciaDODO

11/4/2016
Otras opciones para crear GIFs Animados
Enhorabuena por el tutorial. En efecto Photoshop es la forma más "profesional" de crear un Gif Animado. De todas maneras y para los que no se atrevan con la herramienta de Adobe, dejamos un listado con herramientas para crear GIFs animados de forma sencilla: http://agenciadodo.es/crear-gifs-animados-para-redes-sociales/

Esperamos sea de vuestro interés.
Saludos.

Adonaí Valencia M

15/4/2016
Excelente tutorial
Es uno de los mejores tutoriales que he encontrado. Gracias por enseñarnos a manejar esta herramienta de Photoshop cc.

Satine

16/5/2016
Tamaño
Si quiero hacer un gif vertical, que tamaño y resolución debería ponerle?

Erika Joselyne

24/5/2016
Error
Hola muy buenas noches;Al terminar de hacer mi animación y quererla exportar en gif me marca que hay un error desconocido. ¿A que se puede deber esto?

Marcos

13/7/2016
tutorial
gracias por la info, muy util!

Luis Duran

06/8/2016
Excelente tutorial
Excelente tutorial amigo me sirvio al 100%. Saludos desde Venezuela

griselda

09/2/2017
muy buen tutorial
Me encanto, me funciono bastante bien
se entiende muy bien hasta para los que no saben utilizar al 100 el programa
muchas gracias !!

Rick

18/2/2017
Gif
Bueno el tutorial. Gracias.

jose

20/4/2017
sobre los gif animados
una pregunta, como hago para que ese gif animado se detenga con un click... como esos juegos de detener la imagen en un punto exacto ?

gracias y buen tutorial

ale

20/5/2017
Comentario
Excelente información,solamente que lástimosamente no lo comprendí muy bien pero lo logré hacer,me quedo hermosoooo

javiera

19/2/2018
thanks
justo lo que andaba buscando

Ignacio

19/12/2018
Siempre
Pasan los años y esta sigue siendo la mejor página en castellano para desarrollo general web!