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, Web

Barra de botones estilo Black 2.0

Publicado por Luch el Sábado, 8 Noviembre 2008Sin Comentarios

Simple barra de botones al estilo web 2.0. Estaría bueno que a esta barra le agreguen nuevos colores o añadir añadir algo nuevo. Esti es solo un ejemplo sencillo.

Abrimos un nuevo documento de 600×120px con fondo blanco.

Creamos una ((New Layer))

Seleccionamos ((Rounded Rectangle Tool)) con los valores que aparecen en la siguiente imagen. Lo rellenan de cualquier color.

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

((Drop Shadow)).

((Gradient Overlay)). En el degradado usé los colores: #787878 / #424242 / #363636 / #787878.

((Stroke)).

Luego de aplicar estos Layer Styles les tendría que estar quedando así.

Coloquen los títulos de los botones. Usé la fuente Arial.

Crean una ((New Layer)).

Seleccionen ((Line Tool)) y coloquen los valores que puse en la imagen de abajo indicados con flechas rojas.

Dibujan una línea y las demás son duplicadas (Ctrl + J).

Crean otra ((New Layer)).

Con los mismos valores que usamos con ((Rounded Rectangle Tool)) dibujamos otra barra en la parte baja. Observen la imagen de abajo.

Vamos a aplicarle ((Blending Options)), para eso hagamos doble clic en la capa.

((Drop Shadow)).

((Gradient Overlay)). Para el degradado usé los colores #002068 y#477baf.

((Stroke)).

Acepten los cambios.

Por último colocamos los títulos a la barra inferior. También usé la fuente Arial. Pueden probar cualquier otra que ustedes deseen.