# Texturas de fundo: grão, papel, tecido e vidro

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

A textura é o que faz uma cor lisa de ecrã parecer uma superfície. Usada de leve, dá calor e esconde bandas; usada em força, torna-se ruído. Eis como encontrar o limite.

## The short version

- Uma textura de fundo é um pormenor fino de superfície, como grão, fibra de papel, tecido ou vidro fosco, sobreposto a uma cor ou a um gradiente.
- A textura funciona melhor com pouca intensidade, sentida em vez de vista, para dar calor sem competir com o conteúdo por cima.
- A escala da textura deve corresponder ao tamanho de visualização: grão fino para ecrãs pequenos e visão de perto, textura mais grossa para formatos grandes vistos de mais longe.
- Pôr grão sobre um gradiente esconde as bandas, porque o pormenor aleatório quebra os degraus visíveis entre tons.
- As plataformas sociais e os codificadores de vídeo voltam a comprimir as imagens, o que pode esborratar texturas muito finas, por isso verifica a textura depois de carregar.

Uma **textura de fundo** é um pormenor fino de superfície sobreposto a uma cor ou a um gradiente: o granulado da película, as fibras do papel, a trama do linho, a geada do vidro. É o que faz um fundo parecer um material e não píxeis. A regra que mais importa é a intensidade. Uma textura que sentes em vez de notares torna um design mais quente e com ar mais caro; uma textura que notas primeiro torna-se o assunto e luta com tudo o que está por cima.

Uma publicação vertical com o título Manhãs lentas, bom café sobre um gradiente de textura suave

Um gradiente texturado numa publicação vertical: a superfície lê-se como um material e as palavras continuam a liderar.

## Tipos de textura de fundo

| Textura | Lembra | Ideal para |
| --- | --- | --- |
| Grão ou ruído | Película, impressão, um acabamento mate | Gradientes, fundos escuros, tudo o que faz bandas |
| Papel | Impresso, artesanal, editorial | Citações, diários, convites, marcas calmas |
| Tecido e linho | Suave, tecido, tátil | Moda, interiores, hotelaria |
| Vidro fosco | Moderno, em camadas, luminoso | Interfaces, cartões sobre cor, marcas de tecnologia |
| Meios-tons e pontos riso | Impressão retro, zines, cartazes | Publicações sociais divertidas e editoriais |
| Pedra e betão | Sólido, arquitetónico, silencioso | Luxo, arquitetura, fotografia de produto |

Famílias de textura comuns e as associações que trazem. Escolhe uma por design.

