Consejos prácticos para realizar GIF animados con calidad profesional.

Existen varias maneras de construir imágenes animadas en la WWW. Pero por las dificultades que presentan muchas de ellas, planteamos el formato .GIF como el ideal para realizar animaciones, pues no necesita amplios conocimientos ni requisitos por parte del desarrollador.

Entre las maneras de construir animaciones en Internet están las que se realizan utilizando Quicktime, .Avi o Flick. Éstas necesitan que tengamos un plug-in específico para poder visualizarlas. En el caso de decidirnos por una animación programada en Java o Java-Script tendremos que contar con un navegador que soporte estos lenguajes, o habremos de activar algún comando específico dentro de las preferencias -algo que no todos los usuarios conocen-. Si planteamos animaciones hospedadas en un servidor tendremos como dificultad el consumo del ancho de banda y del tiempo de procesador del servidor.
Nosotros desarrollaremos esta sucesión de consejos para realizar una animación guardada en .GIF, por la posibilidad que tiene este formato de compresión que por soportar varias imágenes en un solo archivo .GIF, facilita la realización de sencillas animaciones destinadas a nuestro documento World Wide Web.
Un .GIF animado no es más que un conjunto de imágenes, grabadas en formato .GIF, que puestas una tras otra, a modo de fotogramas, y generadas a través de un software específico, nos da una animación basada en un .GIF patrón al que llamaremos desde nuestra página Web. A lo largo de este artículo les daremos una serie de pistas para lograr que estas animaciones .GIF hagan de nuestro documento un lugar atractivo.

Construir
Sin el software específico que ensambla estas imágenes es imposible realizar este tipo de animaciones. Una vez que dispongamos de él los pasos a seguir son los siguientes:
1. Elaborar las imágenes a animar: realizar los distintos fotogramas que compondrán nuestra animación .GIF. Esto se realiza desde cualquier software de tratamiento de imágenes que luego permita grabarlas en este formato -mejor si es en .GIF89a-.
2. Abrir el programa que ensambla las imágenes y llamarlas todas según el orden que han de llevar en la animación. Marcarle los tiempos y posibles efectos a los que vayan a estar sometidas.
3. Grabar el conjunto de imágenes resultantes con la terminación .GIF.
4. Llamar esta animación desde nuestra página, con el mismo modelo de programación que usaríamos si se tratase de una sola imagen. Esta llamada es igual que si se tratase de una imagen fija:<IMG SRC="luna.gif">

Propiedades
A continuación les exponemos las propiedades de las imágenes que estemos creando.
1. En una animación .GIF89a podemos aplicar todas las propiedades básicas del formato .GIF89a, como son entrelazado, transparencia, modo de compresión, paletas de 2, 4, 8, 16, 32, 64, 128 y 256 colores.
2. A diferencia de muchas de las maneras mencionadas brevemente al inicio de este artículo, no necesita de ningún plug-in adicional para ser visualizada correctamente.
3. Una animación se carga de una sola vez. Cuando ya está en nuestra caché no está llamando al servidor constantemente para actualizar sus fotogramas.
4. Una misma animación se puede repetir y reutilizar tantas veces como se desee. En el caso de usarla en varias páginas de un mismo documento, ésta sigue los mismos parámetros que cualquier imagen .GIF o .JPG, que al repetirse en varias partes sólo baja una vez desde el servidor ya que queda almacenada en el caché. Con ello ahorramos tiempo de conexión y de bajada del documento.
5. El peso de las animaciones .GIF es menor que el producido por la suma real de todas las imágenes que la componen. Esto es porque la compresión que tiene permite este efecto.
6. Se puede modificar su tamaño por medio de tags HTML. Usando los mismos comandos width y height que ya utilizábamos para modificar el tamaño de los gráficos -ver SuperNet Magazine número 28-.
<IMG SRC="anim.gif" WIDTH=125 HEIGHT=125>
7. Es posible copiar una animación .GIF del documento que la contenga. Esta posibilidad no implica legalidad. Se debe contactar con el administrador de la página desde donde la pretendamos grabar con el fin de obtener su permiso de uso en un documento nuevo.

Objeciones
Pero no podemos olvidar las cortapisas que se pueden presentar, son estas:
1. No podremos usar más de 256 colores en las imágenes que queramos animar. Cuanto menos colores usemos más se podrá comprimir y más rápida será la bajada a nuestro navegador.
2. Para volver a ver una animación que ya ha terminado hemos de hacer un refresco de la página en la que esté. No hay otra manera de poderlo hacer.
3. Si las imágenes no han sido comprimidas, o si la animación está formada por muchos fotogramas, el tiempo de bajada será lento y ralentizará la aparición de otras imágenes que puedan estar contenidas en la misma página. Es conveniente recordar que robar animaciones .GIF de URL´s ajenas, aparte de poco ético, suele dar como resultado una combinación equivocada de diversos estilos de animaciones e imagen gráfica utilizada en nuestro documento.

