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 navegacion izquierda-derecha

Publicado por Luch el Sábado, 6 Diciembre 2008Sin Comentarios

Hoy aprenderemos a crear una barra de navegación con botonera izquierda derecha. Si sos principiante en este de Photoshop anímate! Verás lo fácil que será crear esta barra. Utilizaremos ((Rectangular Marquee Tool)), modos de capa y ((Layer Styles)).

Antes de empezar descarguen la imagen de fondo haciendo clic ACÁ y la abrimos en Photoshop.

Creamos una ((New Layer)).

Seleccionamos ((Rectangular Marquee Tool)) y dibujamos una selección como la que vemos abajo.

La rellenamos de blanco.

Hagan doble clic sobre la capa para aplicarle ((Inner Shadow)).

((Gradient Overlay)). Para este degradado usaremos los colores #36691a y #7dba1b.

((Stroke)).

Acepten los cambios.

Crean una ((New Layer)).

Seleccionen ((Gradient Tool)) de tipo ((Radial Gradient)) y tracen un degradado de blanco a transparente en el costado izquierdo del botón como aparece en la siguiente imagen.

Cambien el modo de capa a ((Overlay)).

Apreten Ctrl + Clic sobre la capa del botón para activar su selección.

Luego con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) resten la mitad de la selección total del botón. Observen la siguiente imagen.

Crean una ((New Layer)).

Esta nueva selección la rellenan de blanco y le reducen la ((Opacity)) a un 20%.

Dupliquen el botón unas cuatro veces más. Para ello primero arrastren todas las capas hacia el botón de ((Create a New Layer)) y luego con las capas duplicadas seleccionadas apreten Ctrl + E para unirlas en una capa independiente. Esta capa la duplican tres veces más.

Ahora le colocan el título a los botones. Utilicé la fuente verdana.

Por último seleccionen ((Shape Tool)) y en su barra de opciones elijan formas para colocarle a los botones.