Diseñar un header de Facebook parece simple, hasta que abres tu pieza en el celular y descubres que el texto principal quedó cortado. En esta guía aprenderás cómo construir una portada en Photoshop respetando las restricciones de la plataforma, para que tu mensaje se vea completo en cualquier dispositivo.

¿Qué dimensiones tiene un header de Facebook y por qué importan?

Antes de abrir Photoshop, lo primero es revisar el brief y confirmar las medidas. Las dimensiones de las redes sociales cambian seguido, así que conviene consultarlas siempre en la fuente oficial de cada plataforma en lugar de memorizarlas.

Para la portada de Facebook en escritorio, la medida estándar es 820 x 312 píxeles en formato horizontal. El detalle clave aparece cuando alguien ve tu perfil desde el celular: la versión móvil recorta los extremos. En concreto, se pierden alrededor de 134 píxeles a cada lado, lo que significa que cualquier texto o logo que pongas ahí va a desaparecer.

¿Cuánto se corta de un header de Facebook en móvil? Aproximadamente 134 píxeles en cada extremo lateral. Todo elemento esencial debe ubicarse dentro del área central segura para garantizar visibilidad en todos los dispositivos.

¿Cómo configurar el lienzo en Photoshop para un header de Facebook?

Abre un nuevo documento con los parámetros correctos: 820 x 312 píxeles, 72 píxeles por pulgada y color RGB. Estas son las especificaciones estándar para piezas digitales que vivirán en pantalla.

Una vez creado el lienzo, el siguiente paso es delimitar las zonas seguras. Mantén presionada la herramienta rectángulo y haz doble clic sobre el canvas para abrir el cuadro de diálogo. Ahí defines un rectángulo de 134 píxeles de ancho por la altura que prefieras (200 px funciona bien). Dale un color llamativo para que sirva como referencia visual.

Duplica esa forma y ubica una a cada extremo del lienzo. Esa franja roja marca el área que no se verá en móvil, así que ningún elemento clave debe caer ahí.

¿Cómo activar las reglas en Photoshop?

Las reglas son tu mejor aliada para alinear con precisión. Para mostrarlas u ocultarlas usa Command R en Mac o Control R en Windows. Luego arrastra desde el borde superior o lateral para colocar guías que coincidan con las marcas de margen seguro que ya creaste.

¿Cómo reutilizar elementos de otra pieza para acelerar el diseño?

Si ya trabajaste antes una pieza digital con el mismo kit visual, no empieces de cero. Photoshop permite mover capas y grupos entre archivos abiertos arrastrando directamente desde el panel de capas hacia el otro lienzo.

También puedes hacer clic derecho sobre un grupo, elegir duplicate group y enviarlo a otro archivo. La ventaja de arrastrar es que ves el resultado en tiempo real y puedes ajustar la escala según las nuevas proporciones.

En este flujo, se traslada el fondo desde el newsletter previamente diseñado, ya que las medidas son similares. Eso ahorra trabajo de recortes y mantiene la coherencia visual de la marca.

¿Conviene duplicar texto o reescribirlo? Reescribirlo da más control sobre tipografía, kerning y color, aunque tarda más. Duplicar es ideal cuando solo necesitas reposicionar el mismo bloque sin cambios.

¿Cómo organizar capas y jerarquizar el contenido?

Mantener las capas ordenadas evita errores cuando la pieza crece. Crea un grupo llamado Textos y otro llamado Fondo para separar funciones. Al añadir un nuevo texto, asegúrate de moverlo al grupo correcto antes de seguir.

Para cambiar el color de un texto, selecciona la capa, haz clic en el ícono T y ajusta el color desde el selector. Repite este proceso con cada elemento (formas, tipografías, íconos) para alinearlos con la paleta de tu kit visual.

La jerarquía del mensaje también requiere decisiones. En el ejemplo, el orden de prioridad quedó así:

• El claim principal (Check out the new courses) en tipografía Red Hat Display Black.
• El refuerzo de marca con Platzi Marketing.
• La fecha, ubicada en una zona que podría quedar cortada en móvil.

Los elementos decorativos como líneas finas se sacrificaron primero, porque su ausencia no afecta la comprensión del mensaje. Si la fecha se vuelve crítica, conviene mover un call to action al centro inferior para garantizar visibilidad en todos los dispositivos.

¿Por qué visualizar la pieza en un mockup antes de publicar?

Un mockup te muestra cómo se verá la portada dentro del entorno real de Facebook, con la foto de perfil encima, el menú y el corte en móvil. Así detectas problemas de legibilidad o composición que en el lienzo plano pasan desapercibidos.

Antes de exportar, revisa que todo el contenido esencial esté dentro del área central segura, que la tipografía mantenga buen contraste con el fondo y que los grupos de capas estén bien nombrados por si necesitas iterar la pieza más adelante.

¿Qué elementos sueles dejar en los extremos de tus headers? Cuéntame en los comentarios cómo resuelves la jerarquía visual cuando el espacio seguro es tan limitado.