Aprende a crear un sencillo boton para utilizar en tu web con un buen estilo. Vamos a usar colores azules para nuestro ejemplo pero es un tutorial muy simple que se puede cambiar el color facilmente para obtener resultados diferentes y que vayan de acuerdo a lo que necesites.

Puedes descargar el archivo PSD de este tutorial.

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

Ya esta terminado el boton. Estos pasos los puedes utilizar cambiando el color y crear un boton diferente muy facilmente.