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:

Bots en Twitter: estos son mis favoritos

Bots en Twitter: estos son mis favoritos

脥ndice: 1. Adoro Twitter 2. 驴Qu茅 son los bots en Twitter? 3. 隆Te presento a mis bots favoritos! Thread Reader App Tweet Explain Bot Video Downloader Bot Recu茅rdame Bot 4. Bonus: C贸mo detectar bots en Twitter   驴Qu茅 son los bots en Twitter y para qu茅 sirven? En...

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.

4 Comentarios

  1. Muchas gracias, aprend铆 y resolv铆 sobre mi fan page de Facebook.

  2. 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,

  3. 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.

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?