Rollover

En este tutorial les voy a enseñar como crear un Rollover en Imageready, es algo que aprendi hasta hace poco, y es muy util para todo diseñador web, ya que le da mas vida a todas nuestras plantillas.

Lo primero que vamos a hacer es escoger el diseño al cual le vamos a querer dar el rollover. Yo estare utilizando este boton que hice en Adobe Photoshop.

Tutoriales Photoshop

Ahora nos vamos a Edit in ImageReady (Shift+Ctrl+M)

Tutoriales Photoshop

Una vez abierto el Imageready y con tu boton ahi, duplica la capa del boton y le cambias el color al texto para que se note el rollover.

Nota: Puedes hacer cualquier efecto que quieras, cambiar el color al texto, al boton, que se difumine el boton, lo que quieras...

Tutoriales Photoshop

Ahora agarra el Slice Tool (K) Tutoriales Photoshop y has una seleccion del boton entero.

Tutoriales Photoshop

Ahora en Web Content vamos a buscar el boton con el slice y le vamos a dar Add Rollover State

Tutoriales Photoshop

Hecho esto vas a ver que se agrega un simbolo al recorte que hisimos con el Slice Tool.

Tutoriales Photoshop

Ahora esconde la capa de texto que agreaste. Es decir la ultima capa.

Tutoriales Photoshop

Listo hemos terminado. Ahora te vas a Save Optimized As

Resultado:
http://www.zonaphotoshop.com/tutoriales/rollover/Rollover.html

Info

Autor: Enrique Gutierrez Barrios
Fecha: 24-6-2006
Hits: 3600
Tags: web  diseño  photoshop  imageready  animacion  rol  

Foro de Photoshop


+Tutoriales

Galeria de Fotos Leaf Logo