23 mar. 2013

Crea un Sencillo y Limpio Boton para tu Web

Paso 1
Empezamos usando la herramienta Rounded Rectangle Tool(U) y creamos un rectangulo en nuestro documento con 5px de Radius, el color no importa.
 
Paso 2
Ahora vamos a aplicar los siguientes estilos de capa, en el menu Layer -> Layer Style es donde se encuentran cada uno de estos.

Empezamos con un Gradient Overlay de #08378d a #1950b6, el color mas oscuro debe quedar debajo.


 
Seguimos con un Inner Shadow, usando #ffffff y la siguiente configuracion:



Por ultimo un Stroke de 1px y #07317d



Paso 3
Crea una capa nueva. Haz Ctrl + Click sobre el thumbnail de la capa del boton para crear una seleccion del boton, como indica la flecha roja:



Selecciona Gradient Tool y un Gradiente de Blanco a Transparente en modo Radial



Y crea un Gradient de arriba a bajo de forma diagonal como en la siguiente imagen(fijate en la linea)


 
Paso 5
Cambia el modo de la capa del gradient que acabas de crear a Soft Light y debes de tener algo como la siguiente imagen:


Paso 6
Ahora vamos con la font, voy a usar Helvetica Neue Bold, tu puedes usar cualquier font, en color #ffffff



Paso 7
Ve a Layer -> Layer Style -> Drop Shadow, utiliza #1950b6 y las siguientes opciones



Final
Estos pasos los puedes utilizar cambiando el color y crear un boton diferente a tu gusto.



Fuente Referencial

0 comentarios:

Publicar un comentario en la entrada