Hace algunas semanas, vimos un tutorial donde cubrimos el proceso de creación de botones estilo 2.0 para sitios Web. Pues bueno, hoy veremos la otra parte, como hacer una barra de menú que vaya con ese estilo e impresionemos aún más a nuestros visitantes.

Pero bueno, menos palabras y más acción, así que los esperamos después del salto.

Cómo hacer una barra de menú estilo 2.0

Como siempre, lo primero:

Implementos necesarios:

1. Adobe Photoshop, 7 o superior (en este tutorial utilizamos CS3. Pueden obtener una copia de evaluación del software desde este enlace).

Si ya contamos con los materiales, entonces, manos a la obra:

Procedimiento:

1.- Partimos por crear un nuevo archivo, de fondo blanco y tamaño 600 px de ancho y 200 px de alto. Para crearlo podemos ir al menú Archivo > Nuevo o bien presionar CTRL + N en nuestros teclados.

2.- A continuación, con la Herramienta de Rectángulo Redondeado u Ovalado y creamos una figura como esta:

Color de la figura: #b8e4fd

El tamaño de la figura pueden ajustarlo según el que necesiten para su sitio, utilicen la imagen anterior como referencia.

3.- A continuación, con la capa seleccionada vamos al menú Capa > Estilo de Capa > Opciones de fusión y vamos a Sombra exterior ajustando los siguientes valores:

Click para agrandar

Con eso lograremos algo como esto:

* Nota: Las opciones aparecen en inglés, porque esa es la versión que usamos aca en Como Lo Hago, pero no se preocupen, son los mismos valores.

4.- Luego volvemos a Opciones de Fusión sobre la misma capa, y ahora ajustamos en Sombra Interior:

Click para agrandar

Y ahora tendremos algo como esto:

5.- A continuación hacemos click con el botón derecho sobre la capa en la que hemos estado trabajando y seleccionamos Duplicar Capa.

6.- Luego hacemos click sobre esta capa nueva y vamos al menú Capa > Estilo de Capa > Opciones de fusión. Y en la misma opciones de fusión seleccionamos Subexponer color.

7.- A continuación añadiremos texto correspondiente a las secciones que se representarán en la barra de menú. Para esto seleccionamos una letra de nuestra preferencia (en este caso usamos Calibri) y un color de nuestro gusto (en este caso utilizamos #25638c) y tenemos algo como esto:

El texto pueden añadirlo en una sola capa para maniobrarlo de mejor manera.

8.- Después, con la capa de texto seleccionada hacemos click con el botón derecho y Duplicar Capa. Seleccionamos la capa original de texto y vamos a Opciones de Fusión y seleccionamos Sobreexposición Lineal y la movemos con el teclado 2 veces hacia abajo, obteniendo algo como esto:

9.- Ahora, en la misma parte donde seleccionamos el Rectángulo redondeado al comienzo, seleccionamos ahora la Herramienta de Línea, y con el mismo color del texto hacemos una pequeña raya vertical al costado del primer texto, así:

10.- A continuación duplicamos la capa de la línea y cambiamos su color a #e2f1fa y la movemos con el teclado 1 o 2 espacios a la derecha, obteniendo el siguiente resultado:

11.- Repetimos los pasos 9 y 10 para el resto de las secciones hasta que tengamos algo como esto:

12.- Luego, seleccionamos la Herramienta de Rectángulo Redondeado y dejamos el color en blanco, dibujando uno parecido a este, encima de las capas en las que hemos estado trabajando:

13.- Cambiamos la opacidad de la capa a un 30% y tenemos el resultado final:

Y así hemos finalizado la confección de nuestra barra de menú para nuestros Sitios Web. Les recomendamos ir probando con otros esquemas de colores para adecuarlos al estilo de las páginas que esten armando.

Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía.

Cualquier duda o consulta pueden realizarlas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.