En colaboración con

Iniciar Registrarse 

[TUTORIAL] Crear un elemento rollover mediante el ImageReady

Responder >>

 
Herramientas

mugan86 Guest
n/a 0 0
  #1  
Hace 6 años
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):


[youtube=zkD-BHyhZNM]video[/youtube]

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

A twisted le ha gustado este post
twisted Vida Foril
2,263 1510 19,275 139
PSN: twistedmetal83 
23 124 427 1435
  #2  
Hace 6 años
gracias como siempre por tus tutos que vienen muy bien; aunque ahora con el Photoshop solo ya voy empanao ; por cierto para que sirve exactamente un Rollover? Saludos.
mugan86 Guest
n/a 0 0
  #3  
Hace 6 años
Cita:
Iniciado por twistedmetal83 Ver Mensaje
gracias como siempre por tus tutos que vienen muy bien; aunque ahora con el Photoshop solo ya voy empanao ; por cierto para que sirve exactamente un Rollover? Saludos.
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.
A twisted le ha gustado este post
twisted Vida Foril
2,263 1510 19,275 139
PSN: twistedmetal83 
23 124 427 1435
  #4  
Hace 6 años
haaa ok, no tenía ni idea, tu sigue colgando todo lo que sepas que son bienvenidos siempre .
mugan86 Guest
n/a 0 0
  #5  
Hace 6 años
Cita:
Iniciado por twistedmetal83 Ver Mensaje
haaa ok, no tenía ni idea, tu sigue colgando todo lo que sepas que son bienvenidos siempre .
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

Un saludo
 
Ir al Foro


Subir

Amigos: PS3 | Gamewise | PSNow | © LaPS4.com 2006 - 2014 .Bienvenido a la revista lider de videojuegos de PS4