Un botón de rollover es un botón en la página web que cambia su estado cuando se pasa el ratón sobre él. El cambio de estado puede ser cualquier número de cambios incluyendo el color , la fuente, el tamaño o una combinación de éstos . Botones Rollover agregan brillo y profesionalismo a su sitio web y se pueden crear fácilmente en Adobe Photoshop e ImageReady . Estos detalles los pasos de cómo crear un sencillo botón de rollover , pero el proceso puede ser alterado para gráficos más estilizados. Cosas que necesitará hotel Adobe Photoshop
ImageReady
Mostrar más instrucciones
crear el botón Imágenes en Photoshop
1
Vaya a Archivo > Nuevo y establecer el tamaño de la imagen de 80 por 25 píxeles con una resolución de 72 píxeles por pulgada.
2 Haga clic en la muestra de color de primer plano en la parte inferior de la paleta de herramientas en la parte derecha de la pantalla. Seleccione un color para el texto en el botón. A continuación, haga clic en la muestra de fondo y seleccione un color.
3
Press " " Control + Retroceso para rellenar el área de la imagen con el color de fondo elegido.
4
Seleccione la función " Tipo " de la paleta de herramientas , y establecer el tipo de letra y tamaño en el menú de herramientas en la parte superior de la pantalla. Haga clic en el área del documento y escriba el nombre del botón , como " Portfolio " o "Home ".
5
Utilice la herramienta "Mover" para alinear el texto a su gusto.
< Br > 6
Copia tanto el fondo como capa de texto. Crear una copia de una capa haciendo clic derecho sobre una capa en la paleta de capas y seleccionando "Duplicar ".
7
Combinar el fondo original y las capas de texto manteniendo pulsada la tecla "Shift " mientras hace clic en los dos capas en la paleta de capas . A continuación, vaya a Editar> Combinar capas . Cambiar el nombre de la capa " Estado normal ".
8
Haga doble clic en la imagen " T" a la izquierda de la capa de texto copiado para resaltar el texto . Haga clic en la muestra de color en el menú de herramientas en la parte superior de la pantalla, y seleccione un color diferente para el texto cuando se pasa el ratón por encima del botón.
9
Cambiar el color de la capa de fondo , si desea.
10
Combinar las dos capas copiados , y cambiar el nombre de la capa " estado de rollover . " El archivo debería contener dos capas: la capa " Normal del Estado " en la parte inferior y la capa de " Rollover Estado " en la parte superior. Usted puede ver el aspecto que tendrá el cambio botón girando la visibilidad de la capa superior y se apaga. Haz clic en el ojo gráfico a la izquierda de la capa para mostrar u ocultar.
Crear botón de rollover en ImageReady
11
Haga clic en " Cambiar a ImageReady " botón . en la parte inferior de la paleta de herramientas con el archivo de botón sigue abierta
12
Ir a la paleta de apariencia ( en CS o posterior) o en la paleta de vuelco ( en versiones anteriores ), si no es abierta, vaya al menú Ventana y seleccione la paleta en el menú desplegable
13
Ocultar la capa " Rollover Estado " , . esto hará que el estado normal del botón de la "Normal" capa.
14
clic en "Crear Nuevo Estado" icono en la parte inferior de la " apariencia " o paleta " Rollover " . Encienda la visibilidad en la capa " Estado Rollover " para establecerlo como el estado de rollover
15
Ir a la paleta Sector ; . Si no está ya abierto , se puede encontrar en la ventana menú . Asignar una URL a su botón de rollover , esta es la página web que el usuario será llevado a cuando se hace clic en el botón
16
Pruebe su botón de rollover haciendo clic en " Ver en Navegador por omisión en el " botón. cerca de la parte inferior de la paleta de herramientas.
17
Ir a Archivo > Guardar optimizada para guardar el archivo HTML y la carpeta de imágenes .
