Como bloguero sabes que hacer contenido de calidad es una forma de diferenciarte y de que tus lectores no te abandonen. Trabajas con profesionalidad tus post, porque necesitas que tus contenidos destaquen sobre el resto.
Sin embargo, eres consciente de que hay demasiada información en la red que se comparte cada día y los usuarios están siendo impactados constantemente con nuevos contenidos.
Necesitas hacer algo distinto que añada valor a tus contenidos y que te ayude a diferenciarte.
¿Qué encontrarás aquí?
¿Cómo hacer para dar un paso más y diferenciarte de tus competidores?
Una de las maneras más significativas para añadir valor a tu negocio es a través del marketing visual, con la creación de una marca de calidad visualmente distinta para las entradas de tu blog.
Para mejorar la estrategia de marketing de tu blog, te recomiendo que inviertas tiempo en crear una plantilla gráfica atractiva para la cabecera como imagen principal de tu blog. Ésta es una estrategia que te ayudará a mejorar el branding.
Contar con una plantilla para la cabecera de tu blog, no sólo te ahorrará un montón de tiempo cada vez que publiques en tu blog, sino que también tendrás una marca coherente y consistente para tus lectores.
Conseguir una diferenciación visual es una de las estrategias que nos va a ayudar a sobresalir y a captar la atención de nuestros lectores. Mira más ejemplos reales de plantillas para cabeceras.
¡Estás en el mejor momento de tomar ventaja y sacarle partido!
Y es que en el mundo hispano, la gran mayoría de los bloggers no están creando estrategias de diferenciación visuales para destacar del resto.
He observado que en los Estados Unidos los bloggers que están triunfando sí lo están haciendo y te hablo de bloggers que llevan poco tiempo en este mundillo. Es una tendencia que crece cada vez más y te ayudará a marca una diferencia.
El objetivo de este post es enseñarte a diseñar una plantilla de una cabecera atractiva como imagen principal de tu blog y sin necesidad de ser un diseñador gráfico. ¿Te atreves a conseguirlo?
Por qué los bloggers en España no tienen una plantilla para la imagen principal de su blog
Todavía existen mucho miedos a lanzarte a hacer un diseño para tu marca. Tienes temor a diseñar imágenes porque piensas que la habilidad de diseño está reservada a un grupo privilegiado, que somos los diseñadores gráficos.
Y es cierto, en parte. Si quieres conseguir un diseño muy elaborado o complejo, es probable que no lo puedas obtener. Pero piensa esto: todos somos creativos, tenemos el hemisferio derecho que lo avala.
En diseño existe una regla que es la más importante: “keep it simple” o “menos es más”. Conseguir una plantilla de cabecera atractiva para tu blog no tiene por qué ser complicado, todo lo contrario.
Además, todos tenemos la capacidad de aprender las herramientas que hoy tenemos a nuestra disposición: herramientas de diseño online gratuitas. Han sido diseñadas para no diseñadores como tú. Son realmente fáciles de usar.
Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos y contenido que mantendrá a tus lectores enganchados:
- 77 Plantillas de títulos probados que multiplicarán los clics.
- Sacarás infinitas ideas para crear tus propios títulos.
- Con las palabras "mágicas" redactarás textos irresistibles.
- Vale para todo: blogs, tiendas online, redes sociales, etc.
Anímate, ¡que ya somos +50.000!
Otro factor que te echa para atrás es el factor tiempo. ¿A quién le sobra el tiempo? Estás convencido de que vas a emplear horas en diseñar una plantilla y no puedes darte ese lujo. La buena noticia es que una plantilla te va a ayudar a generar imágenes en solo segundos, porque no tienes que pensar. Lo tienes todo hecho, solo tienes que personalizar y listo.
Otra de las preocupaciones que escucho con frecuencia, es que la gente no quiere estar atada a un diseño, porque consideran que es limitante y puede parecer aburrido.
Todo lo contrario. En estos ejemplos te enseño varios modelos reales para tener un conjunto coherente de plantillas para la imagen principal del blog que representan a tu marca. Verás que algunas no usan una plantilla, sino más bien consiguen una sensación y coherencia utilizando una paleta de colores, la misma tipografía y un estilo definido de tu marca.
5 Beneficios de usar una plantilla para tu blog
En definitiva, ¿cuáles podrían ser las razones más importantes para utilizar una plantilla para la imagen de cabecera de tu blog?
Yo te voy a dar 5 razones que creo son de peso:
- Facilita mucho hacer un branding consistente y aumentar la reputación y autoridad de tu blog.
- Reconocimiento inmediato: cuando alguien ve una imagen de tu blog estará reconociendo que es un post tuyo.
- Generar más confianza: al dar una imagen mas profesional vas a transmitir confianza y eso ayuda a que vendas más. Eso es lo que todos queremos.
- Ahorro de tiempo: esto es vital. Vas a ahorrar mucho tiempo en el proceso y enfocarte en crear nuevos contenidos, que es lo que necesitas.
- Muy fácil de actualizar: una plantilla es rápida y fácil de modificar; esto está pensado para no diseñadores.
He escuchado historias de éxito de mis clientes que se han animado a contratar mis servicios como especialista en marketing visual para crear una plantilla para su blog. Es el componente visual olvidado de los blogueros, que te ayudará a diferenciarte y te llevará al siguiente nivel. El marketing visual favorece a los negocios y blogs, ya que ayuda a diferenciarse de su competencia y posicionarse inmediatamente como profesionales en su sector.
Piensa que darás una primera impresión favorable, que solo llevará segundos cuando vean la imagen principal de tu blog. Asegúrate de que esa imagen no solo refleje lo profesional que eres, sino que refleje también lo que es tu marca.
Manos a la obra: cómo diseñar una plantilla para la imagen principal de tu blog. Ejemplo real
Como ejemplo, trabajaremos una plantilla para la imagen principal del blog Ciudadano 2.0. Vamos a revisar los ingredientes que tenemos y veamos qué podemos conseguir.
Los ingredientes necesarios para hacer una plantilla son:
En el caso de Ciudadano 2.0 sabemos que utiliza Powerpoint para generar sus diseños.
Tenemos 2 colores para jugar, que son los colores de su logotipo: azul (código 2c3e50) y naranja (código d96709). Se utilizan imágenes de Fotolia o Shutterstock. La tipografía que utiliza suele ser Raleway. Y las imágenes son de 800 px de ancho. Tiene un logotipo que realizó hace un año. Lo tenemos casi todo, solo nos falta definir un estilo.
Lo primero que voy a hacer es olvidarme del Power Point y utilizar una herramienta online para hacer diseño.
Canva es una de las más conocidas y es gratuita. Te permite elegir entre plantillas ya diseñadas y modificarla o personalizarla como quieras.
Una reciente novedad que incorporaron es Canva for Work. Es la versión de pago y con ella puedes guardar las características de tu marca, colores, tipografías, etc., para diseñar tus imágenes con tu estilo. Además, esta versión Pro te ayuda a generar automáticamente y con solo un clic el diseño en todos los tamaños adecuados de cada red social. Es buenísimo, porque ahorras mucho tiempo y en segundos tienes todas las imágenes listas para compartir.
En este post puedes informarte mejor de cómo trabajar con Canva.
Befunky es otra herramienta que además de permitirte editar fotos como un profesional, puedes generar diseños nuevos.
Si eres curioso y quieres conocer otras herramientas para hacer diseño o edición de fotos, chequea esta lista de 14 herramientas de diseño online.
¿Cuál es el tamaño ideal para trabajar la plantilla?
No existe un tamaño ideal para todos los blogs. El tamaño de la plantilla para la cabecera es libre. La orientación del diseño, si es vertical u horizontal, depende de ti.
Si la red social Pinterest es uno de tus principales canales de comunicación, te recomiendo elijas la imagen principal en formato vertical, porque es el que funciona bien en Pinterest. Si por el contrario la red social con la que mas triunfas es Facebook, lo aconsejable es hacer una imagen horizontal. El ancho de la imagen va a depender de tu plantilla. Normalmente suelo hacer las imágenes entre 600 y 800 px de ancho y el alto al tamaño que quieras.
4 Ejemplos de plantilla para darte ideas
Como la mejor manera de aprender es practicar, voy a elaborar aquí 4 plantillas diferentes en total, con diferentes estilos, las cuales creo que te servirán para sacar ideas que puedan servirte para tu sitio.
Plantilla 1
Este diseño tiene un rectángulo transparente que cubre la foto y la tiñe de blanco. Lleva otro marco interior que trasluce la foto original. La tipografía es grande, va en mayúscula y minúscula en el naranja de la marca.
Lo primero que vamos a hacer es crear una cuenta en Canva y crear un espacio de trabajo del tamaño de la imagen para nuestro blog, desde “usar dimensiones personalizadas”:
Las imágenes que ves debajo de las opciones de diseño, son anteriores trabajos que he realizado en Canva desde mi cuenta. Conforme hagas nuevos diseños, éstos se mostrarán aquí.
Creamos el espacio de trabajo de 800 x 550 px.
En el menú de la izquierda tienes varias opciones; para subir la foto de tu diseños, tienes que hacer clic en “subir”. Como verás, ya he subido previamente los logotipos como la fotografía.
Para llevarla al espacio de trabajo, podemos arrastrarla o hacer un clic encima de la foto y listo. Como ves, está más pequeña que el espacio de trabajo. Como queremos que ocupe todo el tamaño del lienzo, debes ajustar el tamaño arrastrando desde cada esquina.
Puedes utilizar fotografías de una web de stock gratuítas o tomarlas tú, pero siempre utiliza un mismo efecto de retoque de fotos.
Vamos a ir al menú de la izquierda y vamos a elegir una forma. Haz clic en el menú “elementos” y una vez dentro, en el cuadrado “forma”.
Se van a desplegar muchas posibilidades. Mientras más te familiarices con la herramientas, más rápido sabrás cual es la forma que necesitas para tu diseño.
Para esta plantilla voy a elegir un recuadro que tiene un marco transparente dentro. Para encontrarlo debes hacer scroll o seguir bajando hasta localizarlo. Hacemos clic en él y se añade encima de nuestro diseño.
Como ves, en cada extremo hay unos controladores desde donde puedes ajustar el tamaño del recuadro hasta reducirlo o agrandarlo. Lo agrandamos hasta que ocupe el tamaño de la foto.
Al hacer click en el recuadro, se abre una ventana de diálogo y en el triangulito de la derecha se despliegan mas opciones como, por ejemplo, hacer este elemento transparente.
Como no quiero que quede blanco 100%, sino que sea transparente para poder ver la fotografía que hay debajo, le daré un 66 % de transparencia. Para eso arrastro el circulito hacia la izquierda, y mientras lo hago me va a indicar el número de porcentaje de la transparencia.
Es momento de añadir texto para escribir el título del post. En el menú de la izquierda vemos la opción “T Texto”, hacemos clic y se abren unas opciones. O bien vamos añadiendo de uno en uno el título o podemos elegir un formato de texto prediseñado (más abajo). Para nuestra plantilla vamos a añadir “titulo”.
Escribimos nuestro título y, para poder darle diferente tamaño a ciertas palabras, debemos añadir líneas separadas de esas palabras. Desplegamos las distintas tipografías que tiene la herramienta y elegimos Raleway y el tamaño adecuado.
Algunas líneas de texto serán en light, familia regular o familia bold. Eso te da bastante juego para diseñar con la tipografía.
Procedemos a darle color a la tipografía de uno de los que conforman nuestra marca. Pinchamos en la rueda de color, luego en el signo “+” y se abre otra paleta de colores, donde podemos añadir el tono exacto si ya lo conocemos.
En este ejemplo optamos por el color naranja de la marca de Ciudadano 2.0.
Este diseño de plantilla tiene 2 grosores distintos de tipografías, para diferenciar algunas palabras del título. Además, he reducido el tamaño entre líneas (el interlineado), en la opción “espaciado de texto” --[Símbolo] “line heigth” a 1.0. Esta alternativa te permite juntar más las líneas entre sí para que el texto no ocupe demasiada altura y no se vea tan separado.
El siguiente paso será añadir un elemento de diseño en la carpeta llamada “línea” para separar el logotipo del título del post. Se despliegan muchas posibilidades.
Vamos a cambiar el color de la “línea” por el azul corporativo de Ciudadano 2.0. Y añadimos el logotipo que ya habíamos subido anteriormente.
Una de las ventajas que consigues trabajando con Canva, es que además de ser muy fácil de usar, te guarda todos los diseños que has trabajado en tu cuenta personal. Por eso, cuando tengas que hacer la próxima imagen de cabecera para tu blog, lo harás en menos de 3 minutos. Solo tendrías que entrar abrir la plantilla y cambiar el título y la foto.
Trabajar una plantilla para la cabecera de tu blog significa realmente dar un paso adelante para ser más profesional y conseguir más y mejores clientes.
Plantilla 2: este diseño tiene una zona naranja transparente, para colocar el título del post y otra zona naranja muy clarita para que el logotipo se vea bien al ir encima de la foto. Hay ocasiones como ésta en las que necesitamos un recurso para que el logotipo no pase desapercibido o se confunda con la foto. Para asegurarme de que la zona naranja clarita combina con otro tipo de fotografías he utilizado la misma plantilla y he probado con 3 fotos. Éste es el resultado. Me parece que combina perfecto.
Una característica de esta plantilla es que todos los textos del título van en mayúsculas pero en 3 tamaños distintos.
Lleva una franja azul en diagonal, tiene 3 profundidades distintas, y el corte del triángulo le añade cierto dinamismo; además, el que sea transparente deja ver la fotografía.
Desde mi punto de vista, el logotipo resalta bien, el texto se lee y hemos conseguido otra plantilla atractiva para el blog de Berto.
Vamos a ver cómo hacerla.
Para poder trabajar varios diseños en un mismo documento, lo que hago es duplicar el diseño 1, haciendo click en la opción “añadir una nueva página” debajo del diseño 1. Automáticamente se genera un nuevo formato con la fotografía de fondo, pero sin ningún elemento. Verás que a la derecha de la nueva página dice número “2”. Puedes trabajar en el mismo archivo todos los diseños que quieras.
Una vez que ya tengo mi segunda página empiezo a crear el siguiente diseño de plantilla.
Voy a añadir un triángulo que voy a personalizar con mis colores.
Como ves, ya tiene mis colores y ahora lo voy a hacer transparente.
Lo voy a pegar en la esquina inferior izquierda y voy a sacar fuera del área del diseño parte del borde del triángulo.
Tiene un 51% de transparencia. Ahora añado los textos del título y le doy formato al texto, como vimos en el tutorial anterior.
Toca agregar el logotipo. Como el logotipo tiene un tamaño grande, lo reduzco arrastrando los manejadores de las esquinas.
Me parece que el logotipo no va a quedar así porque el fondo se come el logo y no resalta adecuadamente.
Pienso que necesito algún color debajo que haga contraste y que ayude a que siempre se lea bien el logotipo. Si cambio la foto, y elijo una de colores claros, va a funcionar mejor, pero si tengo una fotografía de colores oscuros voy a tener el mismo problema.
Se me ocurre que puedo añadir otro triángulo que contraste con el naranja y que haga resaltar el logotipo. Voy a la zona de “elementos” y a “formas”. Selecciono este triángulo.
Lo arrastro bien abajo y lo giro un poco para que haga de fondo del logotipo.
Busco un tono degradado del naranja hacia el blanco para crear un color que se diferencie del naranja y que además combine con el logotipo. Envío este elemento hacia “atrás” para poder ver el logotipo.
El diseño ya está listo. Para descargarlo pincha en el botón arriba a la derecha “descargar”. Si es para la web puedes elegir una imagen jpg. Tienes 4 opciones.
La siguiente plantilla es muy fácil de lograr. Ya sabes cómo se insertan los elementos; ahora te voy a comentar cuáles han sido los pasos, sin enseñarte la secuencia gráficamente.
Plantilla 3:
Pasos:
- Subir la foto
- Añadir un recuadro blanco y hacerlo transparente al 51%.
- Subir una forma como la de la imagen y llevarla hacia fuera hasta que quede solo la parte que vemos.
- Elegir el color azul corporativo.
- Añadir la tipografía y darle el formato de nuestra marca.
- En “elementos” clicar en “líneas” y elegir este diseño. Colocarla hacia ambos lados de la última línea. Elegir un tono naranja corporativo y hacerla un 35% más clara.
Plantilla 4:
Pasos: Para hacer esta plantilla seguimos estos pasos:
- Subir la foto.
- Añadir un recuadro y pintarlo de azul corporativo. Ajustarlo al tamaño que vemos en la imagen.
- Hacer 3 bloques de texto: el primero tiene 16 px y es Raleway thin. El segundo tiene 40mpx y es Raleway Regular, se ha disminuido el interlineado. El tercer grupo de texto tiene 20 px y se ha ampliado la separación entre letra y letra. Esta tipografía es Raleway thin.
- Subimos otro recuadro y lo pintamos de blanco. Lo reducimos hasta el tamaño de la muestra. Le damos una transparencia de 88%. Subimos el logotipo.
- Insertamos un recuadro nuevo, lo reducimos hasta hacerlo tan delgado como la línea naranja arriba y abajo del título. Lo pintamos del naranja corporativo y lo duplicamos para llevarlo hacia abajo.
Como ves, no necesitas ser un diseñador exitoso para disfrutar de una plantilla. Será suficiente con usar una misma tipografía, los colores corporativos de tu marca y un estilo de fotografía similar en todas tus imágenes.
Después de escribir más de 3.000 palabras explicando con pasión cómo puedes aprovechar para hacer branding con tu blog, espero que te lleves nuevas ideas y que te pongas manos a la obra.
¿Utilizas una imagen de cabecera para tus post? ¿Qué resultados has notado? Comparte tu experiencia en los comentarios.
Hola
Me parece genial que ayudeis a crear recursos gratuitos para la construcción de sitios web-.
Cómo puedo saber el tamaño que debe tener el header de una web . Qué medidas son las adecuadas, o como puedo saber el tamaño más adecuado
Hola.
En primer lugar, muchas gracias por tanta ayuda desinteresada. Es de agradecer encontrar páginas así.
Y en segundo lugar, mi duda. Después de leer bien el tutorial sobre Canva, me lo he descargado para el iPad y no encuentro por ningún sitio el icono de medidas personalizas del que tú nos has hablado. ¿Me podrías ayudar?
Gracias.
Hola María Jesús,
La verdad es que yo solo la uso desde el ordenador de mesa, por lo que no sé decirte donde está esa función. Pero debería ser visible fácilmente.
Tendría que estar cerca de donde eliges el formato que quieres diseñar. Es una opción para indicar las medidas en caso de que necesites crear tu propio diseño. Suerte.
Un saludo.