Tecnología

Inicio

Cómo crear interactivo Rollover Botones en ImageReady

Al actualizar de Photoshop CS2 a CS3, no tirar la versión antigua todavía. CS3 elimina la posibilidad de realizar vuelcos verdaderamente interactivos en sus páginas web. Se puede construir los vuelcos interactivos con Dreamweaver, o pony para los fuegos artificiales, o puede enviar archivos de nuevo en Photoshop CS2 y construirlos en cuestión de minutos con ImageReady.

Instrucciones

1 Abra su imagen en Photoshop. Construir el fondo, formas de los botones, las fronteras y el texto en diferentes capas. Mover los elementos que nunca cambian a un grupo de capa denominada "estática" y los elementos a cambiar cuando el cursor pasa por encima de un grupo de capas llamado "normal". Estos elementos pueden incluir la forma del botón, botón o el color del texto.

2 Duplicar la capa de grupo "normal" y el nombre de "rollover". Realizar ningún cambio en los elementos del botón para indicar el cursor del ratón ha rodado sobre el botón (los efectos de conversión no tienen que estar en la misma área de la imagen que el botón). Ocultar el grupo de capas "rollover".

3 Hacer un segmento independiente para cada botón. Haga doble clic en cada rebanada con la herramienta de selección de sector para abrir la ventana "Opciones de sector". Nombre del botón y escriba la URL del botón.

4 Guarde el archivo y moverlo a ImageReady. Seleccione la primera división de botón y haga clic en el botón "Crear estado de rollover" en la parte inferior de la paleta "Contenido Web". Un nuevo estado de rollover llamado "Over" aparecerá en la paleta.

5 Seleccione la vista previa de estado de rollover en la paleta "Contenido Web". Abrir la paleta de capas. Ocultar el grupo de capas "Normal" y mostrar el grupo de capas "rollover".

6 Repita este procedimiento para las otras rebanadas de botón. Tendrá que mostrar el grupo de capas "Rollover" para cada estado de rollover.

7 Haga clic en la "Vista previa en el explorador" para previsualizar el documento y vuelva a comprobar sus efectos de conversión. Seleccione la opción "Guardar optimizada como" en el menú Archivo. Guardar como HTML y las imágenes para con los "cortes" Todos los seleccionados. LmageReady generará la página web y todo el código necesario para hacer el trabajo vuelcos.

Consejos y advertencias

  • Abrir archivos CS3 en versiones anteriores de Photoshop e ImageReady, pero la aplicación más antigua se aplanan cualquier efecto desarrollados en aplicaciones posteriores. Controlar lo que ocurre mediante el aplanamiento de las capas individuales y guardar una copia de su archivo de trabajo.
  • Cortar la imagen en Photoshop o ImageReady; las herramientas de trabajo más o menos lo mismo.