próximo »

[[ZP] Enrique GutBarr]

Photoshop Tutorial: Rollover
Autor: Enrique Gutierrez Barrios "nobalogic"

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.



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



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...



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



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



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



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



Listo hemos terminado. Ahora te vas a Save Optimezed As

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


Si te gusto el tutorial, porfavor registrate! - Aqui -

[Christian_Mendez]

Muy bueno el resultado
Tendré presente el tutorial

[Shaken]

Muchas gracias, me servira de mucho 

[chipbios]

yo hacia esto en flash pero bueno ahora con el photoshop mejor que mejor

[[ZP] Enrique GutBarr]

yo hacia esto en flash pero bueno ahora con el photoshop mejor que mejor

Hacer esto en flash haria que tu pagina fuera mas lenta.. y dilatara mas en cargar.

[Ponguito]

yo hacia esto en flash pero bueno ahora con el photoshop mejor que mejor

Hacer esto en flash haria que tu pagina fuera mas lenta.. y dilatara mas en cargar.

Si, mas lenta, ademas, tenias q tener el java, sino aveces ni cargaba.

Asias por el tuto jefe me servira

[~tny]

Hola;

Enrique o quien me ayude,esto se puede poner mas de una en una imagen,es que mira,yo he echo un menu y quiero poner uno para normas,otro para colabora,otro,... y no se si se puede¿se puede?

[[ZP] Enrique GutBarr]

Hola;

Enrique o quien me ayude,esto se puede poner mas de una en una imagen,es que mira,yo he echo un menu y quiero poner uno para normas,otro para colabora,otro,... y no se si se puede¿se puede?

Si claro que se puede 

[~tny]

Gracias,me me entere que eso era para webs y yo lo iba a usar de firma en un foro.

[[ZP] Enrique GutBarr]

Gracias,me me entere que eso era para webs y yo lo iba a usar de firma en un foro.

Hubieras preguntado hehe...

Por algo este tuto esta en Diseño Web es codigo basicamente

Nos Vemos"

[bola]

Excelente!  ahora una pregunta qeu tengo, como ago para ponerlo en uan eb, soea yo tengo conocieientoe HTML y mas, en dreamweaver se puede, gracias desde ya.

[Carlos]

Excelente!  ahora una pregunta qeu tengo, como ago para ponerlo en uan eb, soea yo tengo conocieientoe HTML y mas, en dreamweaver se puede, gracias desde ya.

Cuando le das Save Optimized As se guarda un archivo .html y una carpeta de imagenes, el codgio del archivo .html es el rollover, ese lo pegas en tu web.

[bola]

Sisis gracias, me habia acordado pero igual muchas gracias!

No me funciona . Osea no se que parte bien bien del codigo poner, intente con unas partes pero no , y tambien pasa las images a la carpeta images de la we web. No me podrias ayudar? 

Ya esta ya lo hise solo
 

Edit: No triple ni double posting!

[Tidus]

Que bueno el tutorial gracias...

[[Zp].((St...))]

muy bueno.. como siempre enrike!