Hay tres tipos de encabezados que generalmente veo usados en las antiguas redes interweb: encabezados de navegación, encabezados de fotos completas y encabezados de alfombrilla de bienvenida. Si estás interesado en cómo hacer un encabezado de blog, tendrás que conocer los pros y los contras de cada tipo antes de que vayamos al meollo de la creación.

Encabezados de navegación

Los encabezados de navegación no están basados en fotos. Por ejemplo, en la parte superior de mi sitio web, tengo mi logotipo, además de enlaces a páginas importantes o formularios de suscripción. Echa un vistazo.

Los encabezados de navegación como estos son ideales si eres un fanático del minimalismo y quieres que la gente se centre realmente en tu escritura sin distraerse con las imágenes.

También es una excelente ruta para ir si es nuevo, no ha descubierto su marca o simplemente necesita ponerse en marcha en línea.

El diseño no está establecido en piedra: los encabezados de navegación se pueden diseñar de todo tipo. Probablemente hayas visto algunos en los que el logotipo está en el centro, encima de los enlaces de texto, o puede que solo tenga el logotipo sin enlaces (o viceversa).

Este encabezado a menudo vive en armonía con encabezados de blog adicionales (mi sitio también tiene otro encabezado debajo), como encabezados de fotos completos y alfombrillas de bienvenida.

Encabezados de foto

El estilo de encabezado de foto es muy llamativo y realmente lo atrae. Si quieres un encabezado de foto en tu blog, piensa en cuál será el tema. ¿Será una foto de una persona? Como usted, o usted y su familia, o alguna representación de su cliente ideal? ¿O será una foto con algún tipo de paisaje, patrón, dibujos animados/iconos o incluso un video?

Echa un vistazo a este ejemplo de AlexTooby.com. Alex usa una foto de sí misma más un poco de la idea de la alfombra de bienvenida con una fuerte llamada a la acción para inscribirse en su curso.

La foto funciona, tanto para los recién llegados como para los visitantes que regresan. ¿Por qué? Porque utiliza un par de elementos visuales sutiles (más sobre estos más adelante) que sirven para reforzar la fuerza de este encabezado. Ella está sosteniendo su teléfono, con la interfaz de Instagram burlada en él, y está mirando hacia el texto que quiere que leas. Su ojo es atraído naturalmente a su cara, luego a las palabras, luego al botón rosa brillante para hacer clic. Esto sería menos efectivo si estuviera mirando hacia el lado izquierdo de la pantalla.

Consejo profesional: Tener a alguien mirando «adentro» hacia la copia o el botón es un truco de diseño ninja que también puedes usar.

Los encabezados de fotos pueden crear un ambiente y ayudar a sus lectores a tomar medidas. Dado que los encabezados de fotos son grandes, bloquean otras distracciones en la página y ayudan a enfocar a los lectores en exactamente lo que quieres que hagan (como el botón de «Iniciar curso gratuito» de Alex).

Encabezados de alfombrilla de bienvenida

El típico «alfombrilla de bienvenida» que puede ver en Internet es una adquisición a pantalla completa, y hay herramientas que lo ayudan a hacer esto.

O, si no desea hacerse cargo de toda su página, también puede configurar una parte para que actúe como una alfombra de bienvenida o un formulario de suscripción para algún regalo especial que esté ofreciendo. ¿No estás seguro de cómo se vería eso? Echa un vistazo a la imagen de abajo de mi sitio web. Estoy ofreciendo un curso electrónico gratuito que quiero que todos los visitantes vean primero para poder construir mi lista de correo electrónico con la audiencia adecuada para futuros correos electrónicos y promociones. Las entradas de mi blog aparecen debajo de esto para que los visitantes puedan desplazarse hacia abajo para ver mis últimas publicaciones.

Ahora que ha visto los tres estilos diferentes, es hora de hablar sobre la creación de un encabezado de blog para su sitio web.

Cómo hacer un encabezado de blog que se vea con marca

Sé que el término «marca» suena oficial e intimidante, ¡pero no temas! En realidad, es bastante fácil si te centras en un par de cosas clave. Es decir, colores (que a menudo se encuentran en su logotipo)y fuentes.

Consejo profesional: Prepare una guía de marca para usted en una carpeta para que pueda realizar un seguimiento de esta información (junto con su logotipo) para acceder fácilmente en cualquier momento.

Incluso si no haces una guía impresa elegante, puedes anotar esta información en una nota adhesiva y mantenerla en tu monitor. ¡Te ahorrará mucho tiempo a largo plazo! Ahora, vamos a desglosar algunos elementos de diseño.

Elija sus colores

Es posible que tenga algunos colores que haya elegido para usar para su marca, pero un buen lugar para comenzar es con su logotipo. Los colores de su logotipo son excelentes para usar en el encabezado de su sitio web, marca y blog. La consistencia es la clave: si presenta un rosa fuerte, quizás sus fotos tengan un elemento de rosa o un molde rosado general, o quizás use blanco y negro y extraiga el color de otras maneras.

Aby de YouBabyMeMummy.com hace esto maravillosamente insertando una hermosa versión a todo color sobre su logotipo como una superposición en una foto en blanco y negro de ella con su hija. Este encabezado de foto realmente te atrae hacia su historia de una manera audaz y atractiva. Haga clic en su sitio si desea ver más ejemplos de imágenes impresionantes a pantalla completa.

Y si todavía estás tratando de averiguar qué colores usar en tu marca, ¡este artículo sobre psicología del color es muy revelador!

Seleccione una fuente

Incorporar una fuente elegante o de marca directamente en su encabezado puede ser una forma realmente relevante y rápida de transmitir su mensaje. Como en esta imagen única y llamativa de Luci ByLucinda.co.uk.

Este paisaje marino encaja perfectamente con su marca, que incorpora muchos elementos naturales y muestra su ambiente elegante pero descarado. ¡No hay Times New Roman para esta dama! También tiene una forma inteligente de mostrar sus enlaces de redes sociales en el lado derecho en una franja rectangular verde claro. Conecta la navegación superior con la foto grande y en negrita y ayuda a bajar la vista por la página de una manera intencional.

Puedes encontrar algunas fuentes realmente divertidas y gratuitas en línea de lugares como Font Squirrel y Dafont. Muchas de estas fuentes gratuitas están integradas en programas como Canva y PicMonkey. Sin embargo, dado que son gratuitos, hay una mayor probabilidad de que alguien más (incluso un competidor) pueda estar usando el que desea.

Si quieres usar fuentes más elegantes en el cuerpo o en los titulares de tu sitio web (es decir, no en una imagen), deberías tomarte un tiempo para aprender sobre Google Fonts. Y para obtener orientación sobre qué fuentes usar para el diseño web, consulta estos tres mandamientos.

Incorpora elementos visuales

Al componer el encabezado de tu blog de marca, debes pensar en qué elementos visuales quieres incluir. Hemos revisado ejemplos que utilizan un logotipo, una foto y un botón transparente grande.

Jen de ToastMeetsJam.com hace precisamente eso. No se limitó a caer en una tabla como la que tendría en una hoja de cálculo aburrida, sino que usó fuentes artísticas y excelentes junto con sus campos de formulario y un botón circular de «IR».

¿Ves cómo incorpora sin problemas su registro de correo electrónico en el diseño? No solo te está cautivando con la foto de ella misma con un aspecto animado y amigable, sino que también está aprovechando un fondo gris limpio para mantenerte enfocado en el texto y la forma. Sin patrones de distracción o imágenes que lo alejen de la tarea clave de completar ese formulario y seguir adelante. No podría estar más claro lo que necesitas hacer para conseguir su curso gratuito de cinco días.

Prepárate para diseñar

Has visto algunos ejemplos de excelentes encabezados de blog, pero ¿qué haces a continuación? Para empezar a trabajar en el encabezado de tu propio blog, necesitarás reunir algunas herramientas de diseño e información sobre el tamaño de la imagen.

Herramientas de diseño

Las herramientas de diseño esenciales para crear tu propio encabezado de blog personalizado no tienen que ser difíciles de usar o costosas. Pruebe algunos y vea con qué se siente cómodo, ¡y luego inténtelo! No te preocupes si se sienten incómodos al principio, mejorarás cuanto más los uses. Aquí hay algunos que puede comenzar a explorar, en orden de más fácil a más difícil.

Canva. Este es probablemente el más fácil del mercado, ¡y es gratis! Hay una versión de pago llamada Canva for Work si quieres profundizar, pero la versión gratuita es muy divertida y fácil de aprender. Es una herramienta de diseño basada en la web, por lo que solo tiene que iniciar sesión en el sitio web y usarlo directamente en su navegador.

PicMonkey. Si realmente te gusta editar fotos y jugar con filtros, vale la pena probar PicMonkey. Hay muchos efectos divertidos incorporados. Al igual que Canva, PicMonkey está basado en la web y tiene una versión gratuita más una de pago con funcionalidad adicional.

Photoshop. ¡No puedes mencionar el software de diseño y no mencionar Photoshop! Es un programa potente y puede hacer mucho más que solo hacer un encabezado de blog, pero definitivamente es genial para eso. Es una aplicación que descarga y pagará por suscripción mensual (también está disponible una prueba gratuita).

Como diseñador profesional, he estado usando Photoshop durante toda mi carrera y me encanta. La mayoría de mis lectores piensan que Photoshop es intimidante al principio, pero es completamente factible una vez que aprendes algunos conceptos básicos. Sin embargo, tengo que decir que desde que descubrí Canva, a menudo uso una combinación de Photoshop y Canva para hacer mis gráficos. Canva es tan divertido!

Consejo profesional: si elige el plan de fotografía de Adobe, puede obtener Photoshop + Lightroom por un costo mensual bastante bajo. No está mal.

Bolsa de palabras. Si te gusta hacer gráficos en tu teléfono, esto es para ti. Esta aplicación móvil no es gratuita, pero cuesta solo unos pocos dólares y tiene una versión para iOS y Android. Además, está conectado a un sitio de fotos de stock de Creative commons gratuito, por lo que nunca perderá las opciones de imágenes en el encabezado de su blog. Tiene todo tipo de colores, texturas y fuentes para elegir. Todo lo que necesita hacer es guardar su gráfico final en «la nube» o conectarlo a su computadora para que pueda cargarlo en su sitio.

Tamaños de imagen

Al crear el encabezado de tu blog, debes considerar el tamaño de la imagen en relación con la plataforma de tu sitio. El tamaño de tu tema de WordPress puede ser diferente de la página de Squarespace de la siguiente persona o del Creador de sitios web GoDaddy GoCentral. Estas son algunas cosas a tener en cuenta:

Dimensiones en píxeles. Los tamaños generalmente se enumeran como un número de ancho por un número de alto y en dimensiones de píxel. Por ejemplo: 1000×400 (o 1000px x 400px) significa que la imagen tiene 1000 píxeles de ancho por 400 píxeles de alto.Resolución

. Para Internet, su resolución es fácil: ¡siempre es de 72! Las resoluciones más altas, como 300, 600 o más, son para impresión. Las resoluciones de pantalla para monitores son siempre de solo 72. Por lo tanto, utilizando las dimensiones de nuestro ejemplo desde arriba, su imagen final sería de 1000px de ancho por 400px de alto, 72 ppp (o ppp).

Tipo de archivo. Los archivos PNG nunca pierden calidad, sin importar cuántas veces los guarde, pero son más grandes en MB (megabyte). Los archivos JPG (jpeg) se pueden guardar a diferentes niveles de calidad para que pueda mantener un tamaño de archivo (MB) pequeño, pero cada vez que los guarda, pierden un poco de calidad. A.el archivo jpg que se guarda dos veces se ve bien, pero después de guardarlo cinco o 10 veces, comenzará a verse pixelado y granulado.

Optimizar significa guardarlos para que sean más compactos con un tamaño de archivo más pequeño, pero con cuidado para no perder calidad. Puede hacer esto fácilmente utilizando un sitio web gratuito llamado TinyPNG. Mira cómo el lindo panda comprime tus imágenes de una manera que las mantiene con un aspecto fabuloso, ¡pero te ahorra megabytes!

Cómo hacer un encabezado de blog en Canva

1. Regístrese para obtener una cuenta.

2. Utilice dimensiones personalizadas.

3. Seleccione una foto libre.

4. Añade texto personalizado.

5. Personaliza tu diseño.

6. Añade un logotipo.

7. Descarga el encabezado de tu blog.

Ahora la parte divertida! Profundicemos en hacer un encabezado de blog personalizado desde cero usando Canva. Estoy usando recursos que están disponibles de forma gratuita, por lo que puedes hacer esto por tu cuenta junto conmigo. Simplemente regístrese para obtener una cuenta gratuita y estará listo para comenzar.

Aquí está el encabezado del blog que haremos:

1. Regístrese para obtener una cuenta.

Una vez que te registres para obtener una cuenta en Canva, llegarás a la página Crear un diseño donde querrás hacer clic en Usar dimensiones personalizadas en la esquina superior derecha.

