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.

Share this:

, ,

COMENTARIOS

19 comentarios:

  1. Muy bueno el tutorial!
    Yo ni idea de como se hacia la barra de menu... XD
    Un saludo!

    ResponderEliminar
  2. Gracias! Muy buen tutorial, espero lo sigas haciendo todos los sabados!

    ResponderEliminar
  3. Yo tengo uno con html pero quizás intente hacer este...
    ¡Buen tutorial!
    Un beso :)

    ResponderEliminar
  4. Buen tutorial Mati! Yo descubrí esto hace un tiempito pero no lo supe hacer hasta hace unas semanas jaja xD

    ResponderEliminar
  5. Que buen tutorial! No tenía ni una mínima idea de hacerlo. Me viene bárbaro.
    Muchas gracias!!!!

    ResponderEliminar
  6. Graaciaas!! Está muy bien explicado y me servirá de mucho en mi futuro blog! n.n.
    Saludoos! :).

    ResponderEliminar
  7. Con el cambio reciente de mi blog, no creo que lo haga XD Pero muchas gracias, está muy bien explicado y creo que cuando quiera hacerlo, volveré a tu entrada :)
    Gracias y cuídate

    ResponderEliminar
  8. Muy buen aporte, amigo! Un saludo!

    ResponderEliminar
  9. De lujo! *-* Mil gracias por este tutorial :D

    ResponderEliminar
  10. Gracias! Me re sirvió! :D

    ResponderEliminar
  11. Holaa, que version de Photoshop usas??

    ResponderEliminar
  12. Hola!
    Muchas gracias por el tutorial!
    Una pregunta: ¿sabes si se puede hacer algo parecido, pero implementando un submenú?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola! Te soy sincero, no tengo la más pálida idea, lo compartí porque así lo hice yo y me resultó facil jaja, ya ponerle submenú no se.
      Un saludo! y mil disculpas!

      Eliminar
  13. Hola!! tengo una duda (es que no entiendo esto de blogger :/) como hago para cuando se hace click en "reseña" me lleve a todas las reseñas???

    saludos!

    ResponderEliminar
    Respuestas
    1. Hola, de la forma que yo lo explico, en el tutorial te dice como crear el apartado de reseñas. Una vez que tengas esa página tenes que construirla vos, ir poniendo los nombres de los libros con su respectivos enlaces manualmente.
      Saludos! (espero que se haya entendido).

      Eliminar
  14. Lo intenté pero al picar en cada una de las opciones no me dirige a cada sección , que hice mal?

    ResponderEliminar
    Respuestas
    1. Copiaste bien los links? utilizaste la página "Image maps"?
      Cualquier cosa escribime a mi página de facebook "Cenizas de Papel" y por ahí te puedo guiar mejor.
      Un saludo! :D

      Eliminar
  15. Re viejo el tutorial pero me re sirvió jaja gracias!

    ResponderEliminar