Crea un GIF animado con Photoshop

Artículo que explica paso a paso la creación de un GIF animado utilizando Photoshop y su aplicación asociada Image Ready.
A partir de la versión 5.5 de Photoshop tenemos a nuestra disposición un programa muy interesante para realizar, entre otras cosas, trabajos específicos para el web, como pueden ser la creación de GIFs animados o imágenes que cambien al pasar el ratón por encima (Rollover).

El producto en concreto es Image Ready y vamos a estudiar la manera de trabajar con él, junto con el propio Photoshop, para realizar un GIF animado.

Referencia: Podemos saber lo que es un GIF animado en un artículo de DesarrolloWeb.com.

Vídeo: Puedes ver todo este proceso de creación del Gif animado en un videotutorial.


Crear un archivo .psd con los distintos fotogramas

La primera tarea para realizar un GIF animado con Photoshop es crear un archivo .psd, que es el formato propio de Photoshop donde podemos mantener capas, que serán necesarias para realizar el GIF animado.

Nota: Las capas son propias de Photoshop y de otros programas de diseño gráfico y permiten editar partes del gráfico de manera independiente. Quien quiera dominar Photoshop y similares deberá familiarizarse con el trabajo con capas.

Cada capa creada con Photoshop puede ser un fotograma del GIF animado, así que podemos crear tantas capas como imágenes queramos que haya en la animación. Luego con Image Ready podremos intercalar esas capas en el orden que queramos y asignarles un tiempo de visualización a cada.

Imagen de las capas creadas para hace la animación


Botón para pasar entre Photoshop e Image Ready Una vez creada la imagen con las distintas capas con Photoshop, podemos guardarla con extensión .psd, para que guarde toda la información de las capas. Una vez guardada podemos pasar el archivo a Image Ready, que es el programa que utilizaremos para animar las capas en un GIF animado.

Para pasar el archivo desde Photoshop a Image Ready cómodamente, podemos utilizar un botón que hay en la parte de abajo de la barra de herramientas. El botón se encuentra en los dos programas y podemos verlo remarcado en la imagen de la derecha.

Nota: La acción de pasar de un programa a otro será muy repetida durante el trabajo con Photoshop e Image Ready, puesto que cada programa tiene unas capacidades distintas y las acciones que se hacen con un programa no tienen porque estar disponibles en otro. Por ejemplo, si queremos editar una capa, debemos hacerlo desde Photoshop y si queremos crear fotogramas y seleccionar las capas que se deben visualizar en cada uno, deberemos hacerlo con Image Ready. Es aconsejable guardar el archivo .psd antes de pasar de una aplicación a otra.


Trabajo con Image Ready

Para definir cada uno de los fotogramas de la animación y sus propiedades tenemos una ventana llamada Animación. Si no la vemos al abrir Image Ready podemos mostrarla en el menú de Ventana > Mostrar animación.

La ventana de animación contiene un botón para añadir fotogramas que tiene forma de documento nuevo. En cada fotograma podemos seleccionar de manera independiente las capas que se desean visualizar, de modo que debemos crear los distintos fotogramas de nuestra animación e indicar qué capas se deben visualizar en cada uno de ellos. Por cierto, las capas se pueden hacer visibles o invisibles desde la ventana de capas con el ojo que hay al lado de cada una de las capas. Cuando se puede ver el ojo la capa es visible y cuando no hay ojo es que es invisible.

Ventana de animación de Image Ready


Para asignar el tiempo de visualización de cada uno de los fotogramas tenemos un registro de los segundos de visualización justo debajo de la miniatura del fotograma. Al pulsar sobre ese registro de segundos aparecerá una ventana donde seleccionar cualquier duración, en segundos.

Elegir el tiempo de cada fotograma


Cuando tengamos la animación tal como deseamos que aparezca en nuestra página web seleccionamos en el menú Archivo, la opción "Guardar optimizada como..." y nos aparecerá la ventana típica para seleccionar el directorio y el nombre de archivo que queremos asignarle.

Optimizar la imagen con Image Ready

Podemos modificar las propiedades de la imagen GIF, como número de colores o el tipo de paleta para optimizar la imagen, con objeto de que ocupe el menor espacio posible en bytes y sea rápida de descargar. La optimización se debe realizar respetando la calidad de la imagen tanto como seamos capaces. Para realizar estas acciones Image Ready dispone de una ventana llamada Optimizar, que si no aparece podremos mostrarla desde el menú Ventana > Mostrar optimizar.

La característica más interesante para optimizar en un fichero GIF es el número de colores. Por lo general, a menor número de colores, menor tamaño del archivo. En la ventana del documento podemos encontrar unas solapas que nos permiten seleccionar la versión de la imagen que queremos visualizar: la versión Original o la Optimizada. Las solapas 2 copias o 4 copias permiten comparar entre la versión original y algún tipo de optimización.

