# Design de banner: banners para web, redes e impressão legíveis

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

Banners são longos, estreitos e muitas vezes ficam meio cobertos pela foto de perfil ou cortados no celular. Crie pensando nesse formato e poucas palavras dão conta de uma marca inteira. Todos os tamanhos de que você provavelmente vai precisar estão abaixo.

## The short version

- Banners são formatos largos, de cerca de 2:1 em banners de blog e e-mail até 6:1 numa capa de página de empresa no LinkedIn.
- Num banner largo o olho lê da esquerda para a direita, então as palavras devem ficar num bloco compacto em vez de se espalhar por toda a largura.
- A maioria dos banners das redes fica parcialmente coberta pela foto de perfil ou cortada no celular, então o conteúdo importante deve ficar perto do centro.
- Um banner de canal do YouTube tem 2560 × 1440 pixels, mas só a faixa central de cerca de 1546 × 423 pixels aparece em todos os dispositivos.
- Banners impressos, como os roll ups, são lidos a vários metros, então precisam de bem menos palavras e de letras muito maiores que os banners da web.

Um bom **design de banner** trabalha a favor do formato, não contra ele. Um banner é largo e baixo, então dê a ele um bloco compacto de palavras, um título curto e talvez uma linha de apoio, num lugar onde nada vá cobri-lo, e deixe o fundo levar a cor pelo resto da largura. Confira antes o tamanho e a área segura de cada plataforma: um banner de perfil do LinkedIn tem 1584 × 396 pixels e perde o canto inferior esquerdo para a sua foto, enquanto um banner do YouTube tem 2560 × 1440 e mostra só uma faixa central no celular.

## Tamanhos de banner para web e redes sociais

| Banner | Tamanho (px) | Formato | O que cobre |
| --- | --- | --- | --- |
| Banner de perfil do LinkedIn | 1584 × 396 | 4:1 | Foto de perfil, embaixo à esquerda |
| Capa de página de empresa no LinkedIn | 2256 × 382 | Cerca de 6:1 | Logo, embaixo à esquerda |
| Capa do X | 1500 × 500 | 3:1 | Foto de perfil, embaixo à esquerda |
| Capa do Facebook | 1640 × 624 | Cerca de 2,6:1 | Foto de perfil, cortada no celular |
| Arte do canal do YouTube | 2560 × 1440 | 16:9 | Só o centro aparece em todos os dispositivos |
| Banner do Bluesky | 3000 × 1000 | 3:1 | Avatar, embaixo à esquerda |
| Banner principal de site | 1920 × 1080 | 16:9 | Menu de navegação no topo |
| Banner de blog e cabeçalho de e-mail | 1200 × 600 | 2:1 | Nada, mas costuma ser visto pequeno |
| Banner de loja no Etsy | 3360 × 840 | 4:1 | Cortado no celular |

Tamanhos da lista do Gradiently, que segue o tamanho de upload recomendado por cada plataforma. Os guias de cada plataforma vão mais fundo: [tamanho do banner do LinkedIn](https://gradiently.design/pt-br/guide/linkedin-banner-size) e [tamanho do banner do YouTube](https://gradiently.design/pt-br/guide/youtube-banner-size).

- Banner de blog 2:1: 1200 × 600
- Capa do X 3:1: 1500 × 500
- Banner do LinkedIn 4:1: 1584 × 396
- LinkedIn empresa 6:1: 2256 × 382

Quatro banners em escala. Conforme o formato fica mais estreito, o espaço para as palavras encolhe muito mais rápido do que a largura cresce.

## Como diagramar o texto num banner largo

As pessoas leem um banner como leem uma linha de texto: da esquerda para a direita, rápido. Espalhar as palavras pela largura toda faz o olho viajar demais. Agrupe-as num bloco, mais ou menos um terço da largura, e use um título grande o bastante para ser lido quando o banner inteiro encolhe para a largura da tela do celular.

Um banner largo do LinkedIn com um título curto do lado direito e um gradiente preenchendo o resto

Um banner de perfil do LinkedIn com as palavras longe da foto de perfil, embaixo à esquerda.

Uma capa do X anunciando episódios novos de podcast toda quinta sobre um fundo em gradiente

Uma capa do X: uma linha, uma informação e nada importante no canto do avatar.

Nessa altura, a hierarquia precisa ser simples. Dois níveis costumam ser o limite: um título e uma linha pequena acima ou abaixo dele. Se você precisa de um terceiro, ele provavelmente deveria estar no próprio perfil. [Hierarquia visual](https://gradiently.design/pt-br/guide/visual-hierarchy) explica como tamanho e espaçamento fazem esse trabalho sem decoração extra.

## Áreas seguras e cortes

Cada plataforma corta ou cobre o banner de um jeito no computador e no celular. A abordagem segura é a mesma em todas: deixe o fundo ir de ponta a ponta e mantenha palavras e logos no meio do quadro, longe do canto onde fica o avatar.

1. **Encontre o canto coberto** No LinkedIn, no X e no Bluesky, a foto de perfil fica sobre o canto inferior esquerdo. Deixe essa área só com fundo.
2. **Preveja os cortes no celular** Facebook e Etsy cortam as laterais no celular. Mantenha as palavras dentro dos dois terços centrais da largura.
3. **Use a faixa central do YouTube** Do quadro de 2560 × 1440, só a área central de cerca de 1546 × 423 pixels aparece em todos os dispositivos. Coloque o nome e qualquer texto ali.
4. **Confira no tamanho real** Faça o upload e veja no celular e no notebook. A prévia de uma ferramenta de design não mostra a interface da plataforma, e as plataformas mudam seus layouts, então confira as páginas de ajuda delas antes de um grande lançamento.

## Banners impressos: roll ups e sinalização de eventos

Um banner roll up, normalmente de 850 × 2000 mm, é o problema oposto: alto e visto a metros de distância por quem passa. Ele precisa de um logo e um título no terço superior, na altura dos olhos, de muito pouco no terço inferior, que some atrás de mesas e pernas, e de letras grandes o bastante para serem lidas do outro lado da sala. Pergunte à gráfica qual resolução ela quer; banners grandes costumam ser impressos a partir de arquivos bem abaixo de 300 dpi, porque ninguém os vê de perto.

### Evite

- Um parágrafo explicando o que você faz
- Palavras espalhadas por toda a largura
- Texto pequeno no canto escondido pelo avatar
- Uma foto carregada atrás do título
- Informações importantes na parte de baixo de um roll up

### Faça

- De quatro a oito palavras que digam quem você é
- Um bloco compacto de texto
- Só fundo onde fica a interface
- Uma área calma de cor atrás das palavras
- Logo e título na altura dos olhos

Para estandes e palcos, veja [design de backdrop para eventos](https://gradiently.design/pt-br/guide/event-backdrop-design) e, para formatos grandes em papel, [tamanhos de cartaz](https://gradiently.design/pt-br/guide/poster-size-guide).

## Um único visual em todos os banners

A maioria das pessoas precisa de cinco ou seis banners de uma vez: LinkedIn, X, YouTube, um cabeçalho de e-mail, um banner de site. Eles parecem uma única marca quando o fundo, a tipografia e a cor ficam constantes e só o layout muda. Um gradiente é ideal para isso porque não tem um assunto para cortar, desde que seja renderizado para cada formato em vez de esticado.

Gradiente para banner largo, escuro à esquerda: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)`

Uma transição horizontal que fica escura à esquerda, onde ficam o avatar ou o logo, e clareia para a direita. Copie como ponto de partida para um banner de perfil.

No Gradiently, um Mark é renderizado do zero em cada tamanho de banner, move sua região mais calma para trás das suas palavras e deixa a tinta automática escolher texto claro ou escuro em cada linha. Com o Pro, um design é redimensionado para todos os tamanhos de uma vez, e os banners do LinkedIn, do X e do YouTube chegam juntos. A ideia de um fundo reconhecível está em [um visual de assinatura](https://gradiently.design/pt-br/guide/brand-signature-look).

## FAQ

### Qual deve ser o tamanho de um banner?

Depende de onde ele vai: 1584 × 396 para um perfil do LinkedIn, 1500 × 500 para o X, 2560 × 1440 para o YouTube e 1200 × 600 para um banner de blog ou e-mail.

### Onde colocar o texto num banner de rede social?

Num bloco compacto perto do centro ou da direita, longe do canto inferior esquerdo, onde a foto de perfil costuma ficar.

### Qual é a área segura de um banner do YouTube?

Cerca de 1546 × 423 pixels no meio da imagem de 2560 × 1440. Só essa área aparece em todos os dispositivos.

### Quantas palavras um banner deve ter?

De quatro a oito no título, mais no máximo uma linha pequena de apoio. Banners são vistos rapidamente e muitas vezes em tamanho pequeno.

### Qual resolução um banner impresso precisa?

Pergunte à gráfica. Banners grandes vistos de longe costumam ser impressos a partir de arquivos bem abaixo de 300 dpi no tamanho real.