Photoshop CS2

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 Programas → Adobe 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.

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

• Sobre: este estado se activa cuando el puntero del ratón se sitúa encima del gráfico en cuestión.




• Clic: se activa en el instante en el que hacemos clic con el ratón sobre el gráfico.




• Abajo: se activa cuando tenemos el botón del ratón pulsado sobre el gráfico. Ten en cuenta que el estado Clic y Abajo son diferentes.




• Arriba: este estado se activa cuando, después de haber hecho clic sobre una imagen, se suelta el botón del ratón. Ten cuidado con este estado, pues mientras los anteriores con eventuales (sólo modifican el gráfico durante el tiempo en el que se produce el evento), éste modifica el estado natural de la imagen permanentemente una vez se haya hecho clic sobre ella.




• Fuera: se activa después de haber pasado el puntero del ratón sobre el gráfico. Igual que el evento anterior, éste se produce después de otro evento, por lo que se mantendrá activo permanentemente a partir del momento en el que pases el ratón sobre la imagen.

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 Archivo→Nuevo.

Los siguientes pasos son muy sencillos, desde la ventana Contenido de Web pulsaremos el botón 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.

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 , 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:

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.

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.

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 Archivo→Guardar 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.

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.

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

 Cursos Informática Gratuitos