Elegantes Botones Pastel para Web con Photoshop | Solo Photoshop
Botones Web Pastel en Photoshop
Tutorial por Francisco Delgado
Crearemos junto a Francisco 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.
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.
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
Superposición de Degradado
Trazo
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.
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.
Posiciónate sobre esta nueva capa y aplícale los estilos de capa que vemos en las siguientes imágenes:
Sombra Paralela
Superposición de colores
Trazo
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
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.
Comentarios de Elegantes Botones Pastel para Web con Photoshop | Solo Photoshop
↑ Tutorial