Para dar vida su página web no es necesario adquirir ningún software o aprender a programar. Le explicamos paso a paso, la forma más sencilla de crear animaciones para su sitio web.

La forma más común de insertar publicidad en las páginas web es mediante los llamados banner o banderolas animadas. Si se ha conectado a Internet alguna vez (y quien no lo ha hecho) habrá visto como la mayoría de las páginas web tienen anuncios de otros sitios web o de secciones del propio sitio. También se habrá fijado en que muchos de estos anuncios son pequeñas animaciones que le invitan con distintas técnicas a hacer clic sobre ellas para llevarle hasta las páginas web del anunciante.

El formato GIF

De los dos formatos de imagen más extendidos en el diseño web (JPEG y GIF), el formato GIF (vea el artículo “Gráficos ligeros para la Web” en la sección secretos del número 89 de Macworld) es el único que permite crear animaciones para ser incluidas directamente en una página web. La ventaja de los GIF animados es que son muy fáciles de crear, no son necesarios módulos de terceras partes y no hay problemas con los distintos navegadores ni los sistemas operativos. Por otro lado, las principales desventajas se encuentran en que si se crean animaciones con muchos fotogramas el archivo final ocupa bastante y no hay opciones para añadir interactividad.

Antes de comenzar a crear el banner, es conveniente plantearse el mensaje que quiere comunicar y tratar de resumirlo en tres o cuatro fotogramas como mucho. Si se plantea una idea que requiere mucho más, es posible que lo que necesite es hacer una película QuickTime o que tenga que acudir a herramientas como Macromedia Flash.

Las herramientas. Para crear un GIF animado, lo ideal sería contar con una herramienta como la versión 5.5 de Photoshop. Photoshop es la reina de las aplicaciones para el tratamiento de imágenes y todo un peso pesado para la creación de imágenes para la Web. Sin embargo, es posible que usted no cuente más que con las aplicaciones que venían incluidas con su iMac y con algunos CD con software de dominio público (o con una conexión a Internet para descargarlos). Es por esto que para el ejemplo mostrado se ha utilizado tan sólo la aplicación gratuita GifBuilder 0.5, que puede descargar desde cualquier sitio web dedicado al software de dominio público como shareware.com o similares. GifBuilder proporciona los recursos básicos para crear una animación a partir de serie de fotogramas y algunas herramientas para incluir transiciones o y añadir efectos. Además de GifBuilder para montar la secuencia, para la creación de los fotogramas se ha utilizado ClarisWorks que, si bien no es una herramienta demasiado interesante para diseño, dispone de las suficientes capacidades de integración de texto y gráficos para proyectos sencillos. Puede ver el banner que ha servido de ejemplo en www.idg.es/macworld/imacworld/gifanimado/bannerejemplo.gif.

CREAR LOS FOTOGRAMAS

------------------------------------

El banner que ha servido de ejemplo consta de tres fotogramas básicos. Una vez arranque ClarisWorks deberá elegir la opción de nuevo documento de pintura. Con la herramienta de dibujo de rectángulo se creó uno con unas dimensiones de unos 15,5 por 2,3 centímetros y se le aplicó un relleno de color negro (1). Sobre la parte izquierda se creó un segundo rectángulo con un relleno de textura de la paleta de ClarisWorks y sobre éste se escribió el texto del primer fotograma (2).

Para que el texto blanco de la parte izquierda contrastasé sobre el fondo, se duplicó el elemento, se le asignó color negro al texto y se situó debajo y muy cerca del primero (3). La parte derecha del banner se creó con las mismas herramientas de texto y de formas simples. A los pequeños círculos que encabezan cada uno de los mensajes se les aplicó un relleno de degradado. El fotograma inferior es un duplicado del superior al que se le ha añadido una segunda parte del mensaje, que se completará en último fotograma.

Para completar el tercer fotograma se duplico el rectángulo negro del segundo, se coloco sobre la imagen, dejando la zona de los ojos a la izquierda, se envió al fondo (desde el menú Disponer, Mover al fondo), se añadieron los textos del lado derecho (6) y las partes de la imagen que excedían del rectángulo base se ocultaron con rectángulos blancos. Como ClarisWorks tampoco dispone de opciones para exportar los fotogramas, sencillamente se capturaron (7) de la pantalla con Comando+mayúsculas+4. Los archivos resultantes son imágenes en formato PICT que quedan almacenados en el disco duro del Mac (8).

El tercer fotograma se realizó partiendo de una imagen de la cara de una mujer. Dadas las nulas capacidades de ClarisWorks para la importación de imágenes, la imagen se abrió con el programa PictureViewer (incluido en QuickTime y que puede leer una amplia variedad de formatos de imagen) y se copió su contenido (Comando+C) al portapapeles (4). Posteriormente sólo hace falta volver a ClarisWorks seleccionar la opción pegar desde el menú (o con Comando+P) para que la imagen aparezca en el documento (5).

Crear la secuencia en GifBuilder

---------------------------------------------

Abra la aplicación GifBuilder, cree un documento nuevo (File, New) e inserte los fotogramas con Comando+K o desde el menú File, Add Frame (1). Asigne el tamaño del banner desde el menú Options, Image size (2). En el ejemplo se escogió un tamaño de 460 x 60 píxeles por ser uno de los más extendidos en Internet. Una vez asignado el tamaño del banner, inserte los otros dos fotogramas de la misma forma que el primero. Haciendo clic sobre cada uno de los fotogramas en la ventana Frames (A) podrá irse situando en cada uno de ellos y colocarlos desde la ventana de vista previa (B) arrastrando con cuidado la imagen con el ratón. Para que la animación no parezca saltar es conveniente que realice este ajuste cuidadosamente y que la transición sea fluida.

Para definir el tiempo de pausa los fotogramas, selecciónelos en la ventana Frames y, desde el menú Options, Interframe Delay (3), asigne el tiempo de pausa que desee en centésimas de segundo. Puede especificar un tiempo de pausa distinto para cada fotograma selccionando sólo uno (en lugar de los tres) desde la ventana Frames. Para ver el aspecto de la animación pulse Comando+R para reproducirla y Comando+ punto para detenerla.

Para hacer más suave el paso de un fotograma a otro se añadió una transición desde el menú Effects, Transitions, Dissolve (4) y se le asignó tan sólo un paso de transición para no hacer demasiado grande el tamaño del archivo final. Tenga en cuenta que, por cada paso de transición, GifBuilder añadirá un fotograma que ocupará tanto como los originales.

Finalmente, solo queda asignar el número de veces que debe reproducirse la secuencia o, como en este caso, asignar que sea un bucle infinito. Seleccione Options, Loop (5) y asigne el número deseado. Guarde el archivo con la extensión .gif y su banner estará listo para ser integrado en una página web como si fuese una imagen estática en este formato.