Cómo diseñar un banner de autopromo para tu blog con Powerpoint

Igual que la mayoría de las personas no se me da muy bien el tema del diseño. Para crear banners tengo un truco sencillo con el que obtengo resultados decentes.

Si eres diseñador no sigas leyendo. Te entrarán ganas de matarme y probablemente tengas razón. No quiero dar la sensación que el diseño gráfico sea fácil y que todo el mundo pueda hacerlo. El blogger medio no suele invertir en diseño porque no le da la importancia que se merece (mira quién habla) o simplemente no tiene los recursos para hacer esta inversión.

Diseño BannerDerechos de foto de Fotolia

Ya hace casi 4 años que propuse una manera sencilla para diseñar un banner sin Photoshop. Toca actualizar este por porque desde entonces he mejorado un poco el método. Te presento una manera sencilla para crear un banner para tu blog sin tener conocimientos avanzados de diseño, obteniendo un resultado más o menos aceptable (según mi propio criterio, claro…).

1. Elegir una foto llamativa como base para el diseño

Puedes compensar la falta de talento para diseñar banners decentes utilizando como base una buena foto. Lo ideal son imágenes con niños, personas o animales. En mi caso he elegido la foto de una chica joven con peinado llamativo y fondo rojo. Como ya sabéis yo tengo como proveedor a Fotolia pero también podéis utilizar fotos con licencia de Creative Commons utilizando p.ej. Flickr o directamente la búsqueda avanzada de Google imágenes.

Una foto llamativa como base para el diseño

Una foto llamativa como base para el diseño

Ayer por Twitter me dijeron que la chica de mi foto estaba desnuda pero yo estoy convencido de que lleva un top debajo (la foto esta aprobada por mi mujer así que me he arriesgado ;) ). Lo ideal es tener fondos limpios porque simplifican el diseño porque resaltan más los texto si se ponen directamente encima de la imagen. En mi caso he optado por una versión diferente.

2. Añadir textos y elementos visuales al banner

Una vez que tengamos la foto ahora toca añadirle texto. Antes hay que poner un cuadro encima de la foto para que respetemos las dimensiones del banner que queremos crear. En mi caso es muy sencillo porque el banner mide 200 por 200 pixeles. La relación es 1 por lo que únicamente tengo que tener en cuenta que el cuadro sea tan ancho como alto. En caso de tener un Robapáginas de 300×250 pixeles la relación sería 1,2. Si eliges un cuadro de 24 centímetros de ancho tiene que ser 20 centímetros de alto (24/20 = 1,2).

Powerpoint_diseño

Hay que tener en cuenta que podemos incluir únicamente pocas palabras dentro del espacio que tenemos disponible. El texto que pongamos se tiene que poner en letra grande porque en otro caso no se va a ver bien una vez que lo ajustemos a las dimensiones más reducidas de un banner. Hay que evitar el error de sobrecargar el banner con información. Su principal objetivo es llamar la atención y generar interés. A nivel visual puede quedar bien diferentes tamaños de letra tal como lo muestra el ejemplo de abajo. Hay que añadir también una llamada a la acción como la que se ve en la caja naranja.

3. Cortar la imagen para obtener las dimensiones adecuadas

Cuando hayas diseñado el banner en Powerpoint y has logrado un diseño que te guste, toca dar el próximo paso. Ahora copia todos los elementos y pégalos en un programa que te permita guardar en el formato adecuado y cambiar las dimensiones. A mí me gusta XnView por su sencillez.

Una vez copiado todo lo pegas ahora con “Editar/Importar desde el cortapapeles”. El próximo paso es hacer el corto dejando el cuadro fuera para que luego no se vea dentro del banner. Después vas a “Imagen/Cambiar tamaño” para poner los pixeles que encajan con el formato del banner (en mi caso 200 por 200). El último paso es guardar las imágenes en formato PNG. En JPG los banners pueden perder resolución y tener una especie de aspecto “sucio” sobre todo en la parte de las letras.

Diseño del banner con XnView

Diseño del banner con XnView

Ahora lo único que te falta es subir el banner a tu blog. Eso ya te lo he explicado en un post hace más de 1 año: Cómo crear una campaña de autopromoción dentro de tu blog de WordPress

Espero que te haya sido útil. Evidentemente se pueden hacer cosas muchas más chulas sobre todo si dominas Photoshop y estás cosas. Pero bueno, por alguna parte hay que empezar… ;)

¿Quieres ser afiliado para mi “Curso para bloggers”?

Me gustaría comentarte otra cosa más. En 2014 haré la última edición de mi “Curso para bloggers”. Quiero centrarme en otros proyectos pero hubo tantos lectores que me lo pidieron que lo haré una vez más. Si quieres colaborar como afiliado cobrando un 15% de cada venta (precio del curso 89 euros), ponte en contacto con josemaria “at” cursobloggers.com que me ayuda a gestionar el tema. A ver si tengo suerte y hacemos cosas juntos… ;)

  1. Carlos el post no me da más , tengo un defecto y es q mentir se me da de pena.
    Ya que mencionas proyectos un dólar está un poco parao no?
    Con las ganas q tengo de colaborar..
    Saludos

    Responder
    • No pasa nada Silvia, el de mañana espero que te guste más. Lo de 1dolar.org mejor te lo comento en privado en Valencia junto con Aridane pero creo que hay buenas razones para ello… Hay que dar un poco de margen de adaptación aunque para nosotros el tiempo pase muy lento, para el que está dentro todo va super rápido, te lo aseguro por vivirlo en primera persona… ;)

      Responder
  2. Hola Carlos, interesante forma de crear tus banners,la verdad es que con photoshop se puede hacer cualquier cosa pero hay que disponer de tiempo para aprender a usarlo y muchas veces no disponemos de ese tiempo.

    Un saludo

    Responder
  3. Hola Carlos.

    Otro programa interesante es Inkscape, lo utilizo para la hacer la parte que realizas con PowerPoint. Para recortar el banner a las dimensiones correctas también uso XnView.

    Un saludo,

    José María
    @jjimenez

    Responder
  4. Ya he mandado correo para hacerme afiliado, es un curso que no tiene desperdicio!

    Responder
  5. Hola CArlos!
    ESte artículo me va muy bien porque llevo días preguntándome como hacer un banner y parece que me hayas leído la mente y has hecho un post de como hacer un banner jeje. GRacias compi :)
    Un saludo!

    Responder
  6. Este artículo me ha venido muy bien porque tenía necesidad de crear un banner en uno de mis blogs y todavía no había dado con un tutorial de cómo hacerlo.

    Aprovecho esta circunstancia para informaros de la web para la que quería el banner. Hace referencia al proyecto de la nueva ley de seguridad ciudadana; pero hace poco también se ha modificado lo que coloquialmente se conocer como ley de piratería informática.

    Yo por siaca, guardaría esta web como referencia por lo que pudiera pasar. Supongo que sabréis que la guardia civil registró uno de los camerinos de una de las comparsas de los carnavales de Cádiz buscando no sé qué… pero la letrilla se las traía. :)

    No me enrollo más, aquí tenéis la web: http://nosomosdelito.net/

    Responder
  7. Genial post.
    Aunque sea entrometerme, solo quiero ampliar la información con el post que escribimos la semana pasada, espero que os sea útil.

    http://absocialmedia.com/programas-para-disenar-banners-geniales/

    Un saludo y disculpa el enlace.

    Responder
  8. Como consejo, utilizar inkscape es mejor por q es muy fácil de usar y es software libre.
    Photoshop no es difícil pero si es caro.

    Responder
  9. Muchas gracias por las explicaciones tan claras a los novatos como nosotros nos serán de gran ayuda, gracias Carlos . Acabamos de nacer y agradeceríamos todas las ayudas y sugerencias que nos pudierais dar, si os pasais pos nuestra casa os estaríamos muy agradecidos, saludos y gracias desde:
    emprendetodos.blogspot.com.es

    Responder
  10. Buenas noches Carlos,

    Muy buen artículo, eres un camaleón y por favor tómalo en el buen sentido de la palabra, ya que te adaptas a todo ;-) Presentas una forma super sencilla de hacer un banner, genial!!

    Para aclarar un poquito el tema, tengo que decir que photoshop es un programa complemente diferente Inkscape, ya que el primero es más bien un editor de imágenes a lo bestia y el segundo esta orientado para crear y trabajar con imágenes vectoriales, que en este sentido son las buenas para la web, ya que por mucho que cambien de tamaño no pierden calidad, estas definiciones están super resumidas, ya que ambos programas son magníficos, pero según mi punto de vista diferentes para compararlos . Si me estoy equivocando en las definiciones me gustaría que me corrigieran, por favor ;-)

    Saludos!!!

    Responder
  11. Me gusta la idea y es un buen tutorial y por supuesto me apunto a afiliarme vamos a ello.

    Saludos.

    Responder
  12. Muy interesante. Acabo de seguir los pasos para crear un pequeño banner. Para los que no tenemos ni idea de diseño gráfico este es un buen apaño ;)

    Responder
  13. Te soy sincera Carlos, soy una amante de power point, aunque a algunos les parezca retrógado ;-) Me ha salvado en muchas ocasiones.

    Justamente hoy, en mi Blog de Visual Marketing, acabo de lanzar una recopilación muy buena de quince herramientas online y gratuitas para realizar diseños, banners y todo lo que necesites para tu negocio online.

    Me ha animado a comentarlo porque amplía la información de este post. Espero que te guste. http://bit.ly/1ffO2dS

    Responder
  14. Con un poco de curro más.

    Crea varias diapos: una con la foto y otras añadiendo cada texto uno por uno.

    Extraes las imágenes y con http://ezgif.com/maker las unes. El programa es online, está genial para estos gif animados simples y encima no te pone watermarks.

    Y si lo unes a esto: http://javpast.blogspot.com.es/2012/02/siluetas-en-powerpoint-2010-para-torpes.html te evitas problemas de royalties si no estás subscrito a un repositorio de imágenes.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *