Unidad 14. Gráficos para la Web (I)


En este tema veremos un programa complementario que se instala con Photoshop: ImageReady.

ImageReady está diseñado específicamente para crear gráficos para su uso en páginas web. Puede optimizar al máximo la relación calidad/tamaño del archivo y posee herramientas orientadas directamente a la publicación web.

Nosotros no profundizaremos totalmente en el uso del programa, pero veremos unas cuantas funciones que nos serán muy útiles a la hora de crear imágenes y gráficos destinados a la web.

Podemos abrir el programa desde el menú Inicio Todos los ProgramasAdobe ImageReady CS 2, aunque también existe un acceso directo desde el propio Photoshop.

Pulsando en cualquier momento el botón situado al pie del Panel de Herramientas exportaremos la imagen con la que estemos trabajando a ImageReady.


Botón Exportar a ImageReady



Rollovers

Los Rollovers o Botones son gráficos con comportamiento interactivo. Puedes crear diferentes imágenes y hacer que se muestren dependiendo de diferentes eventos:



Otra de las observaciones que deberíamos realizar es que los Rollovers no se tratan únicamente de una imagen, sino que son una combinación de DHTML (javascript + HTML) y diversas imágenes. En las que el código evalúa los eventos realizados sobre el gráfico y muestra las imágenes almacenadas.

De todas formas no debemos preocuparnos, pues ImageReady puede crear el código y las imágenes al guardar el archivo para que el usuario final no tenga que esforzarse en crear ningún tipo de código.

Pero vayamos al caso práctico: cómo crear un Rollover desde ImageReady.

Lo primero que deberemos hacer será crear un nuevo documento en blanco (o importar desde Photoshop un gráfico con el que estemos trabajando, o incluso abrir una imagen ya existente en nuestro disco duro).

Para abrir un documento en blanco selecciona el comando ArchivoNuevo.

Los siguientes pasos son muy sencillos, desde la ventana Contenido de Web pulsaremos el botón Crear estado de Rollover Crear estado de rollover. Por defecto el primer estado que se creará será el de Sobre, pero podemos modificar esto haciendo doble clic sobre el nombre del estado para acceder al cuadro de diálogo Opciones de estado de rollover.


Cuadro de diálogo de Opciones de estado de rollover

Desde aquí podremos seleccionar el estado al que obedecerá la imagen que creemos.


Una vez hayamos incluido todos los estados necesarios pulsando el botón Crear estado de rollover, podremos empezar a crear las imágenes para cada uno de ellos.

En este momento tu ventana Contenido de Web tendrá un aspecto parecido a este:


Ventana Contenido Web

La primera miniatura en el marco de Sectores indica el estado natural del Rollover, la imagen que configuremos aquí será la que se muestre mientras no ocurra ningún evento sobre el gráfico.

Es resto de miniaturas mostrarán la imagen que tomará el gráfico según el evento que se realice sobre él.

Ahora, la forma en la que modificaremos la imagen para cada uno de los estados será la siguiente: ImageReady recordará para cada estado la posición, visibilidad y propiedades de cada uno de ellos, por lo que lo único que deberemos hacer será crear tantas capas como nos sean necesarias y modificarlas a nuestro gusto dependiendo del estado sobre el que estemos trabajando.



bola verde Para ver con mayor claridad cómo crear un gráfico Rollover haz el Ejercicio Creación de Rollovers.



Puedes añadirle un vínculo web a tu Rollover rellenando los campos de la ventana Sector.


Ventana Sector

Deberás introducir en la caja de texto URL la dirección a la que apuntará el vínculo del Rollover.

Una vez hayas creado el gráfico deberás guardarlo. ImageReady te permite dos formas diferentes de guardar tus archivos. Mediante la opción ArchivoGuardar crearás un archivo de trabajo PSD, al que podrás acceder más tarde si quieres para realiza cualquier cambio sobre él.

En cambio, si lo que deseas es crear el archivo final, deberás seleccionar la opción Archivo Guardar optimizada.


Guardar Optimizada en Archivo

Desde este cuadro de diálogo elegirás la carpeta donde quieras guardar el archivo y podrás escoger el tipo de salida que quieras para tu Rollover.

Desde el menú desplegable Tipo podrás decidir si quieres crear únicamente los archivos de imagen (uno para cada estado que hayas creado) o que el programa cree también el archivo HTML que contendrá el código que manejará los eventos sobre el gráfico.


Desplegable Tipo en Guardar optimizada

En este caso, ImageReady creará un archivo HTML y una carpeta que contendrá las diferentes imágenes correspondientes a los diferentes estados del Rollover.






       
Octubre - 2006.


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.