Download Imágenes dinámicas e interactivas

Imágenes dinámicas e interactivas
Internet es hoy en día el escaparate y entorno comunicador por
excelencia, y la imagen fotográfica, uno de sus principales
ingredientes. En este medio, la imagen es en muchos casos algo vivo
que interactúa con el espectador. Crear hipervínculos, animaciones y
otros efectos está al alcance de quienquiera que maneje programas de
retoque
fotográfico.
Por
Paulo
Porta
Es posible que muchos de quienes nos centramos en la
fotografía veamos las imágenes interactivas como algo
diferente, más sofisticado y artificioso. Pero no deja de ser
una faceta de la imagen digital, que puede aportar
creatividad y, sobre todo, dinamismo a la hora de emitir
mensajes apoyados en la imagen.
Animaciones
Una animación es un conjunto de imágenes estáticas que se reproducen
cíclicamente. Crear un archivo GIF animado es realmente sencillo, con una
aplicación específica como Ulead Gif Animator o con programas de tratamiento
general, como Photoshop o el popular Gimp.
En Photoshop, basta con superponer dos o más imágenes en capas o incluso
duplicar un mismo motivo, aplicando en cada capa alguna modificación: un
desplazamiento, un escalado, un cambio de color o de opacidad, un
desenfoque o cualquiera de los abundantes filtros disponibles.
A continuación, se abre la paleta Animación, que ya incluye el programa y
que está disponible en ImageReady en versiones antiguas. En la parte derecha
se encuentra un pequeño triángulo que despliega diferentes comandos, entre
ellos Crear cuadros a partir de capas.
Cada capa da lugar a un cuadro o fotograma. Se puede reordenar, duplicar,
eliminar y también establecer la duración de cada uno. Finalmente, la
animación se puede exportar con el comando Guardar para web, en formato
GIF o PNG.
El GIF está limitado a 8 bits. El PNG, por su parte, tiene la ventaja de guardar
imágenes en color de 24 bits, pero ya hemos comentado que Internet Explorer
suele interpretar mal sus zonas transparentes.
Nuestro primer ejemplo es un GIF animado con dos fotogramas, en uno de los
cuales la capa está oculta:
La paleta Animación, con los fotogramas y la duración asignada a cada uno.
En este otro caso, realizamos una selección elíptica y la giramos con el
comando Transformar selección del menú Selección, hasta seis veces en 30
grados. Tras cada giro, copiamos parte de la capa de fondo y la pegamos como
capa nueva. Después de crear los fotogramas por capas, se elimina el
fotograma de la capa de fondo, que muestra la imagen completa:
Los seis fotogramas en la paleta Animación.
En las capas para la siguiente animación, se aplica a un objeto circular unos
simples escalados verticales y horizontales con el comando Transformación
libre:
En esta última muestra, se superponen fotografías diferentes. De cada una se
hacen otras dos capas duplicadas y desplazadas a la izquierda. Tras crear los
cuadros a partir de las nueve capas, tenemos que situarnos en cada fotograma
desplazado para activar la visibilidad de la capa que contiene la foto anterior a
cubrir:
Imágenes de sustitución
Al componer páginas web, se puede asignar a una imagen un vínculo para
acceder a otra página o a otro lugar de la misma pulsando sobre ella. Una
forma frecuente de mostrar al lector que esa imagen contiene el vínculo es
hacer que ésta reaccione al paso del cursor.
En este ejemplo, hay en realidad dos imágenes de igual tamaño en píxeles. Al
pasar el cursor por encima, una de las fotos es automáticamente reemplazada
por la otra. Se puede hacer con el comando Imagen de sustitución de
Dreamweaver, simplemente indicándole dónde están las dos versiones.
Aquí se ha hecho realmente desde la paleta Comportamientos, con el
comando Intercambiar imagen y la opción OnMouseOver (traducible por
"con el ratón encima"), que permite hacerlo sin que la imagen contenga
obligatoriamente un vínculo:
Al pasar el cursor sobre la imagen, descubrimos los efectos del comando
Intercambiar imagen.
Efectos "rollover" y sectores
Otras dos opciones interesantes son los efectos "rollover" y los sectores. Los
estados de "rollover" hacen que la imagen pueda responder según lo que
hagamos con el cursor: pasar por encima, dejar de pasar, hacer clic o doble
clic… Los sectores, por su parte, permiten hacer una división en la imagen, de
manera que cada una de las zonas -o solamente alguna de ellas- responda al
cursor.
La siguiente imagen ha sido dividida en cuatro zonas con la herramienta
Sector del Photoshop, y más concretamente con el botón Dividir de la barra
Opciones.
En ImageReady, se ha asignado a cada sector dos estados de "rollover": uno
para mostrar la versión en color cuando el cursor pasa por encima, y otro para
mostrar la versión invertida mientras el cursor está pulsado:
Para esto, ha sido necesario, en primer lugar, que la imagen tuviese tres
capas: una primera en grises, la segunda en color y la tercera invertida. Estas
dos últimas permanecen ocultas:
Después, la imagen se divide en sectores -como ya se ha explicado- y se abre
en ImageReady:
Seleccionando un sector (1, en la siguiente imagen), se crean estados de
"rollover" con el penúltimo icono de la paleta Contenido de Web (2).
Haciendo doble clic en el nombre del estado (3) determinamos a qué acción del
cursor se responde. Situándonos en cada estado, hemos activado la visibilidad
de la capa que queríamos.
En CorelDRAW y PhotoPaint, se asignan estados "rollover" a objetos con los
comandos de la ventana acoplable Objetos cambiantes, sin necesidad de
definir sectores.
Mapas de imágenes
Para concluir esta pequeña introducción, cabe hacer mención de la opción
Mapas de imágenes, que permite asignar un vínculo a una zona irregular de
la imagen, mientras que un sector siempre es rectangular.
Se pueden definir áreas, por ejemplo, a partir del contenido de una capa. Sin
embargo, no se les puede asociar comportamientos "rollover", si no es
transformándolas en sectores rectangulares.
Paulo Porta