Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contrasea

Registro de Usuario

Anunciar en SoloPhotoshop

Diseño de Menú Vertical en Photoshop | Solo Photoshop

Diseñando un Menú Vertical con Photoshop

 

Tutorial por Francisco Delgado

En esta oportunidad veremos junto a Francisco como diseñar paso a paso un Menú Vertical para Web en Photoshop.

Pues continuamos con nuestra serie de tutoriales de “Elementos de diseño para Interfaces Web”. En este tutorial vamos a crear un nuevo menú, pero en esta ocasión será un “Menú Vertical” el cual es relativamente sencillo de elaborar, en especial si ya hemos realizado los cuatro anteriores tutoriales de esta serie. Si no los has realizado te recomendamos que los hagas, pues en esta nueva explicación daremos por conocidos algunos pasos que ya se realizaron con anterioridad.

Base del Menú

Para hacer este menú vertical necesitamos crear un nuevo documento, en mi caso lo hice de 300 x 250 como lo muestra la siguiente imagen:

Menú Vertical archivo nuevo

La base del menú será de 180px de ancho por 210px de alto, pero antes de crear la base he agregado unas guías que delimitan esa área para que nuestra forma sea del tamaño exacto. Basándote en las guías y con la herramienta de Rectángulo seleccionada crea la base del menú justo como lo muestra la siguiente imagen.

Base del menú

A continuación vamos a aplicar unos estilos de capa al fondo del menú, pero para ello hay que crear una nueva capa para trabajar sobre esta. Luego agregamos los siguientes estilos de capa:

Sombra paralela

Sombra Paralela

Sombra Interior

Sombra Interior

Resplandor Interior

Resplandor Interior

Bisel y Relieve

Bisel y Relieve /></p>
 
<h4>Superposición de Colores</h4>

<p align=Superposicion

Trazo

Trazo

Y así queda nuestro fondo después de aplicarle los estilos de capa:

Base estilos

Primer Botón

Luego, aprovechando que el trazo tiene 5 px de ancho agrégale guías justo como lo vemos en la siguiente imagen y después una guía extra a 40 px de distancia como también lo vemos en la imagen. Con esta nueva guía vemos ya la silueta del primer botón que crearemos.

Guias botón

Toma la herramienta Rectángulo y traza el primer botón:

Primer botón

Para darle forma le aplicaremos los siguientes estilos de capa:

Sombra Interior

Sombra Interior

Resplandor Interior

Resplandor Interior

Superposición de Degradado

Degradado

Y así nos ha resultado el primer botón después de la aplicación de los estilos de capa:

Botón liso

Agregar el Texto

Toma la herramienta de texto y escribe sobre este primer botón, en mi caso le he agregado la palabra INICIO. A este texto le incluimos luego una pequeña sombra para que luzca mejor.

Texto inicio

Sombra paralela

Botón texto

Finalmente le incluimos una flecha (como lo hicimos en el tutorial de botón de agua), esta flecha tiene el mismo estilo del texto (Sombra paralela) del texto. He ajustado a un 80% la opacidad de la forma.

Inicio flecha

El Resto de los Botones

Ahora agrupa las capas del botón, el texto y la flecha y asígnale un nombre, en mi caso lo he llamado “Grupo Botón Inicio” justo como lo vemos en la siguiente captura:

Crear grupo

Duplica el “Grupo Botón Inicio” para crear el resto de los botones, ordénalos y nómbralos de acuerdo a las opciones de tu menú. En mi caso es INICIO, SERVICIOS, CLIENTES, NOSOTROS y CONTACTO. Así como lo puedes ver en la siguiente imagen.

Menú listo

Botón Activo

Finalmente vamos a crear un efecto distinto para aparentar el estado activo de los botones del menú. Aplica los siguientes estilos de capa a uno de los botones.

Sombra Interior

Sombra interior

Resplandor Interior

Resplandor interior

Bisel y Relieve

Bisel relieve

Superposición de Degradado

Degradado

Y listo, hemos terminado nuestro “Menú Vertical” el cual es en realidad muy simple, a pesar de que aparenta una complejidad mayor. Lo complicado es hacer el primer botón, el resto son copias del primero y eso nos ahorra mucho tiempo.

Menú Vertical Final

Espero que este quinto tutorial de la serie “Elementos de diseño para Interfaces Web” te sea de mucha utilidad. Nos vemos en el siguiente muy pronto.

Comentarios de Diseño de Menú Vertical en Photoshop | Solo Photoshop

↑ Tutorial