Barra de navegación y botones oscuros

¡Este sencillo tutorial de Photoshop lo guiará a través de la creación de una barra de navegación y botones simples pero geniales que puede usar en su sitio web!

1.

En primer lugar, cree un nuevo documento y rellene el fondo con un gris oscuro. (mi documento es 430×130, y mi color de fondo es #161616)

Imagen vacía, ¡oh sí! 🙂 Haga una nueva capa y luego haga una selección del tamaño de 400×34, complete la selección con #393939.

Aplique esta siguiente superposición de degradado.

Cree una nueva capa y seleccione la barra nuevamente, llene el área con un patrón agradable.
(nota: haga clic en la palabra patencion arriba para ser llevado a la imagen del patrón)

Cambie la opacidad de la capa de esta capa de patrón a 30%.

2.

Cree una nueva capa nuevamente y con la herramienta Marco rectangular haga una selección de tamaño establecido de 300×26 en medio de la barra principal.

Rellene esta selección con #161616.

Aplique los siguientes estilos de capa:

1. Brillo interior
2. Gradiente de superposición
3. Carrera

3.

Ahora lo que debe hacer es crear una selección de 1 x 26, o simplemente dibujar una línea desde la parte superior de la segunda barra hasta la parte inferior con la herramienta Lápiz. Puedes usar cualquier color.

Aplique la siguiente superposición de degradado.

Duplique la capa de ‘sangría’ y muévala alrededor de 81 píxeles a la derecha. (presione la tecla derecha una vez, luego mantenga presionada la tecla shift y presione la tecla derecha 8 veces)

Repita ese paso una vez a la izquierda, luego tal vez otra vez. Terminé con 4 líneas de sangría, las fusioné todas y las centré.

Después de fusionar las capas, reduzca la opacidad de la capa a alrededor 50%.

4.

Cree una nueva capa y haga zoom en el área de la esquina izquierda, haga una forma así al lado de la línea de sangría izquierda (usando la herramienta de lápiz):

Duplique esta capa, gírela horizontalmente y muévala hacia el lado izquierdo de la siguiente línea de sangría.

Combine estas capas, luego duplíquelas, muévalas al medio.

Haz lo mismo de nuevo y muévelo hacia la derecha.

Combine todas estas capas juntas y cambie el modo de capa a Luz tenue y la opacidad de 50%.

5.

Haz una nueva capa y luego obtén la Herramienta gradiente, usando estas opciones:

Haz un degradado en la parte inferior central del tipo de área:

Establezca el modo de capa en Cubrir y la opacidad de 40%

¡Ahora puedes agregar texto! 🙂

Arriba usé:

• Tahoma
• 12 puntos
• Sin suavizado
• #f6dc00

También apliqué esta sombra paralela a mi capa de texto.

Eso es:

Gracias a todos por leer este tutorial de Photsohop. ¡Espero que lo hayas disfrutado, e incluso que hayas aprendido algo!