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

Por Natalia EnClaveProductiva

En 17 octubre, 2018

portada de facebook-principal

 

¿Has revisado tus perfiles en Redes Sociales desde móvil y PC? ¡Es muy importante! Por ejemplo, más de la mitad de usuarios acceden a Facebook desde el móvil. Si cambias tu foto de portada de Facebook en un PC, puede que la veas genial, pero que después en en el móvil se ve descentrada o cortada.

Para tener una buena presencia online es necesario que todos tus perfiles y páginas ofrezcan una excelente apariencia, tanto en móvil como en PC o tablet. ¡Revisa tu perfil desde todos los dispositivos! Si necesitas sustituir tu foto de portada de Facebook, te vendrá muy bien este tutorial.

Vamos  ver como crear una imagen de portada de Facebook que se vea bien en todos los dispositivos. Te explicaré como distribuir el contenido en la imagen para que no salga cortada y también veremos algunas ideas para crear tus diseños.

Además encontrarás en el post la «Plantilla para Portada Facebook«: te vendrá genial tenerla a mano cuando quieras cambiar la portada, tanto si se trata de la portada de tu perfil como de tu página.

 

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

Según la información de Facebook en su página de Ayuda, las dimensiones en píxeles de la imagen son 820px X 312px. Pero una cosa es el tamaño de la imagen, y otra la parte que va a ser visible en cada dispositivo.  En el móvil se verá una imagen de 640 X 360 px.

Por eso es necesario ajustar el contenido para que aparezca centrado dentro de la parte visible en ambos dispositivos.

Facebook recomienda que la imagen tenga 851 píxeles de ancho por 315 píxeles de alto. Además recomienda el formato JPG, aunque si vas a incluir letras o tu logo, se verá mejor en PNG.

Pero volviendo a las dimensiones: aunque existe una recomendación sobre el tamaño mínimo para que se cargue el archivo (400x150px), lo mejor es crear directamente una imagen con las dimensiones recomendadas.

Primero voy a explicar como he «calculado» la parte visible. Si no quieres liarte, ve directamente a la plantilla 🙂 Pero te dejo explicado el proceso, porque así podrás seguirlo para crear imágenes de portada de otras Redes Sociales. Solamente necesitas conocer las dimensiones de la zona visible en un dispositivo y en otro.

Después sigue estos pasos:

  1. La parte visible en móviles, que es, como hemos dicho, 640×360,  tiene que caber dentro de la imagen resultante.
  2. Como la altura del tamaño recomendado es 315, una imagen de 360px de alto no cabría. Por eso vamos a escalar las dimensiones de la zona visible en móviles. Para escalar imágenes yo siempre utilizo GIMP. Respetando las proporciones, a una altura de 315px le corresponden 560 px. Así que la parte visible en móviles tendrá unas dimensiones de 560px X 315px
  3. Lo que no quieras que se vea cortado debes encuadrarlo en un ancho máximo de 560px en el centro de la imagen. Fíjate en la plantilla:

 

Plantilla para crear tu Portada de Facebook

portada de facebook-plantilla

 

¿Verdad que se ve claro? 🙂 El usuario que accede desde el móvil solo verá lo que haya dentro del cuadrado amarillo del centro.

 

 

La portada que estás creando ¿es para un perfil personal o para una Fan Page?

Si estás creando la portada para un perfil personal de Facebook, observa cuidadosamente las imágenes a continuación. La foto de perfil saldrá superpuesta a la imagen de portada. Se muestra redonda, con un diámetro de 170 píxeles en ordenadores y de 516px en móviles.

  • Desde el PC, la foto de perfil se muestra en la esquina inferior izquierda de la portada. Las coordenadas exactas de su posición son X 18, Y 174. En la imagen está representada por el círculo amarillo.

portada de facebook- perfil personal desde pc

 

  • En móviles, la foto de perfil se mostrará en el centro de la imagen, abajo del todo, como ves a continuación. Solamente ocupa la mitad de su altura, el resto queda fuera de la portada. Es el semicírculo amarillo que aparece en la siguiente imagen:

 

portada de facebook- perfil personal desde móviles

 

 

Teniendo en cuenta que la foto de perfil ocultará diferentes partes de la imagen, según se visite tu perfil desde PC o desde móvil, la plantilla sería algo así:

 

portada-de-facebook-perfil-plantilla-final

 

Los círculos de color violeta representan las partes de la imagen que quedarían ocultas tras la foto de perfil, según se vea en móvil o PC.

Como ves, esto complica bastante el diseño de tu portada, porque la parte visible de la imagen varía según el tipo de dispositivo desde el que se visite tu móvil. Esto no pasa con las portadas de Fan Page, ya que la foto de perfil se muestra aparte, y el diseño resulta mucho más sencillo.

Para no complicarte la vida, te propongo que utilices una imagen que no pierda consistencia aunque se oculte una parte. Descarta imágenes con foco central. Suelen funcionar bien fotos de paisajes, o con estampados que repiten el mismo patrón.

 

 

Si la portada es para una Fan Page es más fácil, ya que la foto de perfil sale fuera de la portada y no tapa ninguna parte de la imagen. Quienes la vean en un ordenador la verán completa. Pero desde el PC solo se verá el recuadro del centro. Tienes que crear un diseño que tenga sentido en ambos casos. Esta es la que tengo yo como foto de portada de la Fan Page de EnClaveProductiva.

 

portada-de-facebook-fanpage-enclaveproductiva

 

Consejos para crear tu imagen de Portada:

Necesitas utilizar una herramienta con la que puedas configurar las dimensiones exactas de las imágenes que vas a crear. Si quieres una opción para crear gratis tu imagen de portada de Facebook, utiliza Canva. Permite utilizar dimensiones personalizadas, su manejo es muy sencillo y puedes descargar el resultado de tu trabajo sin marcas de agua.

Pero si quieres hacer una buena foto de portada con resultado profesional, te recomiendo Genial.ly. ¿Quieres saber por qué?

  • No sólo puedes establecer las dimensiones exactas de las imágenes que creas en píxeles. También puedes definir la posición de los elementos de la imagen indicando sus coordenadas numéricas, de forma que se consiguen resultados perfectos. Es decir, puedes alinear diferentes elementos o definir la separación entre ellos con precisión matemática. Y esto, que yo sepa, no lo ofrece en versión gratuita ninguna otra herramienta de creación de imágenes.
  • Genial.ly ofrece una galería de fondos y recursos, y su editor tiene cantidad de funciones para que puedas personalizarlos como quieras: filtros, máscaras, transparencia…
  • ¡Es muy fácil de utilizar! Te permite obtener excelentes resultados en menos tiempo. Para mí, vale la pena aprender a utilizarla a fondo si creas habitualmente contenidos educativos o para Redes Sociales. No necesitarás emplear demasiado tiempo gracias a su excelente usabilidad. ¡Muy pronto te parecerá imprescindible!

La versión gratis de la herramienta no permite descargar la imagen, solamente compartirla. Pero para utilizarla como foto de portada necesitarías descargarla. Si te dedicas a crear contenido en imágenes, te compensa invertir en una buena herramienta. Aquí puedes revisar los planes disponibles.

¡Veamos ahora el tutorial paso a paso!

 

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

¿Es la primera vez que trabajas con Genial.ly? Te recomiendo echar un vistazo a este tutorial básico sobre la herramienta. Tienes una presentación interactiva que muestra las principales funciones del editor.

Inicia sesión en tu cuenta, haz clic en «Crear Genial.ly» y, selecciona: «Para interaccionar > Media > Media en blanco«.

portada de facebook-crear

 

Y ya caes directamente en el editor, con tu lienzo en blanco en el centro.

 

1 – Configura el tamaño de la imagen:

Para ello haz clic en «Fondo» en el menú de la izquierda (1) y en «Tamaño del lienzo» (2), en la parte inferior de la pestaña.

portada de facebook-configuracion-pagina

