[TUTORIAL] Crear un elemento rollover mediante el ImageReady

Abrimos Image Ready y creamos un archivo nuevo de 200 px X 200 px con el fondo blanco.

Creamos una nueva capa (CONTROL+MAYUS+N) y pulsamos OK.

Ahora dibujamos con la herramienta MARCO ELIPTICO (M) un círculo, y lo rellenamos con el BOTE DE PINTURA (G) de un color [en este caso lo he hecho de rojo].



El siguiente paso será crear una nueva capa, y rellenar el círculo que habíamos hecho de otro color [en este caso azul].



Ahora, vamos a VENTANA --> CONTENIDO WEB, y nos saldrá una nueva ventana.
Vamos a seleccionar la herramienta SECTOR (K) y vamos ha hacer un recuadro alrededor de el círculo.



Ahora vemos que en la ventana de CONTENIDO WEB que hemos sacado antes ha aparecido una nueva imagen, la última que hemos hecho, pues pulsamos con el botón derecho sobre la imagen y despues le damos a AÑADIR ESTADO DE ROLLOVER.



Por último, vamos a quitarle el OJO que sale al lado de la última capa que hemos creado para que cuando pongamos el cursor encima de el circulo se vea la capa roja.



Solo falta guardarlo.

Archivo --> Guardar optimizada como..., le ponemos un nombre y ya está listo

Así de fácil se hace este efecto, que en menos de 2 min lo puedes hacer.

Podeis modificar el estado de el rollover, si dais botón derecho sobre la imagen que nos sale después de darle a AÑADIR ESTADO DE ROLLOVER, podeis canviar el estado, que por defecto es SOBRE, que quiere decir que cuando pongas el cursor SOBRE la imagen, se substituya por la imagen que hay despues de la que hayamos quitado el OJO

Si quereís, os dejo el resultado aquí para que lo veaís.

Resultado: Rollover en imageready

VIDEOTUTORIAL (Para ver como se hace de manera visual):


Por si lo quereís ver en una calidad mucho mejor, solo ocupa 22 mb:http://www.badongo.com/vid/789666

gracias como siempre por tus tutos que vienen muy bien; aunque ahora con el Photoshop solo ya voy empanao :buf:; por cierto para que sirve exactamente un Rollover? :cunao: Saludos.

twistedmetal83 dijo:

gracias como siempre por tus tutos que vienen muy bien; aunque ahora con el Photoshop solo ya voy empanao :buf:; por cierto para que sirve exactamente un Rollover? :cunao: Saludos.

Haga clic para ampliar...

Por ejemplo, para hacer botones interactivos de un menú para uina página web.Por ejemplo, cuando el cursor no está encima, igual esta verde, pero cuando vas encima de ese botón cambia, a azul. Sin más, es una tonteria pero lo he puesto como curiosidad ya que es muy básico y no es muy dificil completarlo.

haaa ok, no tenía ni idea, tu sigue colgando todo lo que sepas que son bienvenidos siempre .

twistedmetal83 dijo:

haaa ok, no tenía ni idea, tu sigue colgando todo lo que sepas que son bienvenidos siempre .

Haga clic para ampliar...

Yo lo suelo colgar cuando yo aprendo a hacerlo, porque colgarlo sin probarlo no tiene lógica. Además para demostrar que lo he hecho siempre intento meter un videotutorial como una pequeña referencia para que el que lo esté haciendo se oriente mejor, y si lo quiere que se vea perfecto, tambié cuelgo el archivo original que intento que no pese mucho entre 12-30 mb según el tiempo del video. Además yo lo hago con mucho gusto, siempre que vea que hay usuarios interesados en estos temas. Si no veo interés me lo hago para mí y ni lo posteo:trofeo:

Un saludo