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.
Por Juliana Monteiro Lazaro
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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.
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.

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.
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.

 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.

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.

Crear un GIF animado con Photoshop II

Veamos otro ejemplo de GIF animado que se puede crear muy
facilmente con Photoshop e Image Ready.
Por Juliana Monteiro Lazaro
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Vamos a ver otro artículo sobre como crear un GIF animado con el programa Photoshop e

Image Ready, un software que acompaña a Photoshop desde su versión 5.5. Este artículo se

debe leer a continuación de Crea un GIF animado con Photoshop, que explica paso a paso el

proceso, incluidas algunas tareas que no vamos a relatar aquí, para no repetir los conceptos.
Vamos a realizar un GIF como el que se puede ver debajo de estas líneas. El mensaje

publicitario no importa mucho, lo que sí hemos querido incluir es la famosa frase "clic aquí",

que suele incrementar el nivel de efectividad de un banner varios puntos. Así que vamos a

crear una animación que imite y solicite el clic del ratón encima del banner.

Vídeo: Si deseas ver cómo realizamos este proceso en vivo, te recomendamos el videotutorial de

creación de un Gif animado.

Crear un archivo .psd con los distintos fotogramas

Como ya se explicó en el artículo sobre crear un GIF animado en Photoshop, el primer paso

consiste en crear un archivo de Photoshop (de los que tienen extensión .psd) con las

distintas capas que contienen los diversos fotogramas de la animación. En la imagen se

puede ver ese archivo que contiene la capa del puñal, y la de los distintos textos y punteros

del ratón que, al estar colocados cada uno en una posición distinta y verse uno detrás de

otro, darán sensación de movimiento.

Para conseguir las imágenes de los punteros del ratón que se van a utilizar en la animación

hemos accedido a la ventana de configuración del ratón del panel de control de Windows. Se

puede ver en la siguiente imagen la ventana a la que nos referimos.

Trabajo con Image Ready

Una vez tenemos la imagen realizada la pasamos a Image Ready pulsando el botón de más

abajo de la barra de herramientas. Desde Image Ready definiremos la animación a base de

indicar qué capas estarán visibles en cada fotograma. Para ello crearemos fotogramas desde

la ventana de animación y, colocándonos en cada fotograma, seleccionaremos las capas que

deseamos que se vean en la ventana de capas.

Posteriormente habrá que asignarles un tiempo adecuado a cada fotograma. No es

recomendable hacer una animación muy lenta que aburra al posible lector, ni una muy

rápida, que podría hacer demasiado difícil la lectura. El tiempo se asigna en la ventana de

animación pulsando debajo de la miniatura de cada fotograma. Podemos seleccionar varios

fotogramas y darle un mismo tiempo a todos o bien seleccionar fotograma a fotograma y

asignarle un tiempo distinto.

Para guardar la animación en un archivo GIF seleccionamos la opción "guardar optimizada

como" del menú archivo. Hay que fijarse en este punto en la ventana de optimizar, que
aparece con el la opción Ventana > Mostar optimizar, donde podemos seleccionar el formato

en el que deseamos guardar la imagen (en este caso GIF) y las características del archivo,

como pueden ser número de colores, tramado, paleta, etc.

Resultado obtenido

Mostramos a continuación una vez más el resultado obtenido en este ejercicio, que

esperamos haya resultado interesante.

GIF ANIMADOS CON FOTOGRAFIAS DIGITALES

Tutorial por: Ing. Hernán Cuza

¿Como hacer gif animados con fotografías digitales?

Ahora tendrás la oportunidad de divertirte creando gif animados de los juguetes y

mascotas de tus hijos, ellos de seguro te lo agradecerán, es muy sencillo para
principiantes, pero si ya has utilizado adobe photoshop 8.0 e Imageready., te será
mucho mas fácil.

Tomando imágenes:

Lo primero es tener al menos 3 imágenes que impliquen movimiento de alguna forma,

en mi ejemplo he tomado 3 imágenes de un Dálmata de Peluche, a este, con ayuda de
una varilla le presioné la parte posterior de la cabeza al mismo tiempo que tomaba las
fotografías. La imágenes pueden ser de cualquier objeto, personas, animales o plantas,
la esencia esta en lograr algún tipo de cambio entre las fotos, para luego animarlas y
crear la sensación de movimiento , la cámara solo debe estar en la misma posición a la
hora de tomar las fotografías.

Nota: Trata de usar como fondo un color fuerte y que no este presente en la mascota,
para que te sea mas fácil el trabajo posterior.
 Imagen 1

Imagen 2

Imagen 3

