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:
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.
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 Interior
Resplandor Interior
Bisel y Relieve
Trazo
Y así queda nuestro fondo después de aplicarle los estilos de capa:
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.
Toma la herramienta Rectángulo y traza el primer botón:
Para darle forma le aplicaremos los siguientes estilos de capa:
Sombra Interior
Resplandor Interior
Superposición de Degradado
Y así nos ha resultado el primer botón después de la aplicación de los estilos de capa:
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.
Sombra paralela
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.
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:
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.
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
Resplandor Interior
Bisel y Relieve
Superposición de 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.
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