Como crear Banners Animados con Photoshop e ImageReady

¿Sabes como crear Banners Animados? No se si a [email protected] os ha pasado lo mismo que a mi pero, cuando uno empieza en esto de las paginas web y es muy [email protected], no sabe hacer banners. Yo estuve buscando por muchos sitios y preguntando en foros, chats, buscando en google y me costo bastante.

Por este motivo saco este Manual. Voy a intentar darte un punto de partida para que, de aquí, vayas evolucionando y realizando mejores creaciones. Vamos a utilizar el Adobe Photoshop y el ImageReady, que son programas habituales y fáciles de manejar, y vamos a crear un banner animado.

Es relativamente sencillo, dependiendo de lo [email protected] que estés con el entorno de photoshop, ya que en imageReady se aplican más o menos las mismas reglas. En ambos programas se trabaja con capas que pueden ocultarse o hacerse visibles desde la ventana: CAPAS y haciendo click en el ojito XD.

Pues bien, esas animaciones .GIF no son más que una secuencia de imágenes estáticas de las que se crea una secuencia a la que se le puede asignar valores de tiempo para dar el efecto de movimiento.

Como crear Banners Animados con Photoshop e ImageReady

Te sugiero, a manera de ejercicio, que trabajes con por lo menos 5 imágenes. Aunque no sean iguales, sólo para crear una animación o secuencia. Puedes elegir un fondo que te guste para el banner y darle un tamaño estándar 468 x 60 y luego, utilizando la herramienta de texto, ir poniendo textos distintos, o cambiando colores para iluminarlos y demás.

O puedes utilizar varias imágenes distintas y, en Photoshop, darles el mismo tamaño, recortándolas o transformando su tamaño y guardarlas como .jpg o el formato por defecto de Photoshop, en una carpeta exclusiva para ellas a la que le puedes poner por nombre: «Animación», o como tú quieras.

Desde este momento puedes comenzar a darle orden a tu secuencia asignándole a cada imagen un nombre de una letra o número progresivo: A, B, C, D, E o 1, 2, 3, 4, 5. Sí son más de 10 imágenes te recomiendo usar sólo letras, ya que los números de dos cifras a veces dan conflictos.

Después, desde la barra de herramientas del mismo Photoshop, en la parte inferior aparece un botón para llamar a Imageready (CONTROL+MAYÚSCULAS+M).

Ojo: Si tienes las imágenes que trabajaste abiertas en Photoshop, se cargarán automáticamente cuando abras Imageready.

Te sugiero, por ser más sencillo, que las cierres antes y, una vez abierto Imageready, vayas al menú: ARCHIVO-IMPORTAR-CARPETA COMO CUADROS.

Seleccionas las carpeta donde guardaste las imágenes y automáticamente te cargara todas las imágenes .jpg, o el formato por defecto de Photoshop que creaste antes con dicho programa, en la ventana de animación que aparece generalmente en la parte inferior.

Ya casi tienes lista tu animación!!!

En la ventana de Animación, en la parte inferior, aparecen unos botones para reproducir la secuencia (play), detenerla (stop), avanzarla (faw/rew), etc. así como un botón donde le asignas cuantas veces quieres que se reproduzca. Prueba tú animación pinchando en play!!!

Verás que te avanza rapidísimo por todas las imágenes. Esto es por el tiempo de cada fotograma. Debajo de cada cuadro de imagen aparece por default: 0 seg. Dando click ahí, puedes asignarle a cada cuadro cuanto tiempo tardará en escena (0’2, 0’5, 1, etc).

Ve probando dando tiempos distintos a cada imagen y pinchando luego en play, hasta conseguir el efecto deseado. Para salvar tu animación ve a menú: ARCHIVO-GUARDAR OPTIMIZADA COMO. 

Ojo: no es lo mismo Guardar como y Guardar optimizada como. La primera sólo guardara las imágenes como .PSD. En la segunda verifica además que en TIPO aparezca: Sólo imágenes .GIF.

Ponle un nombre y listo!!!

Hay más opciones para crear efectos, desvanecimientos, etc. incluso para optimizar la animación para que no sea muy grande y se pueda cargar rápido en un explorador. Pero de momento con esto tendrás algo para salir del paso y poder emplear mientras practicas o aprendes otros formatos (Flash, swish, etc).

Cualquier duda, idea o sugerencia coméntala en los comentarios debajo de esta entrada, incluso si se te da bien el diseño y quieres compartir algún manual eres libre de hacerlo. De hecho te lo agradeceríamos.