Ventana para optimizar la imagen

Seleccionar el modo de visualización del documento


Referencia: Hablamos sobre formatos gráficos y la optimización de imágenes en cada uno en un artículo Formátos gráficos para páginas web.

Resultado obtenido

Para realizar este artículo hemos creado un GIF animado que se puede ver a continuación. No es muy atractivo, pero será interesante ver el resultado conseguido.

GIF animado resultado del ejercicio

Referencia: Hemos hecho otro ejemplo de animación con Photoshop e Image Ready que puede complementar este artículo: Crear un GIF animado con Photoshop II.

Autor

Juliana Monteiro Lazaro

Directora de CriarWeb.com

Compartir

Comentarios

Pilar M

06/1/2009
esta bien el tutorial pero creo que te saltas un paso sobretodo para los que no saben nada de image, una vez el archivo llega a image en la ventana de animacion se le da la opcion de comberir capas a cuadros, de lo contrari osolo aparece la primera imagen

Miriam

22/2/2009
hola, quisiera saber si se puede meter un gif animado en un vídeo. lo estoy intentando pero no puedo. me urge, gracias.

Gomez

09/9/2009
ONDEAR BANDERA
Hola:
He segudio todos los pasos de los tutoriales y por fin tengo una bandera con sus arrugas, pero ahora ¿como hago para darle animación y se mueve?
Graciashttp://www.desarrolloweb.com/captcha-seguridad/securimage_show.php?1252451291

RAPA001

06/10/2009
Muy buen tutorial
Hola.
Escribo por dos motivos.
Por un lado quiero agradecer el tutorial porque me fue de suma utilidad. No sabía nada de nada ni de photoshop ni de gif animado y en unas 3 horas pude hacer mi primer gif animado de 13 fotogramas. Muchas gracias.
Por otro lado quisiera preguntar si es que se puede agregar a este gif botones de avanzar y retroceder para que el usuario pueda pasar los cuadros hacia adelante y hacia atrás o si eso ya deja de ser un gif animado. En caso de que no se pueda, se puede crear algo así utilizando el photoshop?
Gracias nuevamente
Saludos
RAPA001

pepeluBetico

07/10/2009
GIF animado
Hola, quería conseguir hacer un gif animado de una insignia, te explico, necesito que rote (gire) sobre su eje, las he visto echas por la red, pero yo con el photoshop no consigo hacerla, me podrias ayudar?

gracias y saludos

Ricx

25/10/2009
O.o
gracias desarrolloweb.com por este tutorial, si me funciono y voy usar los gif que hice para mi web

guilmer

26/11/2009
Quisiera que me faciliten algunos folletos de diseño web
hola ustedes si que pasaron son unos tigres me gustaria compartir parte de su conoccimeinto en el webmasters y sacar provecho a su amplios conococimientos

maitane

11/12/2009
Crear gif animado
Quería agradecer que haya gente que comparta conocimiento con los demás de esta manera tan sencilla, gratuita y eficaz. He aprendido a crear gifs animados en un momento.

Me surge una duda, las transiciones pueden cambiarse? me gustaría que fuera con fundido en lugar de que aparezca de golpe, puede hacerse?

Mil gracias de nuevo.

Maitane

nalmup

12/12/2009
help me!!!
lo q pasa es q ya pude aimar mi imagen, le doy guardar como jpg o como gif y de todos modos al abrirla aparte no me reproduce si me pueden explicar como la guarda para q cuando la abra me reprodusca mil gracias/...

jorge_cervantes-636819

18/1/2010
Crear Gif Animado con Photoshop
Hola, me parece excelente el artículo, más aún el video, investigué un poco y me di cuenta que la versión CS3 tiene una ventana acoplable que se llama Animación y que el gif animado se puede guardar en Archivo/Guardar para Web y dispositivos..., y ya no es necesario utilizar el ImageReady.
Gracias, fueron de gran ayuda.

Marco Antonio

06/2/2010
Muy buen trabajo
Agradezco mucho el que haya gente que dedica minutos de su tiempo y conocimientos para compartirlo de manera tan eficiente como lo hacen aqui.
Gracias por existir.

Carolina Zambrano

16/2/2010
Gracias!!!!!
De las mejores ayudas que he encontrado en internet ... cortito, claro y concreto!!!

nada

25/3/2010
gif
me ha gustado muxo es muy bueno

fract

14/4/2010
gif animada EXCELENTE¡¡¡
Muchas gracias por compartir tus conocimientos, me fue muy util el tutorial.=)

Invita

23/4/2010
Gifs en Photoshop cs4
Hola cuando termino el gif y lo guardo como WEB, cuando lo ingreso a la pagina el Gif me queda estatico, lo estare guardando mal