Editando Imágenes:
Nota: Este tema esta recogido en muchos tutoriales de photoshop, por lo que no
pretendo darles una clase al respecto, solo hacer énfasis en los aspectos más
importantes.

Como lo que queremos hacer es un gif , evidentemente este debe ser pequeño, máximo
90x90 y muy ligero de peso, para ello debemos recortar las imágenes y hacer su fondo
transparente, cosa que lograremos con ayuda del Photoshop. Las imágenes serán
editadas una por una, primero abrimos una imagen con photoshop y con ayuda de la
herramienta varita mágica y apretando la techa SHIFT repetidas veces ,
seleccionamos el área a eliminar, en este caso el fondo, luego oprimimos la tecla Delete,
posteriormente con ayuda del borrador eliminamos los trazos y las sombras
restantes, de tal forma que el fondo este completamente en blanco, este trabajo es algo
tedioso , sobre todo si el fondo de la imagen es variado, aunque hay otros métodos de
lograr lo mismo con mas rapidez:

Nota: Las imágenes se pueden mejorar tanto como se desee, solo que para un gif
animado los pequeños detalles no se visualizarán.

Guardando la selección:

Para lograr una imagen similar a la interior debemos seleccionar y guardar solo el objeto
(dálmata), sin el fondo, o mejor dicho con el fondo transparente, para ello nos
apoyaremos de nuevo en la varita mágica, y hacemos clic sobre el fondo blanco, luego
vamos a la solapa selección - invertir, de ahí que queda solo seleccionado el objeto
dálmata, y de nuevo vamos a selección – guardar selección, ponemos un nombre
cualquiera y aceptamos, con lo que creamos un canal nuevo. Por ultimo guardamos la
imagen, vamos a archivo-guardar como y seleccionamos un nombre nuevo para la
imagen y la extensión (Tipo) .Tif, lo que nos permite salvar el canal alfa. Así lo
haremos para cada imagen, y las guardamos en la misma carpeta, con nombres
consecutivos.

Nota: El fondo de la imagen obtenida será transparente, por lo que solo se vera el objeto
dálmata, como se puede observar en la siguiente imagen.
 Dálmata.tif

Creando la animación:

El gif animado lo haremos con Imageready, que se instala junto con el photoshop, para
ello una vez ejecutado, vamos a archivo-importar-carpeta como cuadros y
seleccionamos la carpeta con las 3 imágenes .tif previamente creadas , las que se abrirán
en la ventana de animación (similar a una tirilla fílmica), y vamos a la solapa imagen-
tamaño de imagen y le ponemos un tamaño máximo de 90 x 90 propio de un gif, luego
a cada imagen de la ventana animación , le cambiamos el tiempo de retardo a 0,1 seg.,
haciendo clic en la esquina inferior derecha de cada imagen, por ultimo duplicamos
varias veces las imágenes, haciendo clic en el icono correspondiente de la ventana de
animación ,esto es con el objetivo de mejorar el tiempo de exposición del gif.

Nota: El tiempo de exposición lo puede cambiar a su gusto, al igual que puede duplicar
las imágenes tantas veces como desee…

Guardando el Gif animado:

Solo queda guardar el trabajo, para ello vamos a archivo-guardar optimizada como y
ponemos el nombre que queramos a nuestro gif . Solo faltaría usar Internet Explorer
para visualizar el resultado...

He aquí el final.

Nota: Este tutorial esta realizado en su totalidad por mi, y aunque es muy sencillo,
apenas he encontrado alguno similar en Internet, por lo que espero saciar la curiosidad
de muchos.

Autor: Ing. Hernán Cuza

19-9-2006
Como crear Gifs animados en
Photoshop

Para obtener un Gif animado podemos seguir estos pasos:

1. Crea una nueva imagen del tamaño que quieras.

2. Diseña tu publicidad, y crea escenas diferentes agrupando las capas en carpetas
diferentes para cada escenario. (Si el fondo es el mismo para todas las escenas puede
quedar fuera de las carpetas, es decir, el mismo fondo para todas).

En el ejemplo se puede ver la organizacion en carpetas (en este ejemplo son 3 escenas, con
un fondo comun) para la visualizacion de las capas haz clic en el ojo junto a las carpetas.

3. Una vez creados los escenarios has clic en animación (Ventana – animación) y se
abre una ventana:

En la ventana debes duplicar el cuadro n veces, n es el numero de escenas.

4. Para que cada escena salga en diferente cuadro debes hacer clic en visualizar capa.
5. Seleccionas todos los cuadros y clic en la flecha negra para seleccionar el tiempo de
retardo.

6. Cuando tengas todo listo ve a Archivo-Guardar para Web y dispositivos selecciona Gif y
exportalo.

El resultado es el siguiente: