# Gráficos para fios do Twitter: imagens que mantêm os leitores do X

[Canonical HTML page](https://gradiently.design/pt-pt/guide/x-thread-graphics)

Um fio vive ou morre na primeira publicação, e depois em saber se cada seguinte parece valer o scroll. As imagens podem fazer as duas coisas, se forem planeadas como conjunto e não acrescentadas como decoração.

## The short version

- Bons gráficos para fios do Twitter são planeados como conjunto: uma imagem de abertura na primeira publicação, cartões numerados para os pontos-chave e um cartão final.
- No X, uma imagem horizontal de 1600×900 ou uma vertical de 1080×1350 mostram-se bem, e a vertical ocupa mais espaço na cronologia.
- Cada cartão de um fio deve levar um ponto em poucas palavras, com a explicação completa no texto da publicação ao lado.
- Usar o mesmo fundo, letra e posição do número em todos os cartões faz o fio parecer acabado e fácil de seguir.
- Acrescentar uma descrição de imagem a cada cartão mantém o fio legível para quem usa leitores de ecrã.

Os melhores **gráficos para fios do Twitter** vêm como um conjunto planeado: uma imagem de abertura que faz as pessoas abrir o fio, cartões numerados que marcam cada ponto-chave e um cartão final que diz aos leitores o que fazer a seguir. Faz todos a partir de um só design para o fio parecer uma única peça de trabalho. No X, usa 1600×900 em horizontal ou 1080×1350 em vertical, que ocupa mais altura na cronologia.

## Tamanhos de imagem para fios do X

O X mostra imagens únicas na cronologia com a sua própria forma, dentro de limites, por isso escolhe a forma de propósito. O vertical ganha atenção na primeira publicação porque ocupa mais do ecrã durante o scroll. O horizontal serve diagramas, gráficos e capturas de ecrã naturalmente largos. Para a lista completa de formatos, vê o [tamanho de imagem do Twitter](https://gradiently.design/pt-pt/guide/x-post-image-design).

- Publicação X 1600×900: 1600 × 900
- X vertical 1080×1350: 1080 × 1350

As duas formas que vale a pena desenhar. Vertical para a abertura e para os cartões; horizontal para tudo o que é largo por natureza.

Escolhe uma forma para os cartões numerados e mantém-na. Um fio que salta entre vertical e horizontal parece montado com sobras. Anexa um cartão por publicação: quando uma só publicação leva várias imagens, o X organiza-as numa grelha e corta cada uma. A abertura pode ser diferente dos cartões, se precisar, desde que partilhe o fundo e a letra.

## A imagem de abertura: fazer abrir a primeira publicação

A primeira publicação carrega o fio inteiro. A sua imagem deve dizer a promessa no menor número de palavras possível, maior do que tudo o resto que publicares nesse dia. Pensa nela como uma capa: o título do fio, uma pista do que há lá dentro e mais nada.

Uma capa vertical de fio com 7 erros de preços que cometemos e Um fio por cima

A abertura: uma promessa clara e uma contagem, para os leitores saberem o tamanho do que estão a abrir.

Um cartão vertical numerado com um 1 grande e a linha Fixámos preços pelo custo, não pelo valor

O cartão um do mesmo design: um número grande e depois o ponto numa só linha.

Os números nas aberturas funcionam porque criam expectativas: sete significa que o leitor consegue ver o fim. Só usa um se o fio contiver mesmo tantos pontos, e mantém o número de cada cartão no mesmo sítio para a contagem se ler num relance durante o scroll. A [hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy) explica porque o número deve ser a coisa maior do cartão.

## Cartões numerados que sustentam o fio

Os cartões são sinais, não o artigo. Põe o ponto no cartão e a explicação no texto da publicação. Essa divisão mantém os cartões legíveis em tamanho de telemóvel e dá ao texto da publicação uma função, o que também ajuda quem percorre a cronologia sem abrir imagens.

| Publicação | Imagem | Texto ao lado |
| --- | --- | --- |
| 1 | Capa de abertura: promessa e contagem | Porque importa, uma ou duas linhas |
| 2 a 8 | Cartão numerado: um ponto, poucas palavras | A explicação, um exemplo, um número |
| Publicações de dados | Um gráfico limpo ou captura de ecrã no mesmo enquadramento | O que reparar nele |
| Última | Cartão final: resumo ou próximo passo | O pedido: seguir, subscrever, responder |

Um mapa do fio. Escrever esta tabela primeiro, antes de desenhar o que quer que seja, torna os gráficos rápidos.

Nem todas as publicações precisam de imagem. Imagens na abertura, nos pontos de viragem e na publicação final costumam bastar, e um fio em que todas as publicações têm cartão pode pesar. Deixa os pontos mais fortes levar um cartão e as publicações de ligação ficarem como texto.

## Um só estilo para o fio inteiro

A coerência é o que faz um fio parecer uma peça acabada e não uma sucessão de publicações. Escolhe um fundo, uma fonte e uma posição para o número, e repete-os exatamente. Basta uma paleta de cores com um único destaque para os números.

- Fundo: #0e1116
- Azul profundo: #1f2a44
- Azul claro: #3b82f6
- Destaque do número: #facc15
- Tinta: #f3f4f6

Um fundo escuro serve tanto o modo escuro como o claro do X. O amarelo fica reservado para os números, para o olhar encontrar primeiro a contagem.

### Evita

- Um parágrafo de texto espremido num cartão
- Fundos diferentes em cada cartão
- Números pequenos metidos num canto
- Capturas de ecrã largadas em tamanhos aleatórios
- Imagens sem descrição

### Faz

- Um ponto por cartão, com menos de doze palavras
- O mesmo fundo do princípio ao fim
- Um número grande no mesmo sítio de cada vez
- Capturas de ecrã colocadas dentro do enquadramento do cartão
- Uma descrição curta da imagem em cada cartão

O X permite acrescentar uma descrição a cada imagem. Escreve o que o cartão diz, palavra por palavra, mais o que a imagem mostra e as palavras não. Leva um minuto por fio e torna-o legível para todos.

## Como fazer rapidamente um conjunto de cartões para fio

1. **Escreve primeiro o fio** Redige cada publicação como texto e depois marca as que merecem um cartão. Costumam ser a abertura, os pontos principais e a última publicação.
2. **Desenha a abertura e um cartão numerado** Estes dois definem o sistema: fundo, fonte, posição do número, margens.
3. **Duplica para cada ponto** Copia o cartão numerado e muda apenas o número e a linha. Não ajustes mais nada.
4. **Faz o cartão final** O mesmo enquadramento, com um resumo dos pontos ou um único próximo passo, como Segue para a parte dois.
5. **Exporta em conjunto, anexa por ordem** Dá aos ficheiros os nomes 01, 02, 03 para serem carregados em sequência, e acrescenta cada descrição ao anexar.

No Gradiently um fio é um só design com uma página por cartão, por isso todos os cartões partilham o Mark, as fontes e o layout, e as palavras continuam legíveis sobre o fundo sem caixas nem sombras. Se os pontos já estão numa folha de cálculo, a criação em massa do Pro consegue fazer todos os cartões numerados a partir dela de uma só vez. As mesmas páginas servem também para um [carrossel do Instagram](https://gradiently.design/pt-pt/guide/instagram-carousel-design) ou um [carrossel do LinkedIn](https://gradiently.design/pt-pt/guide/linkedin-thought-leader-content) quando quiseres publicar o fio noutro sítio.

> **Reutiliza a abertura** A tua capa de abertura dá um bom cabeçalho para uma versão em blogue do fio. Volta a gerá-la a 1200×600 em vez de a cortar, para o título continuar ao meio. O [branding no X](https://gradiently.design/pt-pt/guide/x-branding) trata do perfil à volta.

## FAQ

### Que tamanho devem ter as imagens num fio do Twitter?

Usa 1600×900 em horizontal ou 1080×1350 em vertical. O vertical ocupa mais espaço na cronologia, o que serve a publicação de abertura.

### Todas as publicações de um fio devem ter imagem?

Não. Imagens na abertura, nos pontos principais e na publicação final costumam bastar; as publicações de ligação podem ficar como texto.

### Quanto texto deve ir num cartão de fio?

Um ponto em menos de doze palavras. Põe a explicação no texto da publicação ao lado da imagem.

### Como faço os gráficos do fio parecerem coerentes?

Faz um cartão numerado e duplica-o para cada ponto, mudando apenas o número e a linha, mantendo fixos o fundo, a fonte e as posições.

### Posso acrescentar texto alternativo às imagens no X?

Sim. O X permite acrescentar uma descrição a cada imagem ao anexá-la, e vale a pena fazê-lo em todos os cartões.