Elementos gráficos para la Web
Oscar Gallego y Manuel Serrano (Universidad de Sevilla)

 


Introducción a la Infografía
Clasificación de elementos gráficos según su función
Clasificación de elementos gráficos según su estructura
Introduciendo imágenes
Generando imágenes
Aplicaciones Didácticas
Imágenes estáticas
GIF
JPG
Optimizar ficheros
PNG
Archivos de animación
Scripts y Java
Vídeos
VRML
360º
Flash, Shockwave
Actividades

 

Uno de los principios guía de la narración, especialmente en la cinematografía, es "muestre, no cuente" lo que quiere.

Se recuerda muchísimo mejor un concepto que se "ve" demostrado que si se oye o se lee una descripción con él.

Con la animación, se ponen a trabajar mucha más ppotencia cerebral e imaginación, por lo que aumenta espectacularmente la retentiva y comprensión de un reclamo por parte del usuario.

Las animaciones son un recurso muy útil para el diseñador de páginas web. Pero también son el signo más evidente de mal gusto en muchas, muchas páginas. No hay nada peor que castigar la vista de los visitantes con un montón de feas animaciones que poco o nada aportan a los contenidos. Si las utilizamos selectivamente, las animaciones pueden resolver muchas necesidades.

Hay dos formas principales de incorporar animaciones a las páginas web: los gif animados (la solución más extendida) y las películas de flash. También se pueden utilizar otros formatos multimedia, pero no se utilizan tan extensamente como estos dos. Un adelanto relativamente nuevo, que se ha sumado al rebaño de animaciones GIF y las películas QuickTime, es el tratamiento vectorial de gráfico, como el que utiliza FLASH de Macromedia

Los gráficos animados son un recurso cada vez mas utilizado a la hora de ilustrar, explicar y hacer mas amena una página de Internet o una presentación de trabajo. Si bien lo mas sencillo es copiar directamente un dibujo animado ya existente, tampoco resulta muy complicado realizar uno propio. Existen en el mercado distintas aplicaciones que permiten hacerlo sin demasiado esfuerzo.

Dar vida a una página

La mejor forma de captar la atención de potenciales clientes en una presentación o en una página web es mediante la inclusión de uno o varios gráficos animados.

No hay que olvidar, sin embargo, que ni el presentador mas competente ni los recursos audiovisuales mas atractivos pueden sustituir un núcleo informativo expuesto de manera clara y convincente. En cualquier caso, los gráficos constituyen un soporte audiovisual que se debe cuidar al máximo para redondear el conjunto de una exposición, y con el que se puede obtener además de resultados sorprendentes.

Crear una historieta

La gran ventaja de las herramientas de animación es que son mucho más sencillas de utilizar de lo que parece. No obstante, a menudo resulta complicado encontrar imágenes o dibujos que se ajusten a lo que se quiere presentar. Para buscarlas, se puede recurrir a archivos gráficos de Internet o en soporte papel (habrá que digitalizarlas con un escáner).

En caso de no hallar el material deseado, y siempre que se posean ciertas dotes artísticas, queda la opción de crearlo uno mismo. Así nos aseguramos de que nuestra animación será totalmente original.

Las imágenes de partida se pueden realizar y componer con cualquier programa de manejo de gráficos animados. Únicamente es necesario guardarlas en formato GIF. Es recomendable dar un nombre a cada una de las imágenes guardadas, así como un número que indique su posición en la secuencia animada .

Las aplicaciones permiten alterar el orden de los fotogramas, pero una clasificación previa ahorra tiempo y esfuerzo.

Cualquier conjunto de dibujos o imágenes es susceptible de ser ordenado convenientemente par crear una secuencia lógica . También pueden servir logotipos o imágenes de un libro o revista, previamente digitalizadas.

Prepara la secuencia

Una vez se tienen las imágenes es el momento de utilizar la aplicación que permitirá crear la secuencia animada. Existen para ello varios programas en el mercado. Uno de los más empleados es la aplicación GIF Animator de Microsoft. Esta aplicación está incluida dentro del programa del FrontPage, pero únicamente en la versión que se vende por separado. El precio del FrontPage 2003 suelto, que sirve para crear páginas web y publicar documentos en la Red, es de alrededor de 150 €.

El numero de opciones también es pequeño, si bien resulta suficiente y hace posible dominar el programa en poco tiempo. Tanto la aplicación GIF Animator como la Image Composer, que también se encuentra dentro de la versión separada de FrontPage, están en inglés, mientras que el resto de FrontPage se encuentra traducido al castellano.

Trucos para la creación de animaciones GIF.

