Photoshop

Ξ 2 comentarios

Cómo hacer una barra de menú estilo 2.0

por Xabadu
Cómo hacer una barra de menú estilo 2.0

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.

Sello de GarantÍa CLH

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

2 Comentarios

  • no vale esto no se puede hacer con el foto shop 7 esta en ingles y nisiquiera encuentro el cuadro de layer style y solo me aparece en esa opcion show o hide all effects, no entiendo nada, porfa ayudenme q me quedan pocos dias de prueba del producto

  • @samit: Si, se puede hacer con photoshop 7. Para acceder a los efectos de capa puedes ir a:

    Layer > Layer Style > Blending Options

    O bien click con el boton derecho sobre la capa y Blending Options.

    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos