Como crear menú personalizado para blog en photoshop

Hola! Hoy venimos por la tercer entrega de esta sección, al parecer, los sábados se volvieron días de tutoriales :D En las dos anteriores entradas les enseñaba cosas muy simples y fáciles, tales como: "Como redondear los bordes de una imagen" y "Verificación de Palabras" que estaba más ligado a un inconveniente, por así decirlo, de los blogs.

En este día pasamos a algo un poquito más avanzado, vamos a aprender como crear un menú personalizado para blog en photoshop. Sí, un poco extenso, pero es lo que describe perfectamente lo que vamos a hacer. Un ejemplo de un menú de los que le estoy hablando es el que tengo yo actualmente:
Si gustan quedarse les enseñaré a hacer este, y tal vez otros menús más lindos, y por sobre todo, totalmente personalizables por ustedes. Manos a la obra, abrir ese photoshop, agarrar una taza de té o café y a trabajar!

Click para agrandar

Como primer paso para crear este menú para blogger, 100% personalizable en cuanto al diseño, necesitaremos ir a Archivo, Nuevo, y nos saldrá ese cartel, y solo vamos a proseguir a poner las medidas que queramos en nuestro menú. En mi caso, mide unos 870 x 46 px.

Click para agrandar

Una vez que tengamos el documento creado, vamos a proceder a pensar en las secciones que queramos que tenga y como distribuirlas, si queremos podemos apretar CTRL + R para que nos salgan las guías y ayudarnos con ellas para que el espacio sea más o menos el mismo. Procederemos a escribir las secciones antes mencionadas, (con cuidado que cada palabra sea en una capa distinta) pueden ser con diferentes letras, iguales, con colores distintos, como quieran. En las siguientes imágenes pueden apreciar varios motivos. Solo es cuestión de utilizar su imaginación.

Click para agrandar

Por ejemplo, en esta primera opción tenemos distintas fuentes, y distintos colores, realmente le da un toque muy lindo, obviamente que esto está hecho así no mas, pero si se toman el tiempo de distribuirlo bien realmente queda un resultado de diez.

Click para agrandar

Como verán, hay millones de formas de hacer al estilo que a ustedes les parezca, también si quieren le pueden agregar fondos como en la imagen, eso queda totalmente a su criterio.

Click para agrandar

Como primer paso, iran a la capa que seguramente quedó abajo de todo, y con un candadito, le hacen click y aprietan CTRL + J y se le duplicará, borran la que está bloqueada y trabajamos con la que vemos en pantalla. En la sección de borrar, buscamos la Herramienta borrador mágico, y, como la flecha muestra, hacer click en alguna parte blanca para que se borre el fondo y quede de cuadritos como lo estamos viendo en este momento. Ahora solo resta ir a archivo, guardar como, y no olvidarse, de guardar la imagen en PNG, así, de este modo, tengas el fondo que tengas, el menú no se superpondrá con él.

Click para agrandar

Una vez que tengamos nuestra imagen, o menú en formato PNG guardado, nos iremos a nuestro panel de blog, en mi caso es un blog secundario que tengo para hacer pruebas, y desde nuestro panel, vamos a "Páginas", y luego en "Página nueva". En ese lugar crearemos todas las secciones que escribimos anteriormente. "Reseñas" "Mi estantería" "Cenizas de Papel" y "Tutoriales" obviando "Inicio" porque no necesitaremos crear una página para esto.

Click para agrandar

Lo siguiente que haremos será, ingresar a ESTA PÁGINA, y una vez allí haremos click en Browse for File, luego escogeremos nuestro archivo *png y le damos a abrir. Una vez cargado le damos a Start Mapping y a seguir con lo demás!

Nos saldrá esta imagen, solo le damos a click to continue, si nos parece que lo que subimos está bien, sino pues, a editar hasta que les guste el resultado y volver a subir la imagen.

 Una vez que le hayamos dado a click to continue, nos aparecerá esto, lo que haremos será lo siguiente, con el botón derecho apretaremos y nos saldrá una ventanita, en ella seleccionamos Create Rect

Seleccionando, en el área que queremos que al apretar nos dirija a una sección, creamos un rectángulo, y donde está seleccionado de azul, tendremos que poner el link a donde queramos que nos redireccione.


Para eso, una de las opciones para conseguir el link es ir a al apartado de páginas, hacer segundo click en la página de la que queramos obtener el link y presionar en "Copiar ruta del enlace". Pegamos ese link en la imagen anterior, y le damos a Save. Realizamos este paso para todas las secciones, una vez que hayamos hecho esto, procederemos a lo siguiente:

Le damos segundo segundo click en cualquier lado de nuestro menú (como si fuésemos a crear un nuevo rectángulo) pero esta vez presionamos donde dice "Get Code", nos aparecerá una ventanita donde dirá "Map info" "HTML Code" "HTML OutPut". Escogemos la segunda opción HTML Code, y parecerá que te tenes que registrar o algo, pero no, bajas con la ruedita del mouse y abajo estará esperando el tan preciado código html, le damos a copiar y vamos corriendo a nuestro blog!

Vamos al apartado de Diseño, Añadir un nuevo gadget y seleccionamos "HTML/ Javascript" ahí pegamos el código que sacamos de la otra página y ubicamos nuestro menú que personalizamos nosotros mismos debajo de la cabecera.


Y... LISTO ya tenemos un hermoso menú creado con nuestras manos para presumir a todo visitante que ande por nuestro blog! Vamos que quedó muy lindo xD

Espero que les sirva y realmente les resulte fácil de hacer, ya me dirán, y si crean un menú con este tutorial, si quieren pueden mostrármelo para ver sus creaciones. Saben que cualquier duda me la pueden dejar en los comentarios.