Crear Banner para Blogger.


Una cosa que solemos encontrar en los blog o páginas web son los banner. Nos permiten enseñar de cierta forma el contenido que tenemos en nuestro blog captando la atención de quien visitan otros blogs si nos tienen afiliados. En definitiva es una forma estupenda de promocionar nuestro blog.
Para poder realizar un banner es necesario tener el programa Photoshop. Si queréis estos programas podéis buscar por internet o en youtube yo os dejo Photoshop online. 

Pasos para realizar el Banner:
El primer paso es tener preparadas y seleccionadas la imágenes que vamos a utilizar para realizar el banner. El segundo paso es pensar el tamaño que tendrá este ya que lo podemos hacer tan grande o pequeño como deseemos. Los banner que hay en mi blog tienen los siguientes tamaños:

155 Pixeles de ancho x 84 Pixeles de alto.
150 Pixeles de ancho x 100 Pixeles de alto.
100 Pixeles de ancho x 52 Pixeles de alto.






Una vez pensado el tamaño abriremos Photoshop. Haremos clic en Archivo y de nuevo clic en Nuevo, nos fijaremos bien de que este en Pixeles y cambiaremos las medidas por las que nosotros hemos elegido. El contenido de fondo lo podéis dejar blanco o transparente ahora haremos clic en ok.


Se creara la plantilla de nuestro banner, ahora si os fijáis os puede aparecer a la derecha en la opción de capas un candadito(esto no siempre sucede)el cual tenemos que desbloquear para comenzar a trabajar en la plantilla. Para desbloquear el candadito haremos doble clic sobre él, en la ventana que aparece haremos clic en ok.


Ahora comenzaremos a colocar las imágenes según el orden en que queremos que aparezcan en el banner, también podremos añadir texto a las imágenes etc.. de la misma forma que cuando editamos imágenes en Photoshop. Para añadir las imágenes a la plantilla haremos clic en archivo y a continuación clic en colocar, en la ventana que se abre buscaremos las imágenes a colocar. Este paso lo repetiremos con todas las imágenes que queremos añadir a nuestro banner.


Para colocar la imagen arrastraremos las flechitas hasta ajustar en la plantilla, después haremos clic en el icono de arriba a la derecha o en la tecla Enter.



Una vez colocadas las imágenes podréis cambiar el orden según os parezca, para ello solo hay que arrastrar la imagen desde la barra que se encuentra a la derecha donde aparecen todas ellas en la opción capas.


Ahora transformaremos el montaje en una imagen gif,con este tipo de formato daremos movimiento a nuestras imágenes. Para comenzar iremos a la opción ventana y haremos clic en animación.

Veremos como en la parte de abajo de Photoshop nos aparece una barra de animación en la cual veremos la imagen  que nosotros hemos añadido antes. Para ir creando el banner desmarcaremos todas las imágenes haciendo clic sobre el ojo que aparece al lado de cada una de estas en la opción capas, dejando solo visible la que queremos que aparezca en primer lugar.


Ahora crearemos un nuevo cuadrito desde la opción de abajo donde está la primera ventana, para ello haremos clic en el icono en forma de papelito junto a la papelera, a continuación ocultaremos la imagen que teníamos visible y haremos visible la que queremos que aparezca en segundo lugar.


Este paso lo realizaremos durante todo el proceso para las siguientes imágenes. Si nos equivocamos podemos hacer clic en la papelera que está al lado del icono en forma de papelito, para eliminar el cuadrito equivocado solo tenemos que seleccionarlo en la barra de animación donde aparecen los cuadritos de las imágenes y hacer clic en la papelera.

Ahora en la barra de animación seleccionaremos la opción infinito, para que cuando terminemos de crear el banner este en continuo movimiento en la web(nuestro blog),para ello solo tenemos que hacer clic en el extensible y elegir esta opción. También pondremos el tiempo que queremos para cada cuadrito de las imágenes, será la función que tendrá para ir cambiando de imagen en imagen, para ello haremos clic en el cuadrito en la barra de animación y clic en el extensible donde pone segundos(contra mayor tiempo más lento y contra menos tiempo más rápido irán las imágenes). 


Para ver el movimiento y velocidad del banner haremos clic en el icono de play, las demás opciones son igual que en un reproductor, stop, pausa.


Por último para poder guardar esto en formato gif, haremos clic en archivo y clic de nuevo en guardar para web y dispositivos.


En la ventana que aparece os fijáis bien si esta seleccionado el formato gif(dejaremos todo lo demás tal y como está)haremos clic en guardar.


En la siguiente ventana elegiremos donde guardarlo,si hacéis clic sobre el banner que habéis guardado lo abrirá vuestro navegador predeterminado. Por ultimo tenéis que subir el banner a un servidor de imágenes yo utilizo imageshack(es recomendable crear una cuenta para que no se eliminen las imágenes que subimos) después de subirlo solo tenéis que añadirlo a vuestro blog con un código HTML, este código lo encontrareis al lado de la imagen que acabáis de subir al servidor de imágenes es el llamado enlace directo. Ahora iremos a diseño y elegiremos HTML/JavaScript, copiáis el código que os he dejado en la ventanita que os aparecerá y sustituis el texto en rojo por el enlace directo que os ha creado imageshack. Recordad respetar las comillas cuando peguéis el código. Solo queda guardarlo y ya tenéis listo el banner. 

<a href="AQUÍ PONER VUESTRA DIRECCION DEL BLOG"><img border="0" src="AQUÍ PONER LA DIRECCION DEL ENLACE DIRECTO HTTP DE LA IMAGEN " /></a>

15 comentarios:

  1. Buenas! Necesito un poco de ayuda. En su día tenía un banner hecho con mybannermaker.com y, al cambiar la url del blog, he tenido que hacerme uno nuevo porque el antiguo no servía. Lo he hecho igualito al otro solo que cambiando una palabra de la imagen y, al pegar el código que me da la página de mybannermaker no me sale en la sidebar, por lo que la gente no puede copiarlo y pegarlo para llevárselo a sus respectivos blogs. Intenté hacerlo según tus instrucciones y no conseguí nada de nada. Sólo me sale la foto tal cual. No me sale la casilla con el código para que la gente lo pueda copiar. Alguna idea de cómo puedo solucionarlo?

    ResponderEliminar
  2. Una pregunta, como oculto la imagen del banner, para que la otra no me salga igual????

    ResponderEliminar
    Respuestas
    1. Hola vi tu comentario en mi blog lo que no me quedo claro es que quieres quitar un banner ya anterior para poner uno nuevo o como poner diferentes imágenes para crear el banner??.

      Para eliminar el banner anterior solo tienes que eliminar el HTML javascrip correspondiente a este en Diseño.

      Si quieres poner diferentes imágenes cuando crees tu banner hice en su momento el tutorial;


      http://decoratublogconlucia.blogspot.com.es/2012/10/crear-banner-para-blogger.html

      Si tienes alguna duda más pasa por el blog y déjame un comentario a ser posible mas concreto.
      Un saludo.

      Eliminar
  3. Hola amiga me dio mucho gusto conocer tu blog me ha servido y ayudado un montón lo pude bajar a la burbuja en el cursor y el ir asía arriba con la tete rita jejeje me encanto pero a este no le entro porque se me hace muy difícil.. quisiera hacer uno con una imagen en especial que tengo pero no me animo a crearlo.. bueno saludos y abrazoz <3

    ResponderEliminar
    Respuestas
    1. Es muy fácil asi que anímate solo tienes que practicar un poco y listo XD.
      Un saludo y gracias por la visita .

      Eliminar
  4. muchas gracias, me ha sido muy util ;) Lo necestiba para poner un banner ajeno.. pero con el codiguito final, todo solucionado!! Ya que estoy ... me quedo.. qu elo mismo redecoro mi blog ;) jejej de hecho, te invito a que te pases por allí http://mimundodebaldosasamarilla.blogspot.com.es/ :) Un saludo!

    ResponderEliminar
  5. Me encanto tu blog, fácil y practico, gacias por compartir tus conocimientos.Saluditosss!!

    ResponderEliminar