Adobe Photoshop Cs5: Como crear un atractivo menú para web

Publicado por asktutorial.

Esta vez, veremos cómo crear un agradable menú para incluir en tu página web. Yo utilizaré Adobe Photoshop CS5, pero también son válidas las versiones anteriores de Photoshop.

Muy bien, describiré la serie de pasos para crear un menú de web:

PASO 1:

Creamos un nuevo documento. Lo ideal es que sea bien rectangular, así podremos incluir cantidad de botones en el menú. Respecto a la resolución, con 72 pixeles estaría bien, ya que utilizaremos esta imagen para web.

PASO 2:

Con “herramienta marco rectangular”, haremos una selección sobre el documento que acabamos de crear. Para que la selección quede redondeada en los bordes, debemos cambiar el valor de “suavizar los bordes de la selección”. En esa casilla, coloca un valor de 2.

Crear menú para web en Adobe Photoshop Cs5

 PASO 3:

Crearemos una nueva capa: Capa>Nueva>Capa y la rellenaremos con un degradado. Para pintar con degradado, debemos elegir la herramienta “degradado”. Selecciona los colores que más te gusten y genera el degradado sobre la nueva capa, desde abajo hacia arriba.

Crear menú para web en Adobe Photoshop Cs5

PASO 4:

Sin deshacer la selección, vamos a crear otra capa nuevamente. Ahora iremos a Selección>Modificar>Contraer, y daremos un valor de 3 píxeles.

Presionando la tecla de flecha hacia abajo de nuestro teclado, moveremos la selección tres píxeles hacia abajo (o sea,presionaremos tres veces la flecha hacia abajo). La selección nos quedará de la siguiente manera:

Crear menú para web en Adobe Photoshop Cs5

PASO 5:

Al igual que en el PASO 3, pintaremos la selección de la nueva capa con el degradado, siempre del mismo color.

PASO 6:

Debemos crear los botones. Entonces, hacemos una capa nueva, a la que llamaremos “Boton1”. Elegimos la herramienta “Marco de Selección Rectangular” y creamos un rectángulo que funcionará de botón. También la pintaremos con el degradado, del mismo color, pero ahora agregaremos algo más: una sombra para resaltar.

Crear menú para web en Adobe Photoshop Cs5

Para generar la sombra, hacemos doble click sobre la capa y elegimos la opción “sombra paralela”. Puedes buscar el tipo de sombra que te guste, yo he decidido dejar la predeterminada de Photoshop. También agregué “Bisel y Relieve”, que puedes encontrarlo en el mismo panel que las sombras, haciendo doble click sobre la capa.

NOTA: te recomiendo que te ayudes de la líneas guías de Photoshop para centrar los botones sobre el menú. Puedes arrastrarlas desde las reglas de los bordes del área de trabajo.

PASO 7:

Repite la capa de “botón 1” para tener la cantidad de botones que desees. Luego agrega un texto sobre cada uno de los botones. Al texto, también puedes agregarle sombras y relieves, al igual que a los botones.

Crear menú para web en Adobe Photoshop Cs5

Listo!. Ya tienes un bonito menú para tu web, creado en Adobe Photoshop Cs5.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!