Tutorial: Botones para tu web con Photoshop

8 mar

Hoy vamos a crear unos botones muy sencillos para poder usar en cualquier proyecto web. Seguidme, que os cuento como después del salto.

Lo primero es abrir un documento nuevo y con la herramienta rectángulo redondeado con un buen radio, como 10px, creamos la base para el botón. No os preocupéis por el color.

A continuación, hacemos doble click en la capa donde tenemos nuestro rectángulo y en la ventana de estilos, marcamos inner shadow (sombra interior)  y seleccionamos la siguiente configuración:

Ahora solo nos queda aplicar un buen degradado con gradient overlay (superposición de degradado). En mi caso he usado un degradado que va desde #c6c6c6 a #EEEEEE pero podemos usar cualquier gama de colores que vayan de uno oscuro a uno mas claro, como he hecho yo en la imagen que encabeza el artículo.

Ya tenemos nuestro botón, ahora nos queda añadir un texto, para el que he usado color negro de base y le he añadido un estilo con la siguiente configuración:

Como veis un sencillo drop shadow (sombra paralela) hace que el texto parezca insertado en el botón.

Ahora ya sabéis, lo bueno es experimentar con ello y cambiar los colores para conseguir nuevos estilos.

Links: Descargar PSD | Traducción español-ingles Photoshop

About these ads

2 comentarios to “Tutorial: Botones para tu web con Photoshop”

  1. Cesar Mujica 8 marzo 2010 at 15:50 #

    Muy útil. También se puede usar algo de bebel and emboss

Trackbacks/Pingbacks

  1. Bitacoras.com - 8 marzo 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: Hoy vamos a crear unos botones muy sencillos para poder usar en cualquier proyecto web. Seguidme, que os cuento como después del salto. Lo primero es abrir un documento nuevo y con la herramienta rectángulo redondeado con un …..

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: