Como crear una imagen de portada de Facebook que se vea genial en móvil y PC

Por Natalia En Clave Productiva

El 9 septiembre, 2020

¿Has revisado tu foto de portada de Facebook desde el móvil?

Si quieres tener una buena presencia online, es básico que todos tus perfiles sociales ofrezcan la mejor apariencia posible desde cualquier dispositivo. 

¿Sabías que más del 90% de usuarios acceden a Facebook desde sus móviles? Si subiste tu imagen de portada de Facebook desde el PC, quizá desde allí se veía genial, pero es muy posible que en el móvil salga descentrada o que algunos elementos salgan cortados. Y eso estaría perjudicando tu imagen online.

Te ofrezco este tutorial con vídeo-tutorial incluido para crear una imagen de portada de Facebook que se vea genial desde cualquier dispositivo. También tienes una «Plantilla para portada de Facebook» totalmente gratuita y sin registros 😉 Te vendrá muy bien para cambiar tu imagen de portada tanto en un perfil como en una página. ¡Vamos a ello!

 

NOTA: Tanto el tutorial como el vídeo-tutorial están hechos con la herramienta Genial.ly de creación de contenido, pero puedes seguirlo con cualquier herramienta que te permita definir en píxeles las dimensiones de la imagen que vas a crear. Recuerda que para descargar tus creatividades de Genial.ly necesitas tener una licencia de la herramienta. Aquí puedes ver los planes disponibles.

 

¿Qué tamaño tiene la imagen de la portada de Facebook?

Las dimensiones óptimas en píxeles son 851px X 315px, así que ese es el tamaño de la imagen que vamos a crear Y para que la imagen se vea perfecta desde cualquier dispositivo, definiremos la parte que va a ser visible en cada uno de ellos.  La zona visible en móviles tiene unas dimensiones de 640 x 360, así que tenemos que ajustar el contenido para que aparezca centrado dentro de la parte visible.

Y ya que estamos, el formato recomendado para tu imagen es JPG, aunque si vas a incluir letras, logos u otros elementos de colores planos, se verá mejor en formato PNG. Aquí puedes leer más sobre formatos de imágenes.

Volviendo al tema de las dimensiones: aunque Facebook incluye una recomendación sobre el tamaño mínimo (400px X 150 px), lo mejor es subir una imagen con las dimensiones óptimas recomendadas. Incluso si no quieres hacer ninguna creatividad y simplemente vas a subir una foto, puedes utilizar este tutorial para recortarla al tamaño que necesitas.

Según Facebook, la imagen «se muestra con una resolución de 820 píxeles de ancho por 312 de alto en ordenadores y de 640 píxeles de ancho por 360 de alto en smartphones.»

Teniendo esta recomendación en cuenta, vamos a crear una plantilla definiendo la llamada «zona de seguridad«, que es el recuadro dentro del que tiene que ir centrado el contenido importante, es decir, todo lo que no quieras que se vea cortado: slogan, logotipo, frase, foto, etc.

Tenemos que redimensionar el recuadro visible en móviles (640 px X 360 px) para que quepa dentro de 315 px (altura máxima de la imagen en PC). Con una sencilla regla de tres, descubrimos que el recuadro visible en móviles escalado a 315 píxeles de altura medirá 560 píxeles de ancho. Así que ya podemos definir la zona de seguridad:

 

Plantilla básica para crear tu imagen de portada de Facebook

¿Lo ves claro? Los usuarios que accedan desde el PC (cada vez menos) verán la imagen entera, mientras que los que accedan desde el móvil solamente verán lo qu eesté dentro del recuadro rosa del centro.

¿Y esto es todo? ¡No! Aún hay más. Porque además de la foto de portada, está la foto de perfil. La foto de perfil se superpone a la foto de portada, ocultando otra parte de la misma. Y la parte oculta es diferente en perfiles y páginas.

Por si no lo tienes muy claro, los perfiles de Facebook son de personas, y las páginas (las llamadas Fan Page) son de empresas. A continuación definiremos con mayor exactitud la parte de la portada visible en una Fan Page y en un perfil personal.

 

Imagen de portada para perfil de Facebook

Si estás creando la portada para un perfil personal de Facebook, fíjate en las siguientes imágenes.

La foto de perfil se ve superpuesta a la imagen de portada. Es redonda, con un diámetro de aproximadamente 170 píxeles en PC y 519 píxeles en el móvil.

Tanto en PC como en móviles, la foto de perfil es redonda y se muestra sobre la imagen de portada, pero con dimensiones y posiciones diferentes. Su diámetro en PC es de aproximadamente 170 píxeles y en móvil más o menos 520 píxeles. Además en el móvil tapa la imagen de portada hasta casi la mitad, mientras que en el PC solo cubre un pequeño trozo. 

En las imágenes a continuación la ves representada por el círculo rosa y el icono.

 

 

Imagen de portada en PC
maqueta de una imagen de portada de un perfil de facebook tal y como se ve en PC

 

Imagen de portada de perfil Facebook en móviles
maqueta de portada de perfil de Facebook tal y como se ve en el móvil

Así que si tienes todo esto en cuenta, la «zona de seguridad» se reduce bastante, y hacer un diseño se complica un poco. Para acertar necesitas una imagen que siga siendo consistente aunque se oculte una parte. Por ejemplo un estampado que repita el mismo patrón o un paisaje.

 

La plantilla «definitiva» para crear la imagen de portada de tu perfil personal quedaría así:

plantilla para crear la imagen de portada de facebook teniendo en cuenta la superposición de las fotos de perfil en diferentes dispositivos

En esa imagen, los círculos representan la superposición de las fotos de perfil y la parte visible del recuadro rosa es la zona de seguridad.

¿Quieres que te eche una mano con las imágenes de tus Redes Sociales?

Imagen de portada para Fan Page:

Si la portada es para una Fan Page lo tienes mucho más fácil: la foto de perfil no se superpone y no tapa ninguna parte de la imagen. Para hacer esta portada puedes utilizar tranquilamente la plantilla básica con la zona de seguridad de 560×315 píxeles. 

Tutorial y consejos para crear tu imagen de Portada:

Si necesitas una opción para crear gratis tu imagen de portada de Facebook, utiliza Canva. Esta herramienta permite utilizar dimensiones personalizadas, su manejo es muy sencillo y puedes descargar el resultado de tu trabajo sin marcas de agua.

Eso sí, para hacer una buena foto de portada con un resultado profesional, yo utilizo y recomiendo Genial.ly. ¿Quieres saber por qué?

  • Porque además de establecer las dimensiones exactas de tus creatividades en píxeles también puedes definir la posición de los elementos de la imagen indicando sus coordenadas numéricas. Con esto consigues un resultado perfecto con mínimo esfuerzo. Alinear los elementos con precisión matemática es cuestión de segundos, mientras que con otras herramientas tienes que estar arrastrando los elementos, se tarda mucho más y no siempre queda bien. Que yo sepa, la única herramienta gratis de creación y edición de imágenes que ofrece esta posibilidad es Genial.ly.
  • Genial.ly ofrece un montón de recursos: Varias galerías de fondo, acceso directo a diferentes bancos de imágenes libres de derechos de autor… Además en el editor encontrarás un montón de funciones para personalizar estos recursos como quieras: filtros, selector de transparencia, recorte y máscaras de imagen…
  • ¡Su manejo es súper sencillo! Con Genial.ly consigues mejores resultados en menos tiempo. Si te dedicas a la creación de contenidos educativos o para Social Media, te la recomiendo de corazón. ¡Muy pronto te parecerá imprescindible.

¡Vamos con el tutorial!

NOTA: Ten en cuenta que en Genial.ly, las imágenes duplican su tamaño al descargarse. Es decir, si creas una imagen de 815 X 315 píxeles, al descargarla resultará de 1630 X 630 píxeles.

Seguirá viéndose bien y centrada, porque lo más importante son las proporciones, y éstas se respetan. La imagen más grande se verá del mismo tamaño pero con mayor calidad. Eso sí, tu perfil quizá tarde más en cargarse. Puedes elegir entre crear una imagen de la mitad del tamaño recomendado o escalarla cuando la descargues. Si no sabes cómo redimensionar una imagen, puedes utilizar este breve tutorial de GIMP

Por si no te gusta leer, te dejo a continuación la versión en vídeo:

Tutorial: crea una imagen para tu portada de Facebook que se vea bien en cualquier pantalla con Genially:

Si no conoces Genial.ly, te recomiendo esta Guía completa para aprender a manejarla. Te servirá para complementar la información que se ofrece en este tutorial. En cualquier caso es muy sencillo crear tu cuenta Genial.ly y empezar a trabajar.

1. Crea el lienzo con las dimensiones adecuadas

Haz clic en «Crear Genial.ly» y accederás al panel donde podrás seleccionar entre diferentes tipos de creatividades. Haz clic sobre «En Blanco» > Crear y apaga el botón de «Mantener proporciones» haciendo clic sobre él: lo verás resaltado en la imagen a continuación. Una vez desactivado, escribe las dimensiones en píxeles: 851 X 315.

pantallazo del panel Genially donde se ve como introducir las dimensiones de la imagen

2. Define la «zona de seguridad»

Haz clic en «Recursos» en el menú de la izquierda y selecciona un rectángulo vacío haciendo clic sobre él. Aparecerá en el lienzo.

Después haz clic sobre el icono de rueda dentada de la esquina superior derecha y activa el «Modo Diseñador» clicando sobre él en el recuadro. El modo diseñador sirve para definir numéricamente las dimensiones del elemento que esté seleccionado, y también su posición en el eje de coordenadas X, Y.

Cuando actives el modo diseñador, con el rectángulo seleccionado, introduce las dimensiones en píxeles. Igual que hiciste antes, desactiva «Mantener proporciones» y escribe 560X315, tal como se muestra en la imagen a continuación.

pantallazo de Genially donde se ve como activar el modo diseñador para configurar las dimensiones de los elementos

Haz clic en «Aplicar cambios» y el rectángulo se redimensionará. Mantén el clic sobre él y mueve el ratón para arrastrarlo al centro del lienzo. Aparecerá una guía, una línea azul cuando el elemento esté centrado. Ten en cuenta que ahí tienes que meter todo lo que no quieras que salga cortado.

Si estás creando una portada para un perfil y lo ves necesario, puedes añadir también un círculo y un semicírculo donde se va a superponer la imagen de perfil. Fíjate en la plantilla que tienes más arriba.

Cuando termines de hacer tu diseño, elimina el rectángulo que delimita la zona de seguridad y después ya puedes descargar tu imagen. ¡Seguro que te ha quedado genial!

 

 

Mas ideas para diseñar tu portada de Facebook

  •  Elige un fondo atractivo:

Uno de los recursos más socorridos para este tipo de imagen son los fondos. Si haces clic en «Fondo» en el menú lateral podrás configurar como fondo:

-una imagen que subas de tu PC

-una imagen que añadas pegando un enlace

-un color plano: puedes seleccionar uno de los colores predefinidos o introducir un código hexadecimal.

-un fondo de cualquiera de las tres galerías que se ofrecen: la de Genial.ly, la de Unsplash y la de Pixabay, todos ellos libres de derechos de autor.

 

  • Utiliza el efecto «filtro», ¡es muy fácil conseguirlo!

Añade una forma cualquiera haciendo clic en «Recursos > Formas» y modifica su transparencia haciendo clic en el botón que ves arriba a la izquierda:

También puedes probar colores diferentes de filtro para ver cuál queda mejor. Con la transparencia realzas el texto o el elemento que desees mientras se sigue viendo el fondo.

¡Ojo! Aunque tú veas la imagen en dos dimensiones, cada uno de los elementos es una capa. Por eso, al añadir primero el texto y después el recurso que va a funcionar como filtro, el texto va a quedar detrás, Puedes modificar esto haciendo clic sobre el icono:  

 

Modificar la profundidad de los elementos es otro recurso para crear nuevos efectos. ¡Investiga!

 

  • Edita las imágenes recortándolas o añadiendo máscaras:

¿Tu creatividad incluye imágenes? Puedes recortarla haciendo clic sobre el icono  o bien añadir una de las máscaras de imagen disponible. Las encuentras haciendo clic sobre el icono situado junto al de recortar:   

Estos iconos, que aparecen arriba a la izquierda, solamente son visibles cuando seleccionas un elemento imagen en el lienzo. Estas son las máscaras que puedes elegir:

genially-mascaras-de-imagen

 

 

 

  • Busca el mejor resultado posible:

A veces un pequeño cambio supone una gran diferencia. Te recomiendo que cuando tengas el diseño más o menos decidido, clones varias veces la página y vayas creando versiones del diseño con pequeños cambios: el color de la tipografía, la posición de los elementos…  

Algo que va muy bien en estos casos es pedir una segunda opinión! Muestra las variaciones de tu diseño en casa o a algún amigo de tu confianza para elegir la mejor versión. 

Para clonar la página, haz clic en «Páginas» en el menú lateral. El icono «duplicar» aparece en la esquina superior derercha de cada página cuando pasas el cursor sobre ellas. También verás el icono «papelera», por si quieres eliminar alguna. Eso sí, nunca podrás eliminar la página que estás viendo en el lienzo.

¿Ya has terminado tu diseño? Haz clic en el botón azul que pone «Listo», lo encontrarás en la esquina superior derecha. Aparecerá una ventana para seleccionar si deseas que tu creatividad sea pública o privada. Incluso puedes protegerla con una contraseña. Selecciona la opción que prefieras y vuelve a hacer clic en «LISTO».

Lo siguiente que verás es una ventana con las opciones visualizar, compartir y descargar, esta última solo en planes de pago. Descarga tu creatividad, súbela al espacio de tu portada y revísala desde todos los dispositivos.

Además de asegurarte que ningún elemento aparece cortado y que se ve bien encuadrada en PC, tablets y móviles, debes verificar que queda integrada estéticamente en el entorno de Facebook. ¿Queda bien? ¡Pues ya lo tienes!

 

¿Te ha gustado el tutorial? Al final me animé a crear la versión en vídeo aprovechando que necesitaba actualizarlo. ¡Tengo entendido que es lo que casi todo el mundo prefiere!

Por mi parte, consulto muchísimas veces este post. Lo hago cada vez que tengo que crear una imagen de portada de Facebook, porque como no lo hago a diario, ¡se me olvidan las dimensiones! Así que muchas veces echo mano de la plantilla. ¿Tú también? En ese caso, me alegro de que resulte útil.

Ya sabes que este post es para ti, así que si tienes preguntas o comentarios, me ayudarás a mejorarlo. También me gustaría que me dijeses si prefieres los tutoriales de vídeo, así me animaré a hacer más. 

 

Mucho ánimo y feliz creatividad 😉

 

Natalia En Clave Productiva
Natalia En Clave Productiva

Profesional del Marketing digital y marketing de contenidos en constante formación. Aquí comparto todo lo que voy aprendiendo o me parece interesante sobre Marketing Digital, Social Media y Mundo Online.

Quizá también te interese:

Como utilizar #Hashtag: herramientas, consejos y trucos

Como utilizar #Hashtag: herramientas, consejos y trucos

Los hashtag invaden las Redes Sociales y cada vez son más utilizados. Sin embargo, todavía existen algunas dudas sobre esto. ¿Qué es un hashtag y para qué sirve? ¿Cómo se utiliza? ¿Dónde está el hashtag en el teclado? En este post puedes resolver esas dudas y también...

Cómo dejar de administrar Fan Pages, grupos de WhatsApp y Analytics

Cómo dejar de administrar Fan Pages, grupos de WhatsApp y Analytics

¿Quieres dejar de administrar una página de Facebook, un grupo de WhatsApp o una propiedad de Analytics? En este post revisamos el procedimiento para eliminar roles de administrador de diferentes herramientas y redes sociales. Te servirá para eliminar tu propio rol o el de otros usuarios.

Como configurar tu canal de YouTube: Guía para optimizarlo al máximo

Como configurar tu canal de YouTube: Guía para optimizarlo al máximo

¿Tienes canal de YouTube? ¡Es muy recomendable! El vídeo es el formato preferido por la mayoría de los usuarios, así que este tipo de contenido es cada vez más importante. Una confesión: mi propio canal de YouTube está bastante abandonado. Y esto sucede porque...

2 Comentarios

  1. Hola, Carolina 🙂

    Efectivamente, no lo indico porque este valor es irrelevante en una imagen digital. Es algo importante si se va a imprimir la imagen, pero en una imagen para la portada de Facebook carece de importancia.
    Saludos,

  2. Lo único que no indica es la resolucíon que hay que colocar a la imagen (300 ó 72 dpi)

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Share This
Abrir chat
1
Hola :-) Estoy por aquí... ¿Cómo puedo ayudarte?