Elegantes Botones Pastel para Web con Photoshop

Crearemos unos Elegantes botones con colores y estilo Pastel utilizando Adobe Photoshop.

Primero creamos un nuevo documento “Archivo > Nuevo” en mi caso lo hice de 600 x 200px como se ve en la imagen.

photoshop

Una vez listo el archivo, presiona “Ctrl + R” para activar las reglas y crear las guías necesarias para lograr el tamaño del botón exacto a lo que deseas, en mi caso es de 125px de ancho por 45px de alto.

tutoriales photoshop

Ahora que tenemos la selección del tamaño adecuado vamos a redondear las puntas de la misma, esto lo logramos desde el comando “Selección > Modificar > Redondear” y ahí seleccionamos dos pixeles de Radio.

Creamos una nueva capa, a la cual yo he nombrado “Botón Superior”. Sobre esta rellenamos con color blanco nuestra selección, puedes hacerlo con la herramienta bote de pintura o como lo desees. Presiona “Ctrl + D” para deseleccionar.

A continuación vamos a trabajar en la parte superior de nuestro botón y lo haremos con “Estilos de Capa”. Haz dos clic sobre la capa “Botón Superior” para que aparezcan los “estilos de capa” o entra desde “Capa > Estilos de Capa”. En las imágenes te presento los cambios necesarios y el resultado.

Resplandor Interior

hacer con photoshop

Superposición de Degradado

botones con photoshop

Trazo

Elegantes Botones Pastel para Web con Photoshop

photoshop

Posicionados sobre la capa del botón vamos a centrarlo con respecto al documento, para ello es necesario crear una selección que abarque todo el documento, esto lo logramos presionando “Ctrl + A”. Luego seleccionamos la herramienta mover y en las opciones de esta herramienta presionamos “Alinear centros verticales” y “Alinear centros horizontales” y listo. Presiona “Ctrl + D” para quitar la selección.

http://www.artecreativo.net/sp/727/07-boton-pastel-mover-alinear.gif

Ahora duplicamos la capa “botón superior” y colocamos la copia por debajo de esta, le cambiamos el nombre, en mi caso le he puesto “botón inferior” tal cual lo vemos en la siguiente imagen.

tutoriales photoshop

Posiciónate sobre esta nueva capa y aplícale los estilos de capa que vemos en las siguientes imágenes:

Sombra Paralela

hacer con photoshop

Superposición de colores

botones con photoshop

Trazo

Elegantes Botones Pastel para Web con Photoshop

Cuando sea necesario, de acuerdo al uso que le des al botón, toma la “herramienta de texto” y escribe sobre estelo que deseas, podrías aplicar una pequeña sombra al texto con estilos de capa y listo.

Este es el resultado final, también podemos ver que se puede aplicar a un sinfín de formas diversas.

Final y otras opciones

photoshop

Otras opciones: También podrías mover uno o dos pixeles a la derecha o abajo la capa inferior, de manera que le des una apariencia de inclinación. Puedes jugar con el ángulo de la sombra en la capa inferior o el ángulo del degradado en la capa superior y obtendrás resultados diversos sin mayor complicación.

Esperamos que te sea de utilidad este sencillo tutorial photoshop.