Hace tiempo que quería compartir este tutorial , me lo habéis pedido en más de una ocasión y ahora que tengo tiempo os lo comparto.
Es un poco largo ya que hay que crear con Photoshop los botones y después subir la imagen al blog o a un servidor de imágenes y también aplicar botón a botón el código HTML para que nos redireccionen de forma individual los botones que hemos creado a la página que elijamos.
Podemos personalizarlos ya sean con texto como lo he aplicado yo a mi blog , con imágenes o con botones eso ya sera a vuestro gusto.
Para que no os de problemas como siempre os recomiendo que sigáis paso a paso el tutorial.
Vamos a comenzar con el tutorial:
Lo primero de todo tenéis que tener personalizado vuestro blog con un Fondo y por supuesto activada la opción de páginas , si no sabéis donde está tenéis que ir a Diseño y seleccionar añadir un gadget y aquí seleccionáis cabecera de página. Tiene que estar colocado en la parte de arriba de diseño.
Ahora prepararemos la plantilla para adaptar los botones a nuestro blog. Dependiendo de si tenéis un blog de 2 columnas o 3 columnas sera más o menos larga, aunque también la podéis hacer justo del tamaño de la cabecera.
Necesitaremos Photoshop yo utilizo el Cs5 aunque también en otras versiones podéis utilizar las mismas herramientas básicas que en este.
Si no tenéis el programa podéis buscarlo en Youtube hay tutoriales donde encontrarlos de forma gratuita y también como utilizar las herramientas básicas de Photoshop.
Prepararemos Photoshop abriéndolo.
Iremos a nuestro blog y presionaremos la tecla del PC llamada Imp Pan Pet Sis, esta situada arriba a la derecha del teclado.
Ahora iremos de nuevo a Photoshop y seleccionaremos Archivo,Nuevo y clic en OK.
Veremos que se ha creado una capa, si os fijáis a la derecha justo debajo de donde pone fondo hay un candadito en el cual haremos doble clic para desbloquearlo y poder seguir trabajando. Clic de nuevo en ok para confirmar. Como veis el candadito ha desaparecido.
En edición haremos clic en Pegar donde nos aparecerá la captura de pantalla que hicimos antes con la tecla del teclado llamada Imp Pan Pet Sis.
En la barra de herramientas de nuestra izquierda encontraremos una herramienta llamada Herramienta Recortar, haremos clic sobre ella para seleccionarla. Si por una casualidad no esta a la vista en vuestra barra de herramientas, solo tenéis que hacer clic con el botón derecho del ratón sobre la quinta herramienta que os aparezca en la barra de herramientas y veréis un extensible con las herramientas ocultas.
Una vez seleccionada la herramienta recortaremos en la imagen el trozo deseado para nuestra plantilla, yo en mi blog no la hice muy ancha.
Presionaremos el botón izquierdo del ratón para ir seleccionando la zona a recortar.
Con el puntero del ratón y presionando a la vez que seleccionáis los cuadraditos pequeños que veréis en las esquinas y en el centro del rectángulo de recorte podréis moverlos para hacer mayor o menor el trozo a recortar.
Puede pasar que al querer recortar os equivoquéis no pasa nada solo hacéis clic sobre el rectángulo seleccionado con el botón derecho del ratón y seleccionáis cancelar. También veréis la opción de recortar.
Yo suelo recortar con la palomilla que veréis en la barra de herramientas en la parte de arriba, a la derecha.
Para trabajar mejor ocultaremos el ojito que tiene la capa e iremos a la barra de arriba en photoshop donde haremos clic sobre Vista y clic en la opción Encajar en pantalla.
En la barra de herramientas que hay en el lateral izquierdo encontraremos una llamada Herramienta Rectángulo, esta en la posición 18. Si no la encontráis realizáis los pasos que explique antes para ver las herramientas ocultas.
Una vez seleccionada la herramienta presionaremos con el puntero del ratón sobre la plantilla, veréis que se va formando un rectángulo, de esta forma haremos un botón. Podéis darle el tamaño que deseéis aunque os recomiendo que no sea muy grande.
Ahora podemos aplicarte un color si no os a aparecido con el o poner una textura.
Si en la primera opción os aparece ya con color y lo queréis cambiar podéis seguir los pasos que veremos a hora para cambiarlo.
Haremos doble clic sobre la capa que encontraremos a la derecha de photoshop llamada Forma, la veréis seleccionada de color azul.
En la ventana que nos aparece seleccionaremos la opción Superposición de colores.
Para cambiar el color solo tenéis que hacer clic en el cuadrito de color que veréis en medio de la ventana y seleccionar el que mas os guste en la ventana que os aparecerá para aplicar el nuevo color.
Por último para confirmar el color solo tenéis que hacer clic en ambas ventanas en OK.
Ahora veremos como aplicar una textura si no queréis darle color.
Iremos a la barra de herramientas de la parte de arriba, haremos clic en Archivo y clic en Colocar. En la ventana que aparece buscaremos la textura a aplicar. La seleccionaremos y haremos clic en colocar. Ajustaremos la textura sobre el botón y clic en la palomilla para confirmar. Para que quede justo con la forma del botón haremos clic sobre la capa que se ha formado a la hora de colocar la textura,la encontrareis con las anteriores en la parte derecha y clic sobre ella con el botón derecho del ratón. Ahora de las opciones que nos aparecen en la nueva ventana elejiresmos Crear mascara de recorte.
El siguiente paso sera unir la capa del botón y la capa de la textura, de esta forma las unificaremos. Seleccionaremos la primera capa y presionando la tecla Control seleccionaremos la segunda. Veréis que han quedado las dos en color azul, ahora haremos clic sobre una de ellas con el botón derecho del ratón y seleccionaremos la opción Combinar Capas.
Ya tenemos creado nuestro primer botón. Si habéis decidido solo aplicar un color como vimos antes no tenéis que realizar el paso de combinar capas.
Ahora solo tenemos que duplicar nuestro botón para obtener los que necesitemos, lo haremos de la siguiente manera.
Haremos clic con el botón derecho del ratón sobre la capa unificada que acabamos de crear, en las opciones que nos aparecen elegiremos Duplicar Capa y clic en Ok.
Seleccionaremos la herramienta Mover que es la primera que nos aparece en la barra de herramientas de la izquierda, como veis tiene forma de puntero y haremos clic sobre el botón para poder arrastrar el que acabamos de duplicar y colocarlo donde deseemos.
Si os fijáis donde se encuentran las capas en la barra de la derecha veréis que se ha creado una nueva capa encima del botón que combinamos antes, esta es la duplicada.
Por último ya solo nos queda aplicar el texto para terminar nuestros botones. Si habéis decidido solo aplicar texto para realizar el botón en vez de darle forma solo tenéis que hacer los primeros pasos del principio del tutorial saltando los de crear el botón. Ahora a partir de este punto ya podéis realizar vuestros botones solo con el texto siguiendo los siguientes pasos.
Iremos a la barra de herramientas de la izquierda y seleccionaremos la herramienta Texto horizontal es la herramienta en el número 16. Una vez seleccionada la herramienta presionaremos con el botón derecho del ratón sobre la zona donde queremos aplicar el texto, nos aparecera un recuadrito donde poder comenzar a escribir.
Podemos modificar el tipo de letra,color y tamaño, lo veréis en la barra de arriba justo debajo de Archivo.....
Si no veis bien el texto lo podéis ajustar en la ventana de photoshop seleccionando en la barra de arriba la opción vista y después Pixeles reales.
Ocultaremos la primera capa desmarcando el ojo de esta para que nos quede el fondo transparente, si no os convencen los botones pero si os gusta el texto también podéis ocultar el ojo de los botones.
Ya esta todo listo para guardar nuestra plantilla para ello iremos a Archivo y seleccionaremos guardar como, en la ventana que nos aparece seleccionaremos donde guardarlo y elegiremos el formato PNG para que nos quede el fondo transparente.
Mis plantillas han quedado así.
Os comento que es una plantilla para blog de 3 Columnas.
Ya comenzamos con la segunda parte del tutorial, ahora veremos como subir las imágenes PNG que hemos realizado a nuestro blog o a un servidor de imágenes.
Yo suelo subirlas al blog si no encuentro ningún problema, pero también podéis subirlas a un servidor de imágenes por ejemplo https://imageshack.com/ en este servidor tendréis que hacer cuenta de usuario aunque también podéis utilizar la cuenta de Facebook si tenéis.
¿Como subirlas a nuestro blog? muy fácil, iremos a crear una nueva entrada o desde dentro del blog veremos la opción llamada Entrada nueva.
Ahora en la entrada creada seleccionaremos Insertar imagen, clic en elegir archivos, ahora buscaremos la carpeta o lugar donde guardamos las imágenes en formato PNG y clic en abrir.
Esperaremos a que se carguen y las seleccionaremos con el puntero del ratón, ahora haremos clic en añadir las imágenes seleccionadas.
Seleccionaremos una imagen y haremos clic con el botón izquierdo del ratón sobre ella, de las opciones que nos aparecen haremos clic en Tamaño original, ahora haciendo clic de nuevo con el botón derecho del ratón seleccionaremos Copiar Url de imagen.
El siguiente paso sera abrir nuestro navegador y en la barra de arriba de búsqueda pegaremos la Url de la imagen que acabamos de copiar.
De está forma comprobaremos que está en el tamaño original de la imagen y que la Url de está es la correcta.
Ahora sin cerrar la pestaña que acabamos de abrir con la Url de la imagen abriremos una pestaña nueva e iremos a la siguiente página:
Desde esta página vamos a mapear botón a botón las Url de cada uno de ellos para obtenerlas de forma independiente.
Al igual que lo aplicamos en los botones se puede aplicar de la misma forma en imágenes,etc.
No hace falta registrarse en la página para hacer este paso.
Si os fijáis en la página donde pone Comience A Construir Su Mapa de Imagen, justo debajo hay una barrita donde pone Paste Url.... ahí es donde tenemos que pegar la Url de nuestra imagen. Así que para asegurarnos iremos a la pestaña del navegador donde la dejamos abierta y copiaremos la url de la barra de arriba.
Ahora la pegaremos y haremos clic en la barra que hay justo debajo cuando nos aparezca Start Mapping.
Veremos que se ha cargado nuestra imagen y haremos clic en la opción que aparece en pequeñito click to continue.
Veremos nuestra imagen cargada y unas opciones en color amarillo donde nos indica mas o menos lo que tenemos que hacer, haremos clic en close.
Con el puntero del ratón haremos clic con el botón derecho sobre el primer botón de nuestra imagen, veréis como se abre un menú donde seleccionaremos la primera opción llamada Create Rect. Con está opción iremos creando de forma individual unos rectángulos que serán las zonas donde aplicaremos el mapeo de la Url que pondremos a cada uno de nuestros botones.
La ventana que nos aparece para aplicar el enlace de la Url de la imagen la podemos mover a un lado para poder ajustar el rectángulo al botón.
Donde pone Map Url copiaremos la Url de la página donde queremos que se redirija ese botón.
Yo aplique a Inicio la Url de mi página principal del blog.
Una vez aplicada la Url haréis clic en Save para confirmar.
Veréis que conforme apliquéis los rectángulos y la Url de cada uno de ellos estos rectángulos se irán poniendo de color rojo.
Ahora haremos clic con el botón derecho del ratón sobre cualquier rectángulo de color rojo y seleccionaremos la opción Get Code. De esta forma obtendremos nuestro código HTML para poder aplicarlo a nuestro blog.
En la ventana que nos aparecerá haremos clic en la pestaña en la que pone HTML Code, más abajo veréis el código está donde pone HTML Image Map Code.
Ahora hay que seleccionar el código completo sin dejarnos nada y copiarlo.
Os recomiendo que no cerréis esta pestaña por el momento no sea que no se copie bien y tengáis que mapear la imagen desde el principio.
Como ya os dije al principio del tutorial es un poco largo de explicar pero ya nos queda poquito para acabar.
Ahora iremos a nuestro blog. Si recordáis al principio os comente que si no teníais aplicado el HTML de Paginas lo tenias que poner en vuestro blog.
Pues ahora lo tenemos que esconder para que nos funcione a la perfección el código HTML que acabamos de crear.
Como os he dicho es esconder no eliminar.
Iremos a nuestro blog y haremos clic en Diseño.
En Diseño haremos clic sobre la opción Añadir un gadget las encontrareis en varios sitios da igual donde la elijáis siempre y cuando luego lo arrastréis justo de bajo de Paginas que se encuentra arriba y seleccionaremos en la ventana que nos ha aparecido HTML/ javascript. Aquí pegaremos el Código HTML que hemos creado en Image Map y haremos clic en guardar.
Recordar bien donde creasteis el Html/javascrip para moverlo después.
Ahora iremos a Páginas, por defecto cuando se crea aparece justo debajo de la cabecera. Haremos clic en Editar y desmarcaremos las pestañas que nos aparezcan de las páginas creadas. Si tenéis alguna otra Url de alguna página que aplicasteis a páginas también hay que eliminarla.
El texto donde pone páginas también debemos eliminarlo.Por último haremos clic en guardar. Veréis que las páginas siguen en su sitio porque como os dije antes no hay que eliminarlas solo ocultarlas para que no se vean.
El siguiente paso sera colocar el HTML/Javascrip que creamos antes justo debajo de Páginas.
Si quereis ver una vista previa de como ha quedado arriba a la derecha del blog la encontrareis,.
Por último solo queda guardar los cambios en la plantilla.
Si no os gusta como ha quedado con eliminar el HTML/Javascrip que hemos puesto es suficiente ya que no hemos tocado nada de la plantilla interna de nuestro blog.
También podéis aplicar en Image Map otras URL que no sean las de Páginas, yo por ejemplo en la barra lateral del blog he creado unos botones donde al hacer clic sobre ellos os manda a las etiquetas que he aplicado a las entradas publicadas de mi blog.
Esto si lo queréis hacer es muy fácil.
Solo tenéis que ir donde tengáis las etiquetas, si no las tenéis en el blog puestas tenéis que hacer los mismos pasos que os comente para activar las páginas y hacer clic sobre la que deseéis, os redireccionara a la página donde estén y copiareis la Url para después ponerlas en la Url del botón que estáis creando en Image Map.
Bueno con esto ya estaría el tutorial terminado pero como seguro que a algún@ de vosotras os da algún problemilla el tamaño de vuestro diseño a la hora de aplicarlo en el blog os voy a decir como solucionarlo y así no hace falta que dejéis ningún comentario sobre esto en la entrada de la publicación.
Como ya os he dicho antes mis botones están realizados para un fondo con 3 columnas así que si queréis utilizarlos que para eso os los comparto no los podéis aplicar en fondos de 2 columnas por que os quedaran demasiado desajustados.
Podéis aplicar la solución que os doy ahora para ajustar los botones a un fondo de 2 columnas pero quedaran demasiado pequeños y la imagen un poco deforme.
Solución al problemilla:
Puede ocurrir que a la hora aplicar el Código HTML que hemos creado en Image Maps quede un poco desajustado y los botones no queden del todo en el lugar que deberían estar. Esto lo podemos solucionar ajustando un poco el ancho en el Código que se nos creo al aplicar las Url a nuestros botones.
Así que iremos a la pagina principal de nuestro blog y veréis que justo debajo de la imagen os salen unas herramientas para poder editar , hacemos clic en ellas y se abrirá la ventana con el código HTML/Javascrip.
Esto también lo podéis hacer desde Diseño buscando donde tenéis guardado el Código HTML/Javascrip, yo os explico hacerlo desde esta opción porque es más rápido de encontrar y editar.
Si os fijáis en el código que os he dejado en la imagen os he subrayado en color rojo lo que hay que modificar esto es el ancho de nuestra imagen y el tamaño en pixeles. Recordar que al ser personalizada la creación de los botones no tiene por que tener las mismas dimensiones y os pueden aparecer otras cifras. Así que lo que haremos ahora sera ir probando a reducir el numero para ir ajustando la imagen al blog.
Por ejemplo mi tamaño original seria de 702 y lo he cambiado por 650.
Para cambiar el número solo tenéis que seleccionar con el botón izquierdo del ratón el numero y borrarlo y después poner con el teclado del Pc el número que queréis aplicar.
Guardáis los cambios y listo.
Si no os convence como quedo volvéis a repetir los pasos disminuyendo más el número o aumentándolo.
Como podéis ver ya esta ajustada la imagen de los botones al blog.
Bueno este es el final del tutorial. Muchas gracias por vuestra paciencia ya que de nuevo digo que es super largo.
Espero os sirva y lo apliquéis sin problemas.
¡Muchísimas gracias Lucía! ¡Éste tutorial me ha ayudado mucho!
ResponderEliminar