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

Por Juliana Monteiro Lazaro 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. Enviar un comentario a este artculo Ver comentarios del artculo (30) Compartir en redes sociales Comparte este manual en tus redes sociales MANUAL: Taller de Photoshop Introduccin al Taller de Photoshop Comentarios Enviar un comentario al artculo Fueron enviados 30 comentarios al artculo 13 comentarios no revisados 17 comentarios revisados: 06/1/2009 0 votos 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 Pincha si este comentario es spam 22/2/2009 Por: Miriam 0 votos hola, quisiera saber si se puede meter un gif animado en un vdeo. lo estoy intentando pero no puedo. me urge, gracias. Pincha si este comentario es spam Muy buen tutorial 06/10/2009 Por: RAPA001 0 votos Hola. Escribo por dos motivos. Por un lado quiero agradecer el tutorial porque me fue de suma utilidad. No saba 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 atrs 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 Por: Pilar M Crear un GIF animado con Photoshop II

Saludos RAPA001
Ver la pagina para hacer imgenes gif o banner animado en lnea.

http://www.makeagif.com