Blog

El blog de CaminoCreativo.com con lo ultimo y mas destacdo sobre el diseño.

Efectos

Los mejores tutoriales para Photoshop enfocado sobretodo a crear efectos especiales.

Noticias

Importantes noticias para diseñadores. Tambien algunas novedades de nuestra area.

Recursos

Todos los recursos para poder hacer de tus diseños algo completamente profesional.

Varios

No solo de Photoshop vive el diseñador. Dreamweaver, Illustrator, incluso otros recursos!

Home » Basicos, Dibuja, Web

Atractiva barra de botones Web

Publicado por Luch el Martes, 11 Noviembre 2008Sin Comentarios

¿Estás buscando botones para tu sitio web? En este tutorial vas a encontrar lo que estabas buscando; una atractiva barra de botones para tu sitio web.

Abrimos un nuevo documento de 600×200px con fondo transparente.

Rellenamos el fondo con el color #01719b.

Creamos una ((nueva capa)).

Seleccionamos ((Rounded Rectangle Tool)) con un ((Radius)) de 15%. Elijan como color frontal en la paleta de colores el #91d5d4. Dibujamos la barra de los botones.

Hagan doble clic sobre la capa para abrir ((Blending Options)).

((Drop Shadow)).

((Inner Shadow)).

Luego de aplicar ((Blending Options)) les debería estar quedando así.

Dupliquen la capa (Ctrl + J) y le cambian el modo a ((Soft Light)).

Con la fuente Tahoma escriban los nombres de los botones-

Crean una ((nueva capa)).

Seleccionen ((Line Tool)) , ((Weight)): 1px, luego ponen como color frontal el #01719b. Dibujen una línea que separe cada botón y bájenle la ((opacidad)) de la capa a 60%.

En la imagen de abajo ya he colocado las demás líneas separatorias.

Crean otra ((nueva capa)).

Vamos a crearle un reflejo a la barra así que vuelvan a seleccionar ((Rounded Recangle Tool)) con los valores que ya habíamos introducio y dibujen una barra blanca que ocupe la mitad de la altura. Observen la siguiente imagen.

Le reducimos la ((opacidad)) a un 30% u listo!