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 pa ra 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 invisibl e.

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.

Referenci Hablamos sobre formatos grfi os y la optimi aci en cada uno en un artculoFormtos grficos para pginas web. R

de imgenes

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

Referenci Hemos hecho otro ejemplo de animaci n con Photoshop e Image Ready que puede complementar este artculo: Crear un GIF animado con Photoshop II.

u n

Veamos otro ejemplo de GIF an mado que se puede crear muy facilmente con Photoshop e Image Ready.
Por Ju
n

n Contenido exc sivo de Des rrolloWeb.com. No reproducir. Copyrig t.

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.

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

' &%$ #" ! )( 0       2

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.

En este artculo vamos a aprender a crear desde cero un osito de peluche, para ello, usaremos la herramienta Photoshop.
El tutorial constar de tres pasos, la realizacin de la forma para irla combinando y haciendo el cuerpo y la cabeza del osito, lacreacin de un pincel , para incorporar el pelo a nuestras formas y por ltimo el diseo de los ojos y nariz de nuestro mueco. Este ejercicio es muy sencillo, pero depender del arte y lapaciencia de cada uno para conseguir un resultado ms ptimo. En primer lugar creamos un nuevo documento con las caractersticas que os dejamos en la imagen de abajo, (para ello,Men/Archivo/Nuevo ), y ponemos de color frontal 4C2806 y en el fondo FFD30A.

A continuacin con ayuda de la herramienta Marco Elptico, trazamos una elipse como podis ver en la imagen de abajo y aplicamos un filtro de nubes, (Men/Filtro/Interpretar/Nubes). Acto seguido, presionamos 3 veces el comando Ctrl+F, (de este modo repetiremos el efecto).

Hacemos Doble click en la capa fondo, para convertirlo en capa y le ponemos de nombre para no liarnos capa original.

Seguidamente invertimos la seleccin, (Men/Seleccin/Invertir), y le damos a la tecla borrar, (de este modo eliminaremos el fondo).

Presionamos la funcin Ctrl+D para eliminar la seleccin y aplicamos un filtro de trazos de pincel, (para ello,Men/Filtro/Trazos de Pincel/S alpicaduras), poniendo los valores de 22 de Radio y 4 en Suavizar).

Situados sobre la capa original presionamos Ctrl+J para duplicar la capa, (o Men/Capa/Duplicar Capa ).

Bueno hemos realizado la primera parte, para poder continuar tenemos que crear un pincel como veis en la imagen que os dejamos abajo.

Para ello, creamos un documento nuevo, (Men/Archivo/Nuevo ), le damos un tamao de 50x50px y con ayuda de la Herramienta Marco Elptico vamos haciendo circulitos como en el ejemplo, primero uno y luego con la teclaCtrl pulsada, para que se vayan aadiendo a la seleccin y as consecutivamente. Una vez realizada la seleccin, la rellenamos de un color oscuro , (Men/Edicin/Rellenar ).

Una vez realizado esto, definimos el valor del pincel , (Men/Edicin/Definir Valor del Pincel), y le ponemos un nombre, por ejemplo, Pincel Pelos.

Ya hemos creado nuestro nuevo pincel, para visualizarlo, seleccionamos la Herramienta Dedo y sacamos laventana de pinceles , (Men/Ventana/Pinceles o F5), seleccionamos el pincel Pincel Pelos. A continuacin vamos dando pinceladas con la herramienta dedo, alrededor de la elpse y en su interior, si queremos alternar y darle un color oscuro, activamos la casilla pintar con los dedos .

Hacemos la misma operacin con la otra capa, (tanto en capa original como en capa original copia ), y en la capa superior, es decir, capa original copia , cambiamos el modo a multiplicar. Por ltimo presionamos Ctrl+E, para acoplar las dos capas.

Otro paso que podemos realizar, (esto es opcional), es aplicar un filtro de enfoque si queremos que se vean los pelillos ms definidos, para ello, Men/Archivo/Filtro/Enfocar/Enfocar Ms . A continuacin creamos un nuevo documento de mayor tamao y arrastramos dentro la capa con nuestra forma,duplicamos la capa y vamos transformndolas para ir creando las orejas de nuestro osito, (para no liarnos, es conveniente nombrar las capas y ponerlas en orden para encontrar el efecto que deseemos).

Duplicamos la capa, (siempre sobre la original) y la transformamos como podis ver en la imagen de abajo, para crear el hocico.

A si bsicamente vamos a realizar todas las partes de nuestro osito, pero nos quedan los ojos y la nariz, para ello, creamos una nueva capa , (Men/Capa/ Nueva/Capa ), con la Herramienta Marco Elptico hacemos un circulo, seleccionamos la Herramienta Degradado , pulsamos en Degradado Radial , seleccionamos blanco y negro y pinchamos y arrastramos con el ratn dentro del crculo, para rellenarlo con nuestro degradado.

Duplicamos la capa dos veces, para crear los ojos y transformamos tanto la nariz como los ojos, para que quede como en la imagen que os dejamos a continuacin.

Seguimos duplicando la capa original y transformndola como en la imagen de acontinuacin para crear el cuerpo.

Para realizar los brazos y las piernas lo haremos igual, pero podemos usar la Herramienta Borrar para darle lacurvatura necesaria y de esta forma crear un brazo o pierna doblados .

Una vez borrada la parte que consideremos oportuna, podemos usar de nuevo la Herramienta Dedo, para crear nuevamente los pelillos que han desaparecido.

A continuacin os dejamos un ejemplo de como quedara, pero volvemos a insistir en que depender del arte y lapaciencia de cada uno para conseguir un resultado ms ptimo.

En este artculo vamos a aprender a crear desde cero un osito de peluche, para ello, usaremos la herramienta Photoshop.
El tutorial constar de tres pasos, la realizacin de la forma para irla combinando y haciendo el cuerpo y la cabeza del osito, lacreacin de un pincel , para incorporar el pelo a nuestras formas y por ltimo el diseo de los ojos y nariz de nuestro mueco. Este ejercicio es muy sencillo, pero depender del arte y lapaciencia de cada uno para conseguir un resultado ms ptimo. En primer lugar creamos un nuevo documento con las caractersticas que os dejamos en la imagen de abajo, (para ello,Men/Archivo/Nuevo ), y ponemos de color frontal 4C2806 y en el fondo FFD30A.

A continuacin con ayuda de la herramienta Marco Elptico, trazamos una elipse como podis ver en la imagen de abajo y aplicamos un filtro de nubes, (Men/Filtro/Interpretar/Nubes ). Acto seguido, presionamos 3 veces el comando Ctrl+F, (de este modo repetiremos el efecto).

Hacemos Doble click en la capa fondo, para convertirlo en capa y le ponemos de nombre para no liarnos capa original.

Seguidamente invertimos la seleccin, (Men/Seleccin/Invertir), y le damos a la tecla borrar, (de este modo eliminaremos el fondo).

Presionamos la funcin Ctrl+D para eliminar la seleccin y aplicamos un filtro de trazos de pincel, (para ello,Men/Filtro/Trazos de Pincel/Salpicaduras ), poniendo los valores de 22 de Radio y 4 en Suavizar).

Situados sobre la capa original presionamos Ctrl+J para duplicar la capa, (o Men/Capa/Duplicar Capa ).

Bueno hemos realizado la primera parte, para poder continuar tenemos que crear un pincel como veis en la imagen que os dejamos abajo.

Para ello, creamos un documento nuevo, (Men/Archivo/Nuevo ), le damos un tamao de 50x50px y con ayuda de la Herramienta Marco Elptico vamos haciendo circulitos como en el ejemplo, primero uno y luego con la teclaCtrl pulsada, para que se vayan aadiendo a la seleccin y as consecutivamente. Una vez realizada la seleccin, la rellenamos de un color oscuro , (Men/Edicin/Rellenar ).

Una vez realizado esto, definimos el valor del pincel , (Men/Edicin/Definir Valor del Pincel), y le ponemos un nombre, por ejemplo, Pincel Pelos.

Ya hemos creado nuestro nuevo pincel, para visualizarlo, seleccionamos la Herramienta Dedo y sacamos laventana de pinceles , (Men/Ventana/Pinceles o F5), seleccionamos el pincel Pincel Pelos. A continuacin vamos dando pinceladas con la herramienta dedo, alrededor de la elpse y en su interior, si queremos alternar y darle un color oscuro, activamos la casilla pintar con los dedos .

Hacemos la misma operacin con la otra capa, (tanto en capa original como en capa original copia ), y en la capa superior, es decir, capa original copia , cambiamos el modo a multiplicar. Por ltimo presionamos Ctrl+E, para acoplar las dos capas.

Otro paso que podemos realizar, (esto es opcional), es aplicar un filtro de enfoque si queremos que se vean los pelillos ms definidos, para ello, Men/Archivo/Filtro/Enfocar/Enfocar Ms . A continuacin creamos un nuevo documento de mayor tamao y arrastramos dentro la capa con nuestra forma,duplicamos la capa y vamos transformndolas para ir creando las orejas de nuestro osito, (para no liarnos, es conveniente nombrar las capas y ponerlas en orden para encontrar el efecto que deseemos).

Duplicamos la capa, (siempre sobre la original) y la transformamos como podis ver en la imagen de abajo, para crear el hocico.

A si bsicamente vamos a realizar todas las partes de nuestro osito, pero nos quedan los ojos y la nariz, para ello, creamos una nueva capa , (Men/Capa/Nueva/Capa ), con la Herramienta Marco Elptico hacemos un circulo, seleccionamos la Herramienta Degradado , pulsamos en Degradado Radial , seleccionamos blanco y negro y pinchamos y arrastramos con el ratn dentro del crculo, para rellenarlo con nuestro degradado.

Duplicamos la capa dos veces, para crear los ojos y transformamos tanto la nariz como los ojos, para que quede como en la imagen que os dejamos a continuacin.

Seguimos duplicando la capa original y transformndola como en la imagen de acontinuacin para crear el cuerpo.

Para realizar los brazos y las piernas lo haremos igual, pero podemos usar la Herramienta Borrar para darle lacurvatura necesaria y de esta forma crear un brazo o pierna doblados .

Una vez borrada la parte que consideremos oportuna, podemos usar de nuevo la Herramienta Dedo, para crear nuevamente los pelillos que han desaparecido.

A continuacin os dejamos un ejemplo de como quedara, pero volvemos a insistir en que depender del arte y lapaciencia de cada uno para conseguir un resultado ms ptimo.