InicioHazlo Tu MismoElegantes Botones Pastel para Web con Photoshop

Elegantes Botones Pastel para Web con Photoshop

Hazlo Tu Mismo8/7/2012


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.



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.

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.



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.
Datos archivados del Taringa! original
0puntos
0visitas
0comentarios
Actividad nueva en Posteamelo
0puntos
2visitas
0comentarios
Dar puntos:

Dejá tu comentario

0/2000

Autor del Post

P
ProxMoises🇦🇷
Usuario
Puntos0
Posts6
Ver perfil →
PosteameloArchivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.

CONTACTO

18 de Septiembre 455, Casilla 52

Chillán, Región de Ñuble, Chile

Solo correo postal

© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.

Contenido preservado con fines históricos y culturales.