Trucos
Una animación .GIF puede llegar a ser muy aburrida e incluso hacer abandonar un documento por ser molesta a la vista del usuario final. Para evitarlo vamos a ver una serie de consejos y trucos.
1. Como ya hemos mencionado antes, uno de los aspectos que más ralentizan la bajada de una animación es una mala compresión. Es conveniente poder establecer cuántos bits por píxeles queremos dar a las distintas imágenes -fotogramas- que compondrán nuestra animación. Esto se puede hacer, entre otros, desde los siguientes software: Photoshop (Windows/Macintosh); Paint Shop Pro 3.0 (Windows); Tool Works 2.2 (SGI Indy); .GIFConvetor (Macintosh); PhotoGIF (Macintosh); Graphic Converter (Macintosh) y Picture Publisher (Windows).
2. El tamaño también es importante. Al igual que las imágenes fijas puede retardar la bajada por tener unas medidas demasiado grandes. En el caso una animación .GIF podemos encontrarnos con que si es demasiado grande este problema puede multiplicarse fácilmente.
3. Como referencia para establecer un tamaño máximo y no excesivamente molesto, hemos de considerar que la pantalla habitual con la que suele visualizarse un documento Web no es mayor a 640 x 480 píxeles y que a estos hay que restarles todos los ocupados por los mismos comandos del navegador, por lo que el espacio disponible -para una visión sin usar el scroll -se puede quedar fácilmente reducido a 550 x 450 píxeles. Sin embargo este tamaño que podría ser aceptable para una imagen fija podría ser "visualmente agotador" para una animación. Por ello se aconseja usar tamaños pequeños.
4. Si se tienen en cuenta estas medidas, sobre todo en el caso de las bandas de publicidad -banners-, no es conveniente hacer .GIF animados destinados a este menester de tamaño mayor a 470 x 50 píxeles. El centrado, o alineado, de la animación resultante vendrá dado por el diseño final de la página.
5. Es cierto que al inicio de este artículo se ha comentado que el repetir varias veces una misma animación guarda ésta en el caché y corta el tiempo en el que estamos bajando el documento del servidor. También lo es que si repetimos varias veces una animación dentro de una misma página conseguiremos lograr un efecto de hastío visual en el usuario, ya que dificultaremos la lectura del documento con elementos que distraerán su atención.

Loop
Lo mismo sucede con el abuso de la propiedad de "repetición" - también conocida como loop- de una misma animación. El uso constante de la función loop en una misma animación distrae la atención. No se aconseja abusar de estas repeticiones, con tres ya es suficiente para entender lo que se muestra. Usar más nos daría como resultado el mismo efecto mareante que el tag <blink> </blink> que el lenguaje HTML destina al texto. Si por lo que sea se considera necesario repetir una animación constantemente se sugiere utilizar el comando delay y dar más tiempo al último fotograma. De esta manera podemos llamar la atención con nuestra animación repetida pero sin abusar ya que la animación se activaría periódicamente tras un periodo de pausa, pudiendo conseguir así atrapar mejor la atención que si la hiciésemos funcionar constantemente. Ahora bien si lo que pretendemos es volver completamente loco al usuario no hay nada mejor que llenar la página de animaciones con o sin loop. Si se hace esto se aconseja no poner enlace con nuestro propio E-mail ya que podría llenarse de insultos.

Creatividad
No hay que cerrarse a trabajar con un solo software para crear efectos atractivos. Es cierto que hay que crear la animación desde un software específico, una vez tengamos los fotogramas creados por otro software, en este caso de tratamiento de imágenes. Con ello conseguimos animaciones tradicionales. Sin embargo si estas animaciones no aparecen de primeras, sino que utilizamos JavaScript para llamarlas una vez posemos el cursor sobre cualquier imagen programada al efecto la capacidad de llamar la atención al usuario será mayor. Se puede ver un ejemplo de esto en http://dmi.uib.es/people/acoca.
Llamando a la fuente de esta página se puede ver la secuencia de programación que se ha seguido. Podemos usar una animación .GIF para hacer desaparecer progresivamente una imagen. Para conseguirlo sólo hemos de ir preparando una serie de fotogramas que comience con uno en el que se observe la imagen a todo color -o en correcto blanco y negro- y que termine con otro del mismo color del fondo que tengamos en nuestra página, o lugar donde esté colocada la animación. Para conseguir un mejor efecto podríamos usar el efecto de difusión -también llamado blur- en el paso de un fotograma a otro.
También podemos crear los fotogramas usando Macromedia Director junto con el software específico de animación. Para ello animaremos los sprite en Macromedia Director, con un número de fotogramas por segundo muy bajo y en un espacio -tamaño de la pantalla donde lo moveremos- muy pequeño. Una vez animados se pueden exportar los cast donde se han almacenado los sprite como picts, los cuales podremos convertir a .GIF89a en Photoshop y posteriormente llamar desde el software específico para crear una animación con una serie de fotogramas más consecuente.

Antonio Fdez-Coca, Prof. UIB
antonioc@ipc4.uib.es
http://dmi.uib.es/people/acoca