Menu en PhotoShop

Buenas,

Depende de como tengas el menú se puede hacer de varias formas. De todos modos, la manera mas recomendable siempre es usar sprites de panera que tengas que usar solo 1 imagen para el menú entero.

Te dejo un ejemplo:

Esto es un menú en forma de sprite.

http://i47.tinypic.com/2u4hphy.png

Y esto es el código...

Código

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento</title>
<style type="text/css">
   .menu {list-style:none; padding:0px; margin:0px;}
   .menu>li {
      float:left;
      margin:0px 5px 0px 0px;
      background:url("menu_sprite.png") no-repeat;
      /* Debemos saber cuanto mide cada "item" */
      /* Si no son iguales unos a otros, hay que indicarlo en sus respectivas clases. */
      width:86px;
      height:38px;
   }
 
   .menu>li a {
      /* Debemos ocultar el texto del link */
      /* Ademas haremos que el <a> ocupe el 100% del item. */
      text-indent:-99999px;
      width:100%;
      height:38px;
      color:transparent;
      display:block;
   }
 
   /* Declaramos por donde empieza la posicion en la imagen */
   /* width / height */
   .item1 {background-position:-0px -0px !important;}
   .item2 {background-position:-89px -0px !important;}
   .item3 {background-position:-179px -0px !important;}
   /* El hover */
   .item1:hover {background-position:-0px -46px !important;}
   .item2:hover {background-position:-89px -46px !important;}
   .item3:hover {background-position:-179px -46px !important;}
</style>
</head>
 
<body>
   <div id="algo">
      <ul class="menu">
         <li class="item1"><a href="" title="Incio">Menu 1</a></li>
         <li class="item2"><a href="" title="Blog">Menu 1</a></li>
         <li class="item3"><a href="" title="Contacto">Menu 1</a></li>
      </ul>
   </div>
</body>
</html>

El demo lo puedes encontrar aquí: http://jsfiddle.net/SGZzV/

PD: Pues eso, combina las imagenes en 1 y usas sprites =) xD

Saludos