|
|
 |
|
|
|
|
|
|
Tutoriales |
|
|
|
|
|
Crear un titular Web con efectos de rollover |
|
|
|
|
|
|
La clave para trabajar con rollovers consiste en saber organizarse antes de comenzar. A continuación, le enseñaremos una manera de organizar capas en Adobe® Photoshop® 7.0 y Adobe ImageReady® 7.0 para crear un titular Web con efectos de rollover primarios y secundarios. Lea este documento y defina su titular sobre la marcha.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Componga el titular.
En Photoshop, cree una imagen para el cuerpo del titular. A continuación, utilice la herramienta Rectángulo para crear botones de navegación y añadir texto al botón con la herramienta Texto. Cuando haya compuesto el titular, haga clic en el botón Crear conjunto nuevo en la paleta Capas y arrastre todas las capas del el titular al conjunto de capas. Es fundamental colocar cada elemento del titular en una capa diferente para poder crear efectos de rollover. Nuestra imagen tiene cuatro capas de forma (una para cada botón), cuatro capas de texto y una capa de imagen. |
| |
|
| |
|
|
|
2. Cree ilustraciones para estados de rollover.
Comience creando un conjunto de capas nuevo para cada botón del titular. A continuación, duplique cada capa de botón y de texto del conjunto de capas original y arrastre las capas duplicadas a los conjuntos de capas correspondientes. Haga doble clic en la miniatura de la capa para cada capa de botón duplicada y elija un nuevo color de botón. Este color aparece cuando un usuario coloca el ratón sobre el botón del titular. Este efecto se denomina efecto primario, ya que se produce en el área del botón. Para cada botón, cree una imagen diferente para el cuerpo del titular. Arrastre la imagen al conjunto de capas que corresponda al botón. La imagen aparece cuando el usuario hace clic en el botón del titular. Este efecto se denomina efecto secundario, ya que se produce fuera del área del botón, |
| |
|
| |
|
|
|
3. Vaya a ImageReady.
Antes de ir a ImageReady, desactive la visibilidad de la capa para cada conjunto de capas nuevo. (Sólo las capas del conjunto de capas original deben ser visibles en la ventana de documento.) A continuación, haga clic en el botón Ir a ImageReady en el cuadro de herramientas. |
| |
|
| |
|
|
|
4. Cree un rollover basado en capas.
En ImageReady, seleccione una de las capas de botón del conjunto de capas original. A continuación, haga clic en el botón Crear rollover a partir de las capas de la paleta Rollovers. (Seleccione Ventana > Rollovers si no se muestra la paleta Rollovers.) Al hacer clic en el botón Crear rollover a partir de las capas, ImageReady crea automáticamente un sector a partir de la capa. Es entonces cuando añade un estado Sobre, que aparece debajo del nombre del sector en la paleta Rollovers. |
| |
|
| |
|
|
|
5. Añada un efecto de rollover primario.
A continuación, utilizará las capas que creó en el paso 2. Con el estado Sobre seleccionado en la paleta Rollovers, active la visibilidad para el conjunto de capas que corresponda al botón. El botón cambia los colores en la ventana de documento. Desactive la visibilidad para la capa que contiene la imagen para el cuerpo del titular. Utilizará esta capa en el siguiente paso. Tenga en cuenta que no fue necesario desactivar la visibilidad para el botón Historia original debido a que se encuentra en la parte inferior del orden de apilamiento en la paleta Capas. |
| |
|
| |
|
|
|
6. Añada un efecto de rollover secundario.
Haga clic en el botón Crear estado de rollover de la paleta Rollovers. El estado Abajo aparece debajo del estado Sobre en la paleta Rollovers. Con el estado Abajo seleccionado, active la visibilidad para la capa que contenga la imagen para el cuerpo del titular. A continuación, repita los pasos 4 a 6 para el resto de los botones del titular. Debido a que creó primero los conjuntos de capas, resulta sencillo crear rollovers adicionales. |
| |
|
| |
|
|
|
7. Previsualice el titular.
¿Desea ver los rollovers en funcionamiento? Haga clic en el botón Previsualizar documento en el cuadro de herramientas y mueva el puntero sobre un botón. A continuación, haga clic en el botón. Cuando termine de previsualizar el titular, vuelva a hacer clic en el botón Previsualizar documento para volver al modo de edición. |
| |
|
| |
|
|
|
|
|
|
|
|
|
2002 Adobe Systems Incorporated. Reservados todos los derechos. |
|
|
|
|