george

23/4/2010
... ... ...
lo guardo en una simple carpeta y si, pero si lo subo a la web no, por que?

Goldshark

21/5/2010
Gif animado
Si lo guardas como gif para web es solo eso, un gif común, no uno animado

Chiviusa

21/6/2010
me urge, cuando lo abro no está animado, solo está la primera imágen
Me urge, cuando lo abro no está animado, solo está la primera imágen.
Estoy haciendo algo mal???
La verdad es que me urge muchísimo.

Por cierto, excelente artículo.

roma

29/6/2010
ME GUSTO
HOLA ME GUSTO EL TUTORIAL, LO VI HACE MESES Y ME SIRVIO BASTANTE, NO SABIA NADA Y HE CREADO VARIOS A PARTIENDO DE ESTE TUTORIAL

miguel

14/7/2010
sapo
perros hifueputas no sirven para nada

Belkis

07/8/2010
gracias!!
A mi me ayudo mucho a orientarme en lo que quiero hacer, gracias por compartirlo!!

marcos

30/8/2010
Gif sobre su eje
pepe para hacer lo de rotar sobre su propio eje hay otros programas k sirven para eso:
Xara 3D
Prueba con ese :)
Suerte!

Elisa Ortiz

21/12/2010
Genial!!!
Muchas gracias por el tutorial. Me fué de gran utilidad. Las explicaciones están muy claras y las imágenes que le acompañan son de mucha ayuda. Un saludo desde Alicante amig@!

ykurnat

20/1/2011
No es tan facil para un novato....
Tengo idea hacer mi primero GIF animado y estoy leyendo el articulo... No tenia ni idea que es Photoshop. Bien, se he registrado y ahora estoy descargando algo que se llama Adobe Photoshop Elements 9 Spanish Windows. Eso es mi primer paso - pero nada de estar seguro que descargo lo que necesito... Ya - no es facil, pero animo....

ykurnat

20/1/2011
PSE 9,0
Por fin - he terminado descargar PSE 9,0 - pero eso solo de prueba para 30 días, no lo sabiá... Parece que es lo que necesito - voy a leer más el articulo...

ykurnat

22/1/2011
Para mi no es facil...
He leido todos los comentarios - y puede ser que soy torpe, pero desde que empezé a crear mi gif amimado (de 5 solo capas - fotogramas) ya he gastado más de 10 horas. Resulta que tengo: he registrado en Photoshop y he descargado PSE 9 - más de 1 GB, he descargado Bannershop GIF Animador 5, todo de prueba, no he conseguido nada - en ultimo programa se hace GIF muy rapido, pero si no pagas - te pegan marca - osea última capa - NOREGISTER. Voy a ver la pelicula de nuevo. De verda preferia un servicio que pagas algo y te lo hacen y colocan en Internet.

fabian olate

20/2/2011
yo pensaba q era para hacer ahora
yo pensaba q era para hacer un gif ya jijijiji

GUAPO DAVID

02/6/2011
instalar mas programas para acer gif para poder gozar sus aplicaciones
solo me dirijo ala internet para poner o para declarar que pongan mas programas para crear imagenes gif y animemacion okkkkkkkkkkkkkkkkkkkkkkkkkkk
k

Yefferson1995

21/2/2012
Sobre el Tutorial:
Hola que tal amigo , veras , vi tu tutorial y me parecio de lo mejor cree mi animacion , pero tengo cierto problema y es que lo hice con photoshop cs5 y los cuadros o fotogramas me los limita a 500 y mi animacion es de 650 cuadros , y no se de verdad que hacer , trate de recortar la animacion en dos , para despues unirla y no pude , porfavor si usted lee este mensaje , se le suplica que me responda a mi correo , saludos.

diego

04/6/2012
hijos de...
puta comerrme el rabo

Sandra

19/12/2013
Pregunta y Felicitaciones!!!
Esta muy bueno, original y practico lo que has dado como ejemplo en el gif, ahora mi consulta es, como puedo verlo en el facebook, con los movimientos respectivos y no que quede como imagen, o en el twiter, como lo debo guardar o exportar? por favor, contestar muchas gracias.

Thor

10/12/2014
¿Como hago que una imagen tenga movimiento?
Me gustaría que me respondiera como hago para que una imagen tenga movimiento? me refiero por ejemplo alguien poniéndose el sombrero o una chica levantándose el polo. Me gustaría que me ayudara para acompañar mis e-mail con gif o mis presentaciones y asi darles un mejor toque. Agradeciendoles de antemano me despido diciéndoles que hacen un gran trabajo ayudando a los que cada queremos ser mejores. Todos mis parabienes y de nuevo GRACIAS.