Un gif animado se puede preparar con un programa dedicado (GIF Construction Set, Ulead Gif animator, Animagic ) o bien utilizar la capacidad de exportar animaciones de otros programas más generales de creación y manipulación de imágenes, tales como Xara, Fireworks, Imageready. Crear el gif animado implica una preparación previa tan importante o más que la creación de los fotogramas de la animación. Debemos considerar qué partes del objeto se mueven y cuáles se mantienen fijas, y dibujar el número mínimo de frames para que la animación sea compacta pero convincente. La mayoría de animaciones que se crean, de todos modos, no son animación de movimiento, sino al estilo de los banners publicitarios de muchas páginas. Es una manera de exponer más información en la misma área de la pantalla. Podemos enlazar, por ejemplo, una serie de lemas uno tras otro, para que aparezcan gradualmente.

 

 

En este gráfico vemos los principales controles que ofrece un típico programa de construcción de animaciones gif.

Con cualquier aplicación de las comentadas, no resulta nada complicado crear la animación. Sólo deben prepararse las imágenes individuales. Las partes invariables pueden copiarse de un fotograma al siguiente; se indica el tiempo que se ha de mostrar cada uno, normalmente en milisegundos, y se decide si se repetirá toda la animación, un número finito de veces o indefinidamente. El tamaño final del GIF puede ser considerable si hay muchas imágenes, con muchos colores diferentes y formas complejas. Para reducir algo el tamaño de la animación, puede intentarse aplicar una paleta común a toda la serie de imágenes. El ejemplo que mostramos, algo más arriba, es un ejemplo gif animado aprovechando las posibilidades del formato: nuestro simpático charlatán apenas tiene 5k de tamaño de fichero.

Flash

La limitación de gif, jpg i png es que son ficheros de mapa de bits, con una resolución fija. No es posible cambiar el grado de ampliación de la imagen dentro del navegador, y si lo hacemos, inevitablemente perdemos calidad. La solución en este caso sería utilizar un formato vectorial, pero los navegadores no lo han permitido hasta hace relativamente poco. Se han intentado diferentes propuestas, entre ellas una muy interesante de Xara (el formato .web), pero han fracasado. A falta de un estándar oficial, se ha impuesto un formato cada vez más difundido: Flash.

Si se quieren incluir imágenes en las que se pueda ampliar (zoom) para ver los detalles, que incluyan interactividad (menús desplegables, enlaces...) y sonido, debe considerarse el formato flash (o Shockwave Flash) . Con los navegadores en las versiones 4 - 5, no hay ningún problema, puesto que incorporan el plugin necesario, que de todos modos es gratis: puede bajarse muy rápidamente de la web de Macromedia (http://www.macromedia.com). Ciertamente, Flash es más que un formato de vector, y más que un formato de animación: se usa más para animaciones interactivas, una especie de “películas” que para ilustraciones estáticas (si bien muchos de nuestros ejemplos están más bien en esta última categoría.)

Cuándo usar Flash

Dadas las especiales características de Flash, no vale la pena si sólo queremos crear un pequeño banner con animación; supondría una inversión de mucho tiempo para aprender la forma en que trabaja el programa. De todos modos, Flash lleva un sistema de ayuda muy completo y fácil de entender y no resulta difícil manejarlo correctamente. Para determinados efectos, es rápido y cómodo, mucho más conveniente que la alternativa de un gif estático o animado:

- Animaciones con mucho movimiento de unos pocos símbolos: por ejemplo, unos engranajes. Flash resuelve la animación con mucha más facilidad, calidad y con un tamaño pequeño. El ejemplo que acompaña estas líneas tiene unos 5k, tamaño muy pequeño en comparación con el que exigiría un gif.
Además, crear este tipo de movimientos en flash es muy fácil y con un gif sería extremadamente complicado y laborioso.

- Para animaciones a gran escala. El tamaño en Flash no tiene importancia (salvo que se incluyan también bitmaps en la película), por lo que pueden resolver animaciones a pantalla completa o para áreas extensas, situación en la que un gif animado sería poco práctico.

- Para logotipos que se van definiendo cada vez más, de forma gradual, a partir de una imagen inicial muy tenue; este efecto se puede hacer tan complejo como se quiera y el fichero final puede ser increíblemente pequeño. Con un GIF resultaría un enorme tamaño.

- Si queremos mostrar una imagen ampliable para ver detalles, por ejemplo, un catálogo de imágenes vectoriales o fuentes, un mapa...

El inconveniente principal que presenta Flash, que alguno debería tener, es la exigencia de un plugin específico para ver estas imágenes. No es ningún problema grave: ya viene incluido en las últimas versiones de los navegadores y si es necesario se puede descargar libremente de Macromedia, sin que tarde mucho, ya que el reproductor de flash es relativamente pequeño. El mismo navegador detecta si existe una nueva versión y procede a preparar la actualización si nosotros lo autorizamos así.



subir