Utilice dimensiones personalizadas.

Rellene el ancho y la altura deseados en los campos que aparecen y seleccione» px » para píxeles. Después de eso, haga clic en el Diseño! botón.

Un proyecto nuevo aparece con una pantalla en blanco y la pestaña Diseños seleccionada a la izquierda. Tenga en cuenta que el nombre del proyecto no se especificó, por lo que se llama a sí mismo «1000px x 400px — Diseño sin título» en la parte superior junto al botón Compartir.

Seleccione una foto gratuita.

Haga clic en Elementos y elija una foto gratuita de las proporcionadas. Todos los gratuitos dicen «GRATIS» en la esquina inferior. También puedes subir tu propia foto, pero para nuestro tutorial trabajaremos con una de estas fotos gratuitas.

Una vez que haga clic en la foto, aparecerá instantáneamente en el área de diseño de su proyecto. Sigamos adelante y cambiemos el nombre de este proyecto mientras estamos en ello. Haz clic en el nombre temporal situado junto al botón compartir y escribe uno nuevo. Lo llamo «diarios de viaje» para mi blog de viajes ficticio.

Después de que la imagen se encuentre en el área de diseño, puede agrandarla arrastrando los círculos en las esquinas. Siga adelante y cambie el tamaño de esta imagen para que se ajuste al documento.

Agregar texto personalizado.

Genial! Ahora necesitamos un mensaje. Haz clic en la pestaña de Texto en la columna de la izquierda y verás algunas opciones para elegir. Puede hacer clic en arreglos de texto prediseñados en la sección inferior de esa ventana o en líneas de texto individuales en la parte superior. Siga adelante y haga clic en Agregar encabezado. Este texto aparece en la imagen, en negro por defecto.

¡Ahora para divertirse! Vamos a elegir una fuente diferente. Navegue por las opciones de fuente y elija cualquier cosa que le apetezca. Elegí uno estilo pincel. Es difícil ver en negro encima de esa imagen, así que cambiémosla a blanco. Haga clic en el cuadro de colores en la parte superior para mostrar las opciones de color y elija el cuadrado blanco. También ajusté el tamaño a 104.

A continuación, sigue adelante y arrastra ese encabezado en su lugar en la imagen para que esté más centrado.

Personaliza tu diseño.

Es un poco difícil de leer y enfocarse en el texto en este fondo ocupado, así que agreguemos un efecto de desenfoque. Simplemente haga clic en la foto de fondo para seleccionarla, luego elija Filtro y haga clic en Opciones avanzadas.

La ventana de filtro se expande para mostrarte algunas otras cosas que puedes hacer. Puede jugar con la saturación, el tinte de color, agregar una viñeta y más.

Haga clic en el punto negro en la sección Desenfoque y arrástrelo a la derecha. Elegí +22 en la escala de desenfoque.

Añadir un logotipo.

Ahora haz clic fuera de esa ventana para ver tu diseño. ¡Te ves bien! Ahora vamos a marcarlo agregando un logotipo. Puede cargar su logotipo haciendo clic en la pestaña Cargas a la izquierda y, a continuación, en el botón verde grande Cargar sus propias imágenes.

Elija un transparente .versión png de su logotipo para que no se aplane sobre un color sólido (a menos que el estilo de su logotipo esté dentro de un rectángulo blanco o algo así).

Cuando se cargue, lo verá en el área debajo del botón verde. Se queda ahí para que lo use en proyectos futuros. ¡Práctico! Ya tenía mi logotipo falso cargado, así que me desplacé hacia abajo para encontrarlo.

haga Clic en el logotipo, y luego aparecerá en su diseño.

Ahora puede redimensionarlo, moverlo e incluso ponerse elegante y jugar con la transparencia si lo desea.

Descarga el encabezado de tu blog.

¡Yay! Ahora su diseño está listo, por lo que todo lo que queda es descargarlo. Haga clic en el botón Descargar en la parte superior de la pantalla y elija el tipo de archivo. Por lo general, opto por el tipo PNG recomendado.

Una vez que su diseño se haya descargado en su computadora, puede abrirlo y admirarlo, luego cargarlo en su blog.

¡Y eso es todo! Espero que tengas un buen control sobre cómo hacer un encabezado de blog y la importancia de una imagen estelar. Ahora, puedes agregar uno a tu blog. ¡Feliz branding!