ubiquitour.com

Cómo crear un botón Rollover en CS2

Cómo crear un botón Rollover en CS2

Adobe Photoshop CS2 y su compañero ImageReady son poderosas herramientas para los usuarios que quieran tomar una aproximación visual al diseño Web. Los usuarios pueden crear rollovers JavaScript sin tener que introducir ningún código combinando las capacidades de diseño gráfico de Photoshop y el comportamiento de ajuste de funciones de ImageReady. La clave del éxito rollovers se encuentra en capas de comprensión en Photoshop.

Instrucciones

Crear tu botón

1 Abra Photoshop y cree un nuevo documento seleccionando "Archivo > nuevo" en el menú de la aplicación. Establecer el tamaño del documento y haga clic en "Aceptar".

2 Seleccione la "herramienta de texto" desde el Panel de herramientas a la izquierda de tu lienzo y haga clic en cualquier lugar en el lienzo para crear algunos punto de texto para el botón ("sobre" o "portafolio", por ejemplo). Configuración de la fuente deseada en el Panel de opciones de la herramienta por encima de su lienzo y tipo hacia fuera el texto del botón. Puede mover este texto moviendo el cursor lejos del texto haciendo clic y arrastrando en la dirección que desea mover.

3 Duplicar la capa de texto haciendo clic y arrastrando hasta el icono "Crear nueva capa" en la paleta de "Capas" a la derecha de tu lienzo. El icono parece una página doblada, cuadrada.

4 Seleccione la "copia" de la capa que acabamos de crear y haga clic derecho (Ctrl+clic en Mac) en el título de la capa en la paleta de "Capas". Seleccione "Opciones de fusión" en el menú desplegable resultante. Se abrirá un cuadro de diálogo "Estilo de capa".

5 Haga clic en la palabra "Sombra" en la columna de "Estilos" a la izquierda del cuadro de diálogo. Haga clic en la casilla "Vista previa" a la derecha del cuadro de diálogo y ajuste la configuración de la sombra como se desee.

Ajuste de efectos de rollover en ImageReady

6 Seleccione el icono de ImageReady en la parte inferior del Panel herramientas. Esto lanza un programa de Photoshop que viene con él para optimizar imágenes de Photoshop para la Web.

7 Seleccione la "Slice herramienta" desde el Panel de herramientas a la izquierda de la pantalla y haga clic en y arrastre un segmento alrededor de su botón de la parte superior izquierda a la inferior derecha.

8 Seleccione la paleta "Web Content" a la derecha de la pantalla y haga clic en el botón.

9 Mueva el ratón hasta la paleta de "Capas", donde se muestran las diferentes capas del botón. Haga clic en el icono de ojo junto a la capa superior, que contiene la sombra del botón. Esto desactiva la visibilidad de esa capa para que solo la versión sin sombra del botón aparece en su página Web cuando el ratón no se cierne sobre él.

10 Volver a la paleta "Web Content" y haga clic en el icono de página doblada en la parte inferior para crear un nuevo estado de rollover. La palabra "sobre" aparecerá al lado del nuevo estado, lo que significa que la apariencia que se selecciona para se mostrará cuando el ratón se cierne sobre él en su página Web.

11 Volver a la paleta de "Capas" y desactivar la visibilidad de la capa de sombra no haciendo clic en el icono de ojo a la izquierda. Activar la visibilidad de la capa de sombra de la gota.

Vincular su Rollover

12 Seleccione "Ventana > Slice" para mostrar la paleta de "Slice" a la derecha de la pantalla. Seleccione esta paleta.

13 Introduzca un nombre para el botón en el campo "Nombre" e introduzca una dirección URL para el rollover vincular a cuando la gente haga clic en él.

14 Seleccione "Archivo > Guardar optimizada como" en el menú de la aplicación y crear un nombre para su conversión. Seleccione "HTML y las imágenes" en el menú desplegable "Format" y haga clic en "Guardar".