# Diseño de banners: banners web, de redes y de impresión que se leen

[Canonical HTML page](https://gradiently.design/es/guide/banner-design)

Los banners son largos, finos y a menudo quedan medio tapados por una foto de perfil o recortados en el móvil. Diseña para esa forma y unas pocas palabras pueden sostener toda una marca. Aquí tienes todos los tamaños que probablemente necesitarás.

## The short version

- Los banners son formatos anchos, desde aproximadamente 2:1 en los banners de blog y de email hasta 6:1 en la portada de una página de empresa de LinkedIn.
- En un banner ancho la mirada lee de izquierda a derecha, así que las palabras deben ir en un solo bloque compacto y no repartidas por todo el ancho.
- La mayoría de los banners de redes quedan en parte tapados por una foto de perfil o recortados en el móvil, así que el contenido importante debe ir cerca del centro.
- Un banner de canal de YouTube mide 2560 × 1440 píxeles, pero solo la franja central de unos 1546 × 423 píxeles se ve en todos los dispositivos.
- Los banners impresos, como los roll ups, se leen desde varios metros, así que necesitan muchas menos palabras y una letra mucho más grande que los banners web.

Un buen **diseño de banners** trabaja con la forma en lugar de contra ella. Un banner es ancho y bajo, así que dale un solo bloque compacto de palabras, un titular corto y quizá una línea de apoyo, colocado donde nada lo tape, y deja que el fondo lleve el color por el resto del ancho. Comprueba antes el tamaño y la zona segura de cada plataforma: un banner de perfil de LinkedIn mide 1584 × 396 píxeles y pierde la esquina inferior izquierda bajo tu foto, mientras que un banner de YouTube mide 2560 × 1440 y en el móvil solo muestra una franja central.

## Tamaños de banner para web y redes

| Banner | Tamaño (px) | Forma | Qué lo tapa |
| --- | --- | --- | --- |
| Banner de perfil de LinkedIn | 1584 × 396 | 4:1 | Foto de perfil, abajo a la izquierda |
| Portada de empresa en LinkedIn | 2256 × 382 | Aprox. 6:1 | Logotipo, abajo a la izquierda |
| Cabecera de X | 1500 × 500 | 3:1 | Foto de perfil, abajo a la izquierda |
| Portada de Facebook | 1640 × 624 | Aprox. 2,6:1 | Foto de perfil, recortada en el móvil |
| Imagen del canal de YouTube | 2560 × 1440 | 16:9 | Solo el centro se ve en todos los dispositivos |
| Banner de Bluesky | 3000 × 1000 | 3:1 | Avatar, abajo a la izquierda |
| Hero de una web | 1920 × 1080 | 16:9 | Navegación en la parte superior |
| Banner de blog y cabecera de email | 1200 × 600 | 2:1 | Nada, pero a menudo se ve pequeño |
| Banner de tienda de Etsy | 3360 × 840 | 4:1 | Recortado en el móvil |

Tamaños de la lista de tamaños de Gradiently, que sigue el tamaño de subida recomendado por cada plataforma. Las guías por plataforma profundizan más: [tamaño del banner de LinkedIn](https://gradiently.design/es/guide/linkedin-banner-size) y [tamaño del banner de YouTube](https://gradiently.design/es/guide/youtube-banner-size).

- Banner de blog 2:1: 1200 × 600
- Cabecera de X 3:1: 1500 × 500
- Banner de LinkedIn 4:1: 1584 × 396
- Empresa en LinkedIn 6:1: 2256 × 382

Cuatro banners dibujados a escala. A medida que la forma se estrecha, el espacio para las palabras se reduce mucho más rápido de lo que crece el ancho.

## Cómo colocar las palabras en un banner ancho

La gente lee un banner como lee una línea de texto: de izquierda a derecha y deprisa. Repartir las palabras por todo el ancho obliga a la mirada a recorrer demasiado. Agrúpalas en un solo bloque, más o menos un tercio del ancho, y pon el titular lo bastante grande para leerse cuando todo el banner se reduce al ancho de la pantalla de un móvil.

Un banner ancho de LinkedIn con un titular corto en el lado derecho y un degradado que llena el resto

Un banner de perfil de LinkedIn con las palabras lejos de la foto de perfil, abajo a la izquierda.

Un banner de cabecera de X que anuncia episodios nuevos de un pódcast cada jueves sobre un fondo degradado

Una cabecera de X: una línea, un dato y nada importante en la esquina del avatar.

A esta altura, la jerarquía tiene que ser sencilla. Dos niveles suelen ser el límite: un titular y una línea pequeña encima o debajo. Si necesitas un tercero, probablemente pertenece al propio perfil. [Jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy) explica cómo el tamaño y el espaciado hacen este trabajo sin decoración extra.

## Zonas seguras y recortes

Cada plataforma recorta o tapa su banner de forma distinta en el ordenador y en el móvil. El enfoque seguro es el mismo en todas partes: deja que el fondo llegue de borde a borde y mantén las palabras y los logotipos en el centro del encuadre, lejos de la esquina donde está el avatar.

1. **Localiza la esquina tapada** En LinkedIn, X y Bluesky la foto de perfil se superpone abajo a la izquierda. Deja esa zona solo para el fondo.
2. **Cuenta con los recortes del móvil** Facebook y Etsy recortan los lados en el móvil. Mantén las palabras dentro de los dos tercios centrales del ancho.
3. **Usa la franja central de YouTube** Del encuadre de 2560 × 1440, solo la zona central de unos 1546 × 423 píxeles se ve en todos los dispositivos. Pon ahí el nombre y cualquier palabra.
4. **Comprueba a tamaño real** Súbelo y míralo en un móvil y en un portátil. Una vista previa en una herramienta de diseño no puede mostrarte la interfaz de la plataforma, y las plataformas cambian sus composiciones, así que revisa sus páginas de ayuda antes de un gran lanzamiento.

## Banners impresos: roll ups y carteles de eventos

Un roll up, normalmente de 850 × 2000 mm, plantea el problema contrario: es alto y se ve desde varios metros mientras la gente pasa. Necesita un logotipo y un titular en el tercio superior, a la altura de los ojos, muy poco en el tercio inferior, que queda oculto tras mesas y piernas, y una letra lo bastante grande para leerse desde el otro lado de la sala. Pregunta a tu imprenta qué resolución quiere; los banners grandes suelen imprimirse a partir de archivos muy por debajo de 300 ppp porque nadie los mira de cerca.

### Evita

- Un párrafo explicando lo que haces
- Palabras repartidas por todo el ancho
- Texto pequeño en la esquina tapada por el avatar
- Una foto cargada detrás del titular
- Los datos clave en la parte baja de un roll up

### Haz

- De cuatro a ocho palabras que digan quién eres
- Un solo bloque compacto de texto
- Solo fondo donde está la interfaz
- Una zona de color tranquila detrás de las palabras
- Logotipo y titular a la altura de los ojos

Para stands y escenarios, consulta [diseño de fondos para eventos](https://gradiently.design/es/guide/event-backdrop-design), y para formatos grandes en papel, [tamaños de póster](https://gradiently.design/es/guide/poster-size-guide).

## Un mismo aspecto en todos los banners

La mayoría de la gente necesita cinco o seis banners a la vez: LinkedIn, X, YouTube, una cabecera de email, el hero de una web. Parecen una sola marca cuando el fondo, la tipografía y el color se mantienen y solo cambia la composición. Un degradado es ideal para esto porque no tiene un sujeto que recortar, siempre que se renderice para cada forma en lugar de estirarse.

Degradado ancho, oscuro a la izquierda: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)`

Una transición horizontal que se mantiene oscura a la izquierda, donde está el avatar o el logotipo, y se aclara hacia la derecha. Cópiala como punto de partida para un banner de perfil.

En Gradiently, un Mark se renderiza de nuevo en cada tamaño de banner, desplaza su zona más tranquila detrás de tus palabras y deja que la tinta automática elija texto claro u oscuro en cada línea. Con Pro, un diseño se adapta a todos los tamaños en un solo paso, así que los banners de LinkedIn, X y YouTube llegan juntos. La idea de un fondo reconocible se trata en [un aspecto propio](https://gradiently.design/es/guide/brand-signature-look).

## FAQ

### ¿Qué tamaño debe tener un banner?

Depende de dónde vaya: 1584 × 396 para un perfil de LinkedIn, 1500 × 500 para X, 2560 × 1440 para YouTube y 1200 × 600 para un banner de blog o de email.

### ¿Dónde debe ir el texto en un banner de redes sociales?

En un solo bloque compacto cerca del centro o a la derecha, lejos de la esquina inferior izquierda donde suele estar la foto de perfil.

### ¿Cuál es la zona segura de un banner de YouTube?

Unos 1546 × 423 píxeles en el centro de la imagen de 2560 × 1440. Solo esa zona se ve en todos los dispositivos.

### ¿Cuántas palabras debe tener un banner?

De cuatro a ocho para el titular, más una pequeña línea de apoyo como mucho. Los banners se ven un instante y a menudo en tamaño pequeño.

### ¿Qué resolución necesita un banner impreso?

Pregunta a tu imprenta. Los banners grandes que se ven a distancia suelen imprimirse a partir de archivos muy por debajo de 300 ppp a tamaño completo.