Creando un excelente Menu con Photoshop y CSS
¿Cansado de ver varios tutoriales sobre "Menus con CSS" y no entiendes nada?
Pues haz llegado al sitio correcto x). Fuera de bromas, en este tutorial explicaré como poder crear un elegante menú en Photoshop ( la imagen que será el background de nuestro menú). Y lo maquetaremos con CSS, de una forma simple y sobre todo validada, para no tener ningún problema con ningún explorador ( incluido IE6 xD ).
I) Creación del background de nuestro menú en Photoshop
1.- Primero creamos un nuevo documento en Photoshop de 500 x 40 pixeles.
2.- Ahora con la herramienta Rectángulo Redondeado, crearemos un rectángulo del tamaño del documento ( 500 x 40 ) con un radio de 7px. de color #5b4949.
3.- Ahora con la herramienta texto escribiremos las categorías de nuestro menú.
4.- Luego crearemos lo que serán las seperaciones de las secciones del menú. Para eso usaremos la herramienta lápiz con 1px de grosor. Crearemos 2 líneas, una con un color #715555 y la otra con #3e3232. (Debemos elegir colores que hagan contraste con el fondo del menú y también entre las 2 líneas).
5.- Seleccionamos todas las capas, y nos vamos a Capa > Nueva > Grupo. Se abrirá una nueva ventana, donde le pondremos por nombre "Nav"
6.- Ahora duplicaremos el grupo, para eso debemos seleccionar el grupo, luego ir a Capa > Duplicar Grupo y lo llamaremos "Nav Hover"
7.- Ahora en el nuevo grupo que creamos "Nav Hover", cambiaremos el color del fondo de nuestro menú. Para eso le damos doble click a la capa del fondo y le pondremos una superposición de degradado con la siguiente configuración. En esta parte también podemos cambiar el color del texto de las categorías.
8.- Ahora que ya tenemos 2 grupos, una que es la del menú en estado normal y la otra que será para el hover ( cuando pasamos el mouse por el menú). Nos vamos a Imagen > Tamaño de Lienzo y duplicaremos la altura, es decir pondremos 80px.
9.- Ahora debemos posicionar nuestros 2 grupos, de tal manera de que quede uno arriba del otro. Para eso debemos seleccionar todo el documento y seleccionar el grupo "Nav" , seleccionar la herramienta Mover y posicionarlo en la parte superior. Lo mismo para "Nav Hover" solo que a este lo pondremos en la parte inferior.
10.- Solo queda guardar la imagen, que será el "background" de nuestro menú.
II) Maquetación de nuestro Menú
Ahora ya que acabamos con el diseño, procedemos a crear "el esqueleto" de nuestro menú en html.
<div id="nav"> <ul> <li><a href="#" id="ajax">Ajax</a></li> <li><a href="#" id="css">CSS</a></li> <li><a href="#" id="js">JavaScript</a></li> <li><a href="#" id="jQ">jQuery</a></li> <li><a href="#" id="php">PHP</a></li> <li><a href="#" id="wp">Wordpress</a></li> </ul> </div>
Como verán, le he aplicado un id a cada categoría del menú. Esto es para poder diferenciarlos, a la hora de crear el CSS.
Ahora solo debemos "jugar" un poco con CSS 
#nav{ width:500px; } #nav ul{ list-style:none; /* Para quitar todos los estilos de la lista */ width:500px; /* Definimos el ancho de nuestra lista */ height:40px; /* Definimos el alto de nuestra lista */ } #nav ul li{ float:left; /* Para hacer que el menú sea horizontal */ } #nav a{ text-indent:-9999px; /* Posicionamos el texto, de tal manera que no sea visible */ height:40px; background:url(images/menu-css.png) no-repeat; /* la imagen que hicimos en photoshop */ display:block; /* Hacemos que los links se muestren por bloques y no en línea, es importante :) */ }
Ahora, viene lo interesante 
, la idea es fácil. Solo debemos asignarle el ancho de cada categoría y posicionar la imagen de fondo. Acá es donde le damos uso a los "id" que le asignamos a cada categoría cuando creamos "el esqueleto" en HTML.
a#ajax{ background-position:0 0; width:68px; } a#css{ background-position:-68px 0; width:52px; } a#js{ background-position:-120px 0; width:106px; } a#jQ{ background-position:-226px 0; width:86px; } a#php{ background-position:-312px 0; width:62px; } a#wp{ background-position:-374px 0; width:126px; }
Ahora de la misma forma, debemos posicionar el background, para el "hover" de nuestro menú. Para este caso ya no es necesareo asignarle el ancho, ya que este valor lo hereda del a#id.
a:hover#ajax{ background-position:0 -40px; } a:hover#css{ background-position:-68px -40px; } a:hover#js{ background-position:-120px -40px; } a:hover#jQ{ background-position:-226px -40px; } a:hover#php{ background-position:-312px -40px; } a:hover#wp { background-position:-374px -40px; }
Ver Demo del menú
Descargar el menú con Photoshop y CSS ( incluye el PSD)
El menú funciona perfectamente en IE 6, IE 7 , IE 8, Mozilla Firefox, Safari y Google Chrome. (Todos probados por mí). Y sobre todo está validada.
Como verán, no es nada del otro mundo crear un menú con Photoshop y CSS. Si tienes alguna duda, no dudes en comentar. Y si tienes otro método, o alguna parte que se pueda optimizar, bienvenido 
los comentarios están para eso.
23 Respuestas en “Creando un excelente Menu con Photoshop y CSS”
Deja tu Comentario
:O Me Salio yeah!!
Thnkz! x el tuto!!
http://misterio09.webspacemania.com <-- Demo ^^^Gracias, Ahora si aprendiendo poko a poco ^^
Saludoz...
Hey, great post, really well written. You should write more about this. I'll certainly be subscribing.
fantastico!!!, llevo muchos dias tratando de buscar que alguien explique bien la parte de maquetar una web con a partir de imagenes de photoshop, muchas gracias, ¿que tal si explicas como maquetar cabeceras, menus verticales, pies de paginas, etc?
De hecho pensaba hacerlo, pero uno de estos días que me desocupe y hago uno
Salu2!
Hola WillxD.
Con respecto al tema de la maquetación de una web a raiz de una imagen de photoshop me surje una duda:
Si yo diseñara en photoshop una imagen de un formulario, por ejemplo nombre y password (el tipico registro)...
... ¿Cómo se le puede insertar a dicha imagen los componentens imput text y el boton dentro de dicha imagen?
Eso es fácil, te lo explico rápidamente. Le debes aplicar alguna clase o ID, a los componentes de tu formulario (form,input,textarea,etc) y luego a esas clases le aplicas el fondo creado en photoshop, usando CSS.
Espero que te haya aclarado un poco
PD: En un par de horas hago un tuto sobre eso, para poder explicarlo más detalladamente
Gracias WillxD, contigo estoy aprendiendo lo que no me enseñaron en la universidad. De verdad que me parecen geniales tus explicaciones.
Espero con gran entusiasmo el tutorial sobre maquetar formularios en imagenes y todo lo que tiene q ver sobre como maquetar imagenes de Photoshop.
¡¡Gracias amigo y sigue asi!!
Gracias por el tutorial, funciona perfecto y es facil de entender.
Alguna forma sencilla de crear ademas del efecto Hover, una clase ACTIVE?
Lo intento pero no me sale...
Es la mismia idea, solo que en vez de
a:hover#id{}
debes poner
a:active#id{}
Y lo mismo para las demás pseudo-clases ya sea
a:link#id{}
a:visited#id{}
Salu2!
muchisimasssss graciassssssssssss, casi desisto de hacer este tipo de menus pero menos mal que me he tropezado con tu tutorial...gracias felicidades por la web
Tengo el menu realizado pero me pasa como a manuel.
Para realizar la clase active, ¿como la llamo desde el html?.
Creo que no te refieres a la pseudo clase active (a:active).
Si tu página es solo html, lo tendrías que hacer manualmente. Es decir, agregar la clase active a cada uno en su respectiva página html.
Por ejemplo en la página css.html quedaría algo así:
y en tu css agregas la clase active.
Salu2!
Te ha quedado excelnte el tutorial y muy detallado y explicado, solo que si lo quiero hacer con otra tipografía y de distinto ancho, como mido cada sector, por que sino me queda desfasado, ¿podrías ayudarme?
Gracias de antemano
Lo puedes medir con la herramienta regla de Photoshop, para seleccionar la herramienta regla, presion por 2 segundos la herramienta "cuentagotas" y se desplegará un menú. Y ahí seleccionas la "Regla"
Las medidas las veras en la parte superior..
Salu2!
Estimados muchas gracias por la ayuda que le brindan a los webmaster novatos mi pregunta es la siguiente ise el menu pero con otros textos ahora cuando paso el mouse por arriba no me alumbra el texto me sale descuadrado por ejemplo mi menu consta de estos links
" inicio foros clientes"
al hacer click en foros aparece una parte de clientes como tengo que tomar esas medidas? saludos
un excelente tutorial, claro sencillo y para todos los usuarios
En primer lugar te felicito por el tutorial ,me salio y eso q soy novato en diseño web ,tengo una pregunta: si yo ha este menu quisiera hacerle desplegable sin java scrip ,solo con css y html como lo realizaria amigo?
Muchas gracias!! muy bueno el tuto!!
me sirvió demasiado!!!
Increible tutorial!tengo un gran problema. he hecho el menu con inicio, servicios,... y una vez que inserto la imagen en dreamweaver no me aparece debido a las medidas que existen en css, como se la medida exacta para modificarlo en css?? he probado la regla de photoshop pero no es del todo exacta.. o si?? jaja
aver si me puedes echar una mano y gracias por todos tus aportes!
Fue muy facil crear un menu siguiendo tus instrucciones, solo tengo una duda, se puede anidar el menu, para que muestre otro submenu con la misma funcionalidad que el menu anterior?
Claro que se puede, solo te toca jugar un poco más con CSS.
Saludos.
muchas gracias me ayudo a comprender bien como funcionan, pero tego una duda, hay algunso menus que se descargan y solo modificas el esqueleto html con lo que deseas y aparece la imagen del menu y sobre él los textos, como se hacen estos?, gracias de nuevo
Acá solo expliqué una forma de hacer el menú, pero también puedes usar solo la imagen como fondo del menú, y encima el texto. Si quieres mantener el texto, solo tienes que quitar esto
text-indent:-9999px;