Crear botones para web 2.0 con Photoshop

Crear botones para web 2.0 con Photoshop
10 Dic 2012
En este sencillo tutorial vamos a ver cómo crear botones con efecto tridimensional en Photoshop. Se trata de un práctico tutorial de diseño web que podréis aplicar a la hora de mejorar la estética de vuestra página web 2.0.
 
 
Lo primero que vamos a hacer es crear un documento nuevo de Photoshop con las dimensiones aproximadas del botón (150 x 50 px aproximadamente).
 
El siguiente paso será crear una nueva capa (capa > nueva > capa).
 
Ahora crearemos una forma Rectángulo redondeado con un radio aproximado de 6 px. Es importante marcar dentro de las opciones de herramienta el icono rellenar píxeles para que la figura quede coloreada, aunque de momento el color no tiene importancia.
 
 
El siguiente paso es acceder a las opciones de fusión de la capa. Para ello clicaremos con el botón derecho sobre la capa en la paleta capas, seleccionaremos Opciones de fusión y activaremos los siguientes parámetros:
 
- Superposición de degradado: Para establecer las pautas del degradado debemos hacer doble clic sobre la miniatura del mismo. De esta forma accedemos a los parámetros, que estableceremos tal y como se ve en la imagen. (2 nodos de gris al principio y en el centro y 1 nodo negro al final)
 
 
- Trazo: Con grosor 1, de tipo exterior y color gris.
- Brillo interior: Color blanco, opacidad 30%, suavizado, tamaño 10, rango 50. (ver imagen).
 
 
Ahora vamos a crear el reflejo. Para ello insertamos una nueva capa y vamos a dibujar otro rectángulo con borde redondeado, esta vez de color blanco, en la parte superior de nuestro botón.
 
Para integrarlo con el botón vamos a utilizar las posibilidades que nos ofrece la máscara rápida. Activamos la función máscara rápida desde la barra de herramientas y, con la herramienta degradado y colores blanco y negro en la paleta, trazaremos una línea vertical desde la parte superior del botón hacia el centro. Nos debe quedar algo similar a la siguiente imagen:
 
 
Una vez hecho esto desactivamos la máscara rápida para volver al modo normal (vemos que queda una selección). Ahora pulsamos la tecla suprimir y vemos cómo queda un degradado de opacidad en el reflejo, es decir, la parte superior queda nítida y a medida que se acerca al centro va degradando a transparente. Si no quedamos del todo satisfechos con el efecto podemos reducir un poco la opacidad de la capa que contiene el reflejo.
Por último vamos a añadir el texto y aplicaremos una sombra paralela con los siguientes parámetros:
 
 
Y éste es el resultado: