Cómo hacer un gif animado o banner

APRENDE A CREAR UN BANNER GIF - Photoshop
Si Flash no es suficiente para tus proyectos, con este videotutorial puedes aprender a hacer un sencillo banner en formato GIF con Photoshop



Puedes elegir entre seguir leyendo o verlo en el videotutorial.

Como los ejemplos siempre ayudan, vamos a hacer el banner para anunciar una empresa ficticia de congelados, así que vamos a dividirlo en tres partes o imágenes.

• Un logo de apertura, (nuestra empresa de congelados).
• Una imagen de un producto, con una frase.
• Un enlace a la web.

Primero vamos a crear un documento nuevo, con un tamaño de 300 por 250 pixeles, que es el tamaño de un banner central, y las propiedades para web de 72 puntos por pulgada, y color RGB.
Para controlar la animación del banner, abrimos la ventana Animación desde el menú principal Ventana. La ventana Animación nos muestra los fotogramas o imágenes que tiene nuestro banner . Para verlo correctamente, cambiamos la visualización a "imagen de cuadros", con el botón situado en la parte inferior derecha.
Vamos a proceder a incluir los elementos, separándolos en carpetas.

• Imagen 1. El logo. Abrimos la imagen del logo y la copiamos y pegamos en el banner. Con la imagen seleccionada, vamos a la parte superior de la ventana Capas y desplegamos el menú, seleccionando "Nuevo Grupo a partir de capas…". Le asignamos el nombre de "imagen 1".


• Imagen 2. Producto y frase. Abrimos la imagen del producto, y hacemos copia-pega en el banner. Si es demasiado grande, podemos reducirla desde el menú Edición - Transformación libre, y tiramos de los puntos de las esquinas hacia el interior de la imagen con la tecla Mayúsculas pulsada. Para el texto, seleccionamos la herramienta Texto en la barra de Herramientas, y escribimos nuestra frase. Cuando lo tengamos todo, seleccionamos las dos capas, y repetimos la operación anterior para agruparlas en una carpeta (menú desplegable, seleccionamos "Nuevo Grupo a partir de capas", y le asignamos el nombre de "imagen 2"). No olvidemos recolocar las carpetas.


• Imagen 3. Enlace web. Volvemos a utilizar la herramienta Texto para escribir el enlace. En la parte superior, por debajo del menú principal, tenemos las opciones de texto, por si queremos cambiar tamaño y color. Seguimos el procedimiento para guargarlo en una carpeta, a la que llamamos "imagen 3".

Vamos a crear los cuadros a partir de las tres carpetas. Cada una va a ser un cuadro, así que seleccionamos el cuadro y vamos al botón "Duplicar cuadros seleccionados". Para que funcione, debemos ir seleccionando cada cuadro, y mostrar la carpeta que nos interese en cada uno, ocultando el resto. Si nos fijamos debajo de cada uno, veremos que cada cuadro tiene una duración por defecto, que lo más probable es que no sea adecuada para mostrar el contenido, así que vamos a seleccionar todos los cuadros pinchando con el ratón y la tecla Mayúsculas pulsada, hacemos clic en la cifra y seleccionaremos dos segundos en el desplegable.

Podemos añadir efectos para animar el paso entre cuadros, como posición para crear movimiento u opacidad para fundido: seleccionamos a la vez dos cuadros que se continúen (con la tecla Mayúsculas pulsada), y pulsamos el botón "Intercala cuadros…". Las opciones son pocas, aunque con paciencia podemos animarlo manualmente, y con algunos trucos podemos conseguir animaciones bastante chulas. También debemos de tener en cuenta que el banner va a ser un GIF, por lo que si queremos tener un banner que no pese demasiado debemos limitar el número de cuadros de animación. En este caso vamos a hacer un efecto de fundido con opacidad, y limitamos el número de cuadros a 3.

Normalmente, los banners se repiten una y otra vez para que nadie se pierda su contenido. Para que nuestro banner haga un bucle, debemos seleccionar "Infinito" en el desplegable que aparece debajo del primer cuadro. Podemos visualizar cómo ha quedado antes de guardar mediante los controles de la parte inferior de la ventana.

Para guardarlo vamos al menú Archivo - Guardar para web y dispositivos, y seleccionamos GIF. Variando las opciones podemos conseguir que el banner pese menos, aunque nosotros lo vamos a dejar tal cual. El problema de los banners gif es que pesan más que los flash, y al añadir más cuadros pesarán más aún, pero últimamente se han vuelto a poner de moda a raíz de la incompatibilidad de los dispositivos móviles con el plugin de Flash. Además, no nos permiten añadir un enlace embebido en el propio banner, por lo que tendremos que utilizar otros medios para que al pinchar, nos lleve a una dirección web.

Y esto es todo, amigos. Esperamos que os haya sido útil. Hasta la próxima.