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 navegación verde

Publicado por Luch el Domingo, 23 Noviembre 20081 Comentario

En este tutorial de Photoshop vamos a crear una elegante barra de navegación estilo verde para su página web.

Abrimos un nuevo documento de 470×130px con fondo blanco.

Seleccionamos ((Rounded Rectangle Tool)) y creamos un rectángulo con un ((Radio)) de 20px y fondo gris. Guíense por la imagen que aparece abajo.

Encima de la capa del rectángulo gris, vamos a ((Layer))-((Layer Style))-((Blending Options)).

Escriban tres títulos a sus botones. Esto va en cada uno, si quieren poner 4, 5, 6 están en todo su derecho!

Ahora crearemos unas líneas para separar los botones. Primero debemos hacer un zoom en los botones para trabajar más fácil. Creamos una ((nueva capa)) y trazamos una línea blanca de forma vertical como vemos en la imagen, le damos 1px de ((desenfoque gausseano)). Duplicamos la capa y la colocamos en el otro extremo. Nos van a quedar 2 líneas.

A estas líneas le aplicamos un degradado oscuro a claro. ((Layer))-((Layer Style))-((Blending Options)).

Ya tendremos creada nuestra barra de navegación. Yo le apliqué un fondo degradado para darle más elegancia a los botones.