Desactiva «Mantener proporciones» (3) haciendo clic sobre el botón que ves destacado en la imagen e introduce los valores de anchura y altura en píxeles: 851 X 315 px (4). Haz clic en «Aplicar Cambios«.

Y por último, haz clic dentro del lienzo para que se cierre el menú lateral y poder empezar a trabajar cómodamente.

 

OJO: Desde esta última actualización de Genial.ly, las imágenes duplican su tamaño al descargarse. Es decir, si creas una imagen de 815 X 315 píxeles, cuando la descargues tendrá 1630 X 630 píxeles. No tiene importancia, ya que lo primordial es que se respeten las proporciones. Si no quieres que sea una imagen tan grande (tardan más en cargarse) puedes optar por crearla de la mitad del tamaño recomendado, o por escalarla cuando la descargues.

 

2 – Define la parte que será visible desde el móvil:

Vamos a delimitarla pintándola de otro color. Haz clic en el menú lateral izquierdo en «Recursos > Formas» y selecciona el cuadrado. Haz doble clic sobre él para que se sitúe en el centro del lienzo. También puedes hacer un clic sobre él y arrastrarlo al área de trabajo.

Ahora vamos a darle las dimensiones apropiadas: haz clic en el icono «Configuración» de la esquina superior derecha portada de facebook-configuracion-icono

Se abrirá un «pop-up» con tres pestañas: Selecciona la de la derecha, «Mesa de Trabajo«, y activa el «Modo Diseñador«. Si el cuadrado que acabas de incluir en el lienzo está seleccionado, podrás incluir la altura y anchura deseadas: 560 x 315 px.

portada de facebook-dimensiones-elemento

 

3 – Centra el recuadro:

Haz clic sobre el rectángulo y arrástralo al centro del lienzo. Verás que aparece una guía de color azul cuando esté situado justo en el medio del lienzo. Dentro de ese recuadro tendrás que incluir todo lo que no quieras que se vea cortado.

 

Mas ideas para diseñar tu portada de Facebook

  •  Selecciona un fondo:

Haz clic en «Fondos» en el menú lateral. Verás una galería de fondos para elegir y la opción de seleccionar un color sólido. La herramienta te permite introducir el código hexadecimal del tono exacto que quieras, por si estás trabajando con colores corporativos, por ejemplo.  También puedes elegir una imagen de tu PC, de Pixabay (se accede directamente desde el panel) o de la galería Genial.ly.

 

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

Añade una forma cualquiera haciendo clic en «Recursos > Formas» y modifica la transparencia.

Por ejemplo, añade un cuadrado, píntalo de blanco y haz clic en el botón que ves arriba a la izquierda:

Modifica la transparencia y ve mirando como queda mejor: esto permitirá que se siga viendo el fondo y al mismo tiempo iluminará esa parte de la imagen. ¡Va perfecto para destacar tu slogan o cualquier otro texto!

 

  • Consigue diferentes efectos con la profundidad de los elementos:

Habrás observado que los elementos se superponen unos a otros en función del orden en que los vas añadiendo. Es decir, que unos están «delante» de otros. Puedes ordenar los elementos haciendo clic sobre el icono «Ordenar», que aparece en el menú superior cuando seleccionas un elemento:

Si haces clic sobre él, verás estas opciones:

¡Investiga! Jugar con la profundidad de los elementos te permitirá obtener nuevos efectos.

 

  • Prueba las máscaras de imagen o recórtalas:

Si incluyes una foto en tu creatividad, podrás aplicarle alguna de las máscaras de imagen disponibles. Haz clic en el botón  que aparece arriba a la izquierda siempre que seleccionas un elemento del lienzo que es una imagen. Podrás escoger entre diferentes máscaras, como ves a continuación

genially-mascaras-de-imagen

 

 

Haz pruebas. Si no te gusta como queda, siempre puedes volver al estado inicial haciendo clic sobre la opción «Ninguna«.

Cuando tienes un elemento de imagen seleccionado, junto al icono de «Máscaras de imagen» puedes ver el icono «Recortar«:  

Poder editar y modificar las imágenes sin salir del editor de Genial.ly es muy práctico: ¡selecciona la parte de la foto que te interesa y dale la forma que prefieras!

 

  • Busca el mejor resultado posible:

Cuando ya tengas el diseño»encarrilado», te aconsejo que clones varias veces la página que estás creando. Así podrás crear varias versiones de tu creatividad incluyendo pequeñas variaciones. Y si puedes, ¡consigue una segunda opinión! Mostrar las variaciones a algún amigo o en casa te ayudará  elegir la mejor versión de tu creatividad.

Para clonar la página, haz clic en «Páginas» en el menú lateral. Al «apoyar» el cursor del ratón sobre la página, aparecerán dos iconos: el de «duplicar página» y el de «papelera», por si quisieras eliminarla.

Haz clic en el de «Duplicar página» varias veces, tantas como variaciones quieras crear.  portada-de-facebook-duplicar-imagen

Las copias de tu imagen irán añadiéndose al final. Prueba con diferentes colores, composiciones y diseños hasta dar con un resultado que te satisfaga plenamente. Eso sí, recuerda que debes encuadrar «todo lo importante» en el centro, dentro del cuadrado que añadimos al principio.

 

Imagen del ejemplo:

En esta imagen he utilizado los siguientes recursos:

  • He seleccionado uno de los fondos de la galería de Genial.ly, uno con efecto «gradiente»
  • He añadido un cuadrado blanco con las dimensiones visibles en móvil y lo he centrado en la imagen. Le he modificado la transparencia al 40%
  • He ido a «Media > Pixabay» y he introducido «Facebook» en el buscador para encontrar imágenes relacionadas con este tema. He seleccionado tres de ellas y les he aplicado diferentes máscaras. Además también he recortado dos de ellas para que tuviesen proporciones cuadradas.

Cuando termines tu creación, selecciona descargar haciendo click arriba a la derecha. Súbela a Facebook y revísala desde móvil, tablet y PC para estar seguro de que ha quedado perfecta. Observa también qué tal se integra dentro del entorno de Facebook, con los botones y CTAs que aparecen alrededor. Asegúrate de que no hay información importante cortada ni escondida, y de que la calidad y el encuadre de la imagen han quedado como querías.

 

¿Qué tal te ha ido el tutorial? Este es uno de mis posts que yo misma consulto con más frecuencia. Al fin y al cabo, aunque hago bastantes portadas de Facebook, no es algo que tenga que hacer cada día, y se me olvidan las dimensiones.  ¿Te pasa lo mismo? Echa mano de la plantilla cada vez que lo necesites, ¡saldrás rápidamente de dudas!

Te animo a crear tu propia portada siguiendo este tutorial. Y si te lías o tienes dudas, ya sabes que puedes escribirme 🙂

Mucha suerte y buen trabajo 😉

 

enclaveproductiva-portada-de-facebook

 

Quizá también te interese:

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

Como publicar en Instagram desde PC: ¡Online, gratis y muy fácil!

Como publicar en Instagram desde PC: ¡Online, gratis y muy fácil!

¿Buscas una app gratis para publicar en Instagram desde PC? Estos días ando muy ocupada con un proyecto que me exige, entre otras mil cosas, publicar en Instagram desde PC. ¿Por qué desde PC? Pues por varias razones. Entre ellas, que necesito traducir los textos antes...

Crowdfire: ¿Qué ha pasado? Te cuento todas las novedades

Crowdfire: ¿Qué ha pasado? Te cuento todas las novedades

  Crowdfire era una herramienta fantástica para gestionar tus perfiles de Twitter, Facebook e Instagram, entre otras Redes Sociales. Y digo era porque, aunque la herramienta sigue existiendo, se han suspendido muchas de sus características. ¿Quieres saber qué ha...

0 comentarios

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.

Abrir chat
1
Hola :-) Estoy por aquí... ¿Quieres comentarme algo?
Powered by