Cada textura traz uma associação. O grão diz película e impressão, o papel diz artesanal, o vidro diz interface. Escolhe a que se ajusta ao que a tua marca deve transmitir e usa-a em todo o lado; misturar papel numa publicação e vidro na seguinte desfaz o efeito. Se ainda não decidiste a sensação, a [personalidade da marca](https://gradiently.design/pt-pt/guide/brand-personality) tem uma forma simples de decidir.

## Escala: ajustar a textura ao tamanho de visualização

A textura lê-se de forma diferente em tamanhos diferentes. Um ecrã de telemóvel de perto mostra cada grão, por isso o grão fino chega. Um cartaz do outro lado da sala ou um diapositivo num projetor precisa de textura mais grossa para se registar. E uma textura que parece certa numa publicação de 1080×1350 pode desaparecer quando a plataforma a encolhe para miniatura, ou virar borrões quando é comprimida de novo.

- Story 1080×1920: fina: 1080 × 1920
- Publicação 1080×1350: fina: 1080 × 1350
- Diapositivo 1920×1080: média: 1920 × 1080
- Impressão A3 3508×4961: mais grossa: 3508 × 4961

A mesma textura precisa de uma escala diferente para cada formato e distância de visualização.

Na impressão, o grão geralmente sobrevive bem e até ajuda a reproduzir gradientes com limpeza; a [impressão de gradientes](https://gradiently.design/pt-pt/guide/print-gradients) trata dos pormenores.

## Pôr textura sobre gradientes

A combinação mais útil é a textura sobre um gradiente. O grão quebra os degraus visíveis que surgem nas misturas lisas, a que se chama bandas, e faz um gradiente digital parecer impresso. O método habitual é pôr a textura como uma camada separada acima da cor e misturá-la com um modo como Sobrepor ou Luz suave a baixa opacidade, para que sombreie a cor em vez de a cobrir.

1. **Começa pela cor** Acerta primeiro o gradiente. A textura não salva cores que não funcionam em conjunto.
2. **Junta uma camada de textura** Põe-na acima do gradiente. Usa uma textura cinzenta ou neutra para não tingir a cor.
3. **Mistura-a** Define a camada como Sobrepor ou Luz suave. A Luz suave é mais delicada e mantém as cores limpas.
4. **Baixa a intensidade** Reduz a opacidade até só notares a textura quando a procuras, muitas vezes bem abaixo de metade.
5. **Verifica a zona mais escura** As bandas escondem-se em esbatimentos escuros e lentos. Garante que a textura dissolveu lá os degraus.

Na web, a mesma abordagem são poucas linhas de código; vê a [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture). Para saber porque é que o grão em particular fica tão bem em gradientes, lê os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients).

## Textura e legibilidade

### Evita

- Textura forte mesmo atrás de texto pequeno
- Padrões de alto contraste, como uma trama de linho marcada sob texto corrido
- Duas ou três texturas diferentes num só design
- Textura tão fina que vira papa depois de carregada

### Faz

- Textura ténue, ou uma zona mais calma onde ficam as palavras
- Textura de baixo contraste em tons próximos de uma só cor
- Uma família de textura em todos os formatos
- Verifica a versão carregada, não só a exportação

A textura acrescenta ruído visual junto às letras, e o texto pequeno sofre primeiro. Mantém a textura ténue onde há texto, ou dá às palavras uma zona calma e uniforme do fundo. O [texto sobre fundos carregados](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) trata as técnicas em detalhe.

Uma publicação quadrada com uma citação em que o fundo texturado passa inalterado por trás do texto

Textura e cor a passarem mesmo pelas palavras…

A mesma publicação quadrada com uma citação, com o fundo mais calmo e com mais contraste por trás do texto

…e o mesmo fundo a abrir um espaço calmo por trás delas.

## Uma textura que se mantém coerente

A textura perde-se facilmente entre ferramentas: uma camada de grão num ficheiro, uma imagem de papel noutro, uma intensidade diferente em cada exportação. Na Gradiently, a textura faz parte do próprio fundo. Um Mark sobrepõe até três materiais com grão e luz, por isso a mesma superfície é desenhada por trás de cada design em cada tamanho, e a sua zona mais calma desloca-se para trás das palavras.

Um Mark: cor, material e grão desenhados em conjunto, idênticos em todos os formatos.

## FAQ

### O que é uma textura de fundo?

Um pormenor fino de superfície, como grão, fibra de papel, tecido ou vidro fosco, sobreposto a uma cor ou a um gradiente para se ler como um material físico.

### Que intensidade deve ter uma textura de fundo?

Ténue. Só a deves notar quando a procuras. Se a textura é a primeira coisa que vês, reduz a opacidade.

### Acrescentar textura resolve as bandas dos gradientes?

O grão costuma resolver. O pormenor fino e aleatório quebra os degraus visíveis entre tons, e a mistura parece lisa.

### Que modo de mistura devo usar para a textura?

Luz suave para um efeito delicado que mantém as cores limpas, ou Sobrepor para um mais forte. Usa uma textura cinzenta neutra para não tingir a cor.

### Porque é que a minha textura parece manchada nas redes sociais?

As plataformas voltam a comprimir os carregamentos, o que pode esborratar texturas muito finas. Usa uma textura um pouco mais grossa e verifica o resultado carregado.