Artculo que explica paso a paso la creacin de un GIF animado utilizando Photoshop y su aplicacin asociada Image Ready.

Por Juliana Monteiro Lazaro

Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

A partir de la versin 5.5 de Photoshop tenemos a nuestra disposicin un programa muy interesante para realizar, entre otras cosas, trabajos especficos para el web, como pueden ser la creacin de GIFs animados o imgenes que cambien al pasar el ratn 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 artculo de DesarrolloWeb.com. Vdeo: Puedes ver todo este proceso de creacin 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 sern necesarias para realizar el GIF animado.
Nota: Las capas son propias de Photoshop y de otros programas de diseo grfico y permiten editar partes del grfico 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 imgenes queramos que haya en la animacin. Luego con Image Ready podremos intercalar esas capas en el orden que queramos y asignarles un tiempo de visualizacin a cada.

Una vez creada la imagen con las distintas capas con Photoshop, podemos guardarla con extensin .psd, para que guarde toda la informacin 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 cmodamente, podemos utilizar un botn que hay en la parte de abajo de la barra de herramientas. El botn se encuentra en los dos programas y podemos verlo remarcado en la imagen de la derecha.
Nota: La accin 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 aplicacin a otra.

Trabajo con Image Ready

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

La ventana de animacin contiene un botn para aadir 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 animacin 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 visualizacin de cada uno de los fotogramas tenemos un registro de los segundos de visualizacin justo debajo de la miniatura del fotograma. Al pulsar sobre ese registro de segundos aparecer una ventana donde seleccionar cualquier duracin, en segundos.

Cuando tengamos la animacin tal como deseamos que aparezca en nuestra pgina web seleccionamos en el men Archivo, la opcin "Guardar optimizada como..." y nos aparecer la ventana tpica 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 nmero de colores o el tipo de paleta para optimizar la imagen, con objeto de que ocupe el menor espacio posible en bytes y sea rpida de descargar. La optimizacin 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 caracterstica ms interesante para optimizar en un fichero GIF es el nmero de colores. Por lo general, a menor nmero de colores, menor tamao del archivo. En la ventana del documento podemos encontrar unas solapas que nos permiten seleccionar la versin de la imagen que queremos visualizar: la versin Original o la Optimizada. Las solapas 2 copias o 4 copias permiten comparar entre la versin original y algn tipo de optimizacin.

Referencia: Hablamos sobre formatos grficos y la optimizacin de imgenes en cada uno en un artculo Formtos grficos para pginas web.

Resultado obtenido

Para realizar este artculo hemos creado un GIF animado que se puede ver a continuacin. No es muy atractivo, pero ser interesante ver el resultado conseguido.

Referencia: Hemos hecho otro ejemplo de animacin con Photoshop e Image Ready que puede complementar este artculo: 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
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Vamos a ver otro artculo sobre como crear un GIF animado con el programa Photoshop e Image Ready, un software que acompaa a Photoshop desde su versin 5.5. Este artculo se debe leer a continuacin 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 lneas. 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 animacin que imite y solicite el clic del ratn encima del banner.

Vdeo: Si deseas ver cmo realizamos este proceso en vivo, te recomendamos el videotutorial de creacin de un Gif animado.

Crear un archivo .psd con los distintos fotogramas

Como ya se explic en el artculo sobre crear un GIF animado en Photoshop, el primer paso consiste en crear un archivo de Photoshop (de los que tienen extensin .psd) con las distintas capas que contienen los diversos fotogramas de la animacin. En la imagen se puede ver ese archivo que contiene la capa del pual, y la de los distintos textos y punteros del ratn que, al estar colocados cada uno en una posicin distinta y verse uno detrs de otro, darn sensacin de movimiento.

Para conseguir las imgenes de los punteros del ratn que se van a utilizar en la animacin hemos accedido a la ventana de configuracin del ratn 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 botn de ms abajo de la barra de herramientas. Desde Image Ready definiremos la animacin a base de indicar qu capas estarn visibles en cada fotograma. Para ello crearemos fotogramas desde la ventana de animacin y, colocndonos 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 animacin muy lenta que aburra al posible lector, ni una muy rpida, que podra hacer demasiado difcil la lectura. El tiempo se asigna en la ventana de animacin 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 animacin en un archivo GIF seleccionamos la opcin "guardar optimizada como" del men archivo. Hay que fijarse en este punto en la ventana de optimizar, que

aparece con el la opcin Ventana > Mostar optimizar, donde podemos seleccionar el formato en el que deseamos guardar la imagen (en este caso GIF) y las caractersticas del archivo, como pueden ser nmero de colores, tramado, paleta, etc.

Resultado obtenido

Mostramos a continuacin una vez ms el resultado obtenido en este ejercicio, que esperamos haya resultado interesante.

TUTORIALES PHOTOSHOP
GIF ANIMADOS CON FOTOGRAFIAS DIGITALES
Tutorial por: Ing. Hernn Cuza Como hacer gif animados con fotografas digitales? Ahora tendrs la oportunidad de divertirte creando gif animados de los juguetes y mascotas de tus hijos, ellos de seguro te lo agradecern, es muy sencillo para principiantes, pero si ya has utilizado adobe photoshop 8.0 e Imageready., te ser mucho mas fcil. Tomando imgenes: Lo primero es tener al menos 3 imgenes que impliquen movimiento de alguna forma, en mi ejemplo he tomado 3 imgenes de un Dlmata de Peluche, a este, con ayuda de una varilla le presion la parte posterior de la cabeza al mismo tiempo que tomaba las fotografas. La imgenes pueden ser de cualquier objeto, personas, animales o plantas, la esencia esta en lograr algn tipo de cambio entre las fotos, para luego animarlas y crear la sensacin de movimiento , la cmara solo debe estar en la misma posicin a la hora de tomar las fotografas. Nota: Trata de usar como fondo un color fuerte y que no este presente en la mascota, para que te sea mas fcil el trabajo posterior.

Imagen 1

Imagen 2

Imagen 3 Editando Imgenes:

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 ms importantes. Como lo que queremos hacer es un gif , evidentemente este debe ser pequeo, mximo 90x90 y muy ligero de peso, para ello debemos recortar las imgenes y hacer su fondo transparente, cosa que lograremos con ayuda del Photoshop. Las imgenes sern editadas una por una, primero abrimos una imagen con photoshop y con ayuda de la herramienta varita mgica 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 mtodos de lograr lo mismo con mas rapidez: Nota: Las imgenes se pueden mejorar tanto como se desee, solo que para un gif animado los pequeos detalles no se visualizarn.

Guardando la seleccin: Para lograr una imagen similar a la interior debemos seleccionar y guardar solo el objeto (dlmata), sin el fondo, o mejor dicho con el fondo transparente, para ello nos apoyaremos de nuevo en la varita mgica, y hacemos clic sobre el fondo blanco, luego vamos a la solapa seleccin - invertir, de ah que queda solo seleccionado el objeto dlmata, y de nuevo vamos a seleccin guardar seleccin, 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 extensin (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 dlmata, como se puede observar en la siguiente imagen.

Dlmata.tif Creando la animacin: 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 imgenes .tif previamente creadas , las que se abrirn en la ventana de animacin (similar a una tirilla flmica), y vamos a la solapa imagentamao de imagen y le ponemos un tamao mximo de 90 x 90 propio de un gif, luego a cada imagen de la ventana animacin , 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 imgenes, haciendo clic en el icono correspondiente de la ventana de animacin ,esto es con el objetivo de mejorar el tiempo de exposicin del gif. Nota: El tiempo de exposicin lo puede cambiar a su gusto, al igual que puede duplicar las imgenes 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 faltara 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.