Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Interface Design

Cómo crear un impresionante menú inspirado en Vista

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Ender Gamboa (you can also view the original English article)

Este tutorial te mostrará cómo hacer un menú semitransparente inspirado en Vista utilizando degradados, sombras y desenfoque para producir un efecto moderno e impresionante.


Paso 1

Abre un nuevo lienzo de 600x335px. Comience mostrando las reglas (Ver>Reglas), luego crea dos guías similares a la imagen de abajo. Crea uno a 285px y otro a 310px.


Paso 2

Crea un Rectángulo (U) que llene el área marcada en la parte inferior y etiqueta la capa "barra inferior". Abre el menú de efectos de la capa. Ve a la propiedad Superposición de degradado y aplica un degradado entre #000000 y #0c0c0c a 90 grados.

Ahora crea otro rectángulo en el área de reglas superior y nombra la capa "barra superior". Nuevamente abra el menú de efectos y aplique una Superposición de degradado entre #35393d y #787b7d a 90 grados. Selecciona los dos rectángulos creados hasta ahora y cambia la Opacidad al 90%. Cuando se añade un fondo más tarde, esto proporcionará un bonito efecto, ya que permite que el fondo se vea ligeramente.


Paso 3

El siguiente paso es añadir un resaltado al menú utilizando la herramienta Línea (U). Selecciona la herramienta Línea y cambia el peso a 2px. Dibuja una línea a través de la barra y cambia el color a #9fa2a4. Cambia el nombre de esta capa por el de "resaltado inferior". Ahora dibuja otra línea directamente encima de la anterior y cambia el color a #484b4d y cambia el nombre a "resaltado superior". Agrupa estas capas con las de la barra en un grupo llamado "barra". Esta etapa completa la base del menú.


Paso 4

Ahora que la barra de Menú está completa, podemos crear un conjunto de separadores para ir entre los textos. Selecciona de nuevo la herramienta Línea y deja el tamaño en 2px. Dibuja una línea vertical desde la marca de la regla central que se detiene unos pocos píxeles antes del resaltado. No es necesario que sea exacto y se puede ajustar fácilmente más tarde. Abre el menú de efectos y aplica una Superposición de degradado a 90 grados entre #676a6d y #4d6672. Etiquete esta capa como "divisor superior".

Dibuja otra línea vertical desde la regla central bajando y deteniéndose a la misma distancia del borde como en el caso anterior. Esta sección no tiene degradado, así que cambia el color a #43474b. Cambia el nombre de esta capa a "divisor inferior". Agrupa las dos secciones del divisor y nombra el grupo "divisor".


Paso 5

Selecciona la herramienta Tipo (T) y cambia el color a blanco (#FFFFFF). La fuente que elegí para el menú se llama Segoe UI porque es la que se utiliza en la interfaz de usuario de Vista. Sin embargo, no todo el mundo tiene este tipo de letra, por lo que Arial puede sustituirlo. Ajusta el tamaño a 11pt y escribe tus enlaces, separándolos uniformemente. Agrúpalos y nombra al grupo "enlaces".

Ahora copia tus separadores y ponlos entre los enlaces. Deberías terminar con algo similar a esto.


Paso 6

Ahora la barra de menú está básicamente terminada, así que puedes añadir un fondo a tu elección. El fondo que he elegido es una fotografía de hierba. Cualquier cosa colorida o pintoresca servirá.

Copia tu fondo en el menú y cambia el nombre de la capa por el de Fondo. Asegúrate de que esta capa esté al final de tu paleta de capas. La transparencia del menú permite que se vea el fondo sin que se vea en exceso.


Paso 7

Este paso creará el rectángulo redondeado borroso que está detrás del texto. Este efecto es bastante común en Vista y es una buena técnica. Se desentiende del fondo y lo coloca en el texto, pero sigue mostrando la hermosa escena que hay detrás.

En primer lugar, duplica el fondo. Esta capa no es permanente, pero cortaremos una selección de ella. A continuación, con la herramienta Rectángulo redondeado (U), dibuja una forma que comience más allá del borde izquierdo del lienzo. Esto significa que la figura sólo tiene dos bordes redondeados.

Rasterice la capa y, a continuación, utilizando la herramienta Varita mágica (W), seleccione el rectángulo y elimine el color manteniendo el contorno. Ahora selecciona la copia del fondo y corta desde esa capa. Elimina la capa de copia del fondo y añade otra capa nueva llamada "desenfoque".

Pega la forma en la capa llamada "desenfoque" y luego aplica un Desenfoque Gaussiano de 5px (Filtro>Desenfoque>Desenfoque Gaussiano). A continuación, aplica una Sombra Caída como se muestra a continuación.


Paso 8

Ahora añade tu texto dentro del desenfoque. Utilizando el mismo tipo de letra que los enlaces (Segoe UI) escribe tu nombre y tu eslogan. Selecciona parte del texto y colócalo en negrita y mantén algo normal, aplica una Sombra Paralela y un Degradado. Esto produce un texto de aspecto moderno y llamativo.


Paso 9

Este paso es opcional, ya que producirá el resplandor azul que se convertirá en nuestro efecto "hover". Dibuja una gran Elipse (U) que rellene el área entre los separadores. Cambia el color de la elipse a #5c94c5 y aplica un desenfoque gaussiano de 10px. La figura se ha convertido ahora en una capa de trama, y puedes limpiar el exceso de desenfoque utilizando la herramienta Marco (M).


Conclusión 

Este menú produce un efecto impresionante cuando se combina con un fondo panorámico brillante. Utiliza la transparencia con gran efecto, así como los modernos degradados. El uso de luces es un gran truco para proporcionar un aspecto moderno y vanguardista a las fotografías. Este menú sería bastante fácil de cortar y convertir en un menú muy funcional basado en la web con los estados "hover".

One subscription.
Unlimited Downloads.
Get unlimited downloads