# Textura de grão: grão de película em designs digitais

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

Um pouco de grão é a forma mais rápida de fazer um design digital parecer um objeto feito. Demasiado e parece um ecrã avariado. Eis como avaliar a quantidade, o tamanho e a cor.

## The short version

- A textura de grão é um fino salpico aleatório sobre um design, para que a cor digital plana se leia como película, papel ou impressão.
- O grão ajuda de três maneiras: esconde as faixas nas misturas suaves, une fotografias e gráficos planos e dá uma superfície física a formas limpas.
- Na maioria dos designs para ecrã, o grão deve estar apenas visível a 100% e invisível à distância de um braço; se as pessoas o notam primeiro, é demais.
- O grão monocromático é a escolha segura; o grão colorido parece mais película real, mas pode alterar uma paleta.
- Uma compressão JPEG forte apaga o grão, por isso exporta imagens com grão em PNG ou JPEG de alta qualidade e dá ao vídeo com grão um débito generoso.

A **textura de grão** é uma camada fina de ruído aleatório sobre um design para que a cor digital perfeitamente plana pareça impressa, fotografada em película ou prensada em papel. É subtil por natureza: na quantidade certa ninguém lhe dá nome, apenas sente que a imagem tem uma superfície. Acertar resume-se a quatro definições: quantidade, tamanho, cor e mistura.

## Porque é que o grão melhora os designs digitais

Os ecrãs mostram cor que nenhum material físico consegue: perfeitamente uniforme, perfeitamente limpa. Essa limpeza é o que faz muitos designs digitais parecerem baratos ou inacabados. O grão devolve um pouco da irregularidade que toda a superfície real tem. Faz ainda três trabalhos práticos.

- **Esconde as faixas.** As misturas suaves partem-se em riscas visíveis em ecrãs de 8 bits. O ruído aleatório quebra esses limites e o olho lê uma transição contínua. [Faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica a causa.
- **Une elementos mistos.** Uma fotografia tem grão natural e uma forma plana não tem nenhum. Uma só camada de grão sobre ambas faz com que pareçam da mesma imagem.
- **Dá uma superfície.** A cor plana lê-se como ecrã; a cor com grão lê-se como material. É por isso que o grão está no centro da maioria das escolhas de [textura de fundo](https://gradiently.design/pt-pt/guide/background-texture).

Uma publicação de um torrefator de café com fundo quente texturado e um título curto

Um fundo quente e com textura suave lê-se como um objeto artesanal, o que combina com um produto feito à mão.

Uma publicação com um número grande sobre um fundo colorido com grão suave

A mesma sensação sustenta um facto simples. O grão evita que um número grande pareça uma folha de cálculo.

## Quanto grão juntar

O teste honesto é a distância. Vê o design a 100%: deves mal ver o grão. Depois olha para ele no telemóvel à distância de um braço: não o deves ver. Se o grão for a primeira coisa que alguém repara, reduz para metade. Trabalhos diferentes pedem quantidades diferentes.

| Uso | Quantidade | Tamanho do grão | Porquê |
| --- | --- | --- | --- |
| Fundo de website | Muito leve, 3 a 6% de opacidade | Fino | Áreas grandes e observação prolongada tornam o grão óbvio |
| Publicação social | Leve, 6 a 12% | Fino a médio | Sobrevive à recompressão e aos ecrãs de telemóvel |
| Cartaz ou folheto | Média, 10 a 18% | Médio | Visto à distância, o grão lê-se como impressão |
| Visual retro ou de película | Forte, 18 a 30% | Médio a grosso | O grão faz parte do estilo |
| Loop de vídeo | Leve, animado | Fino | Grão estático em vídeo em movimento parece sujidade na lente |

Pontos de partida, como opacidade de uma camada de ruído em Sobrepor ou Luz suave. Ajusta a olho; os ecrãs e as cores variam.

> **Os designs escuros pedem menos** O grão vê-se mais em tons escuros e médios do que em quase branco. Num fundo escuro, começa com metade da quantidade que usarias num claro.

## Grão monocromático ou colorido

O grão de película real é colorido: minúsculos pontos de vermelho, verde e azul que variam de fotograma para fotograma. O grão monocromático digital é só claro e escuro. Ambos têm o seu lugar.

### Grão monocromático

- Mantém a tua paleta exatamente como a escolheste
- Lê-se como impressão, papel ou risografia
- Seguro para cores de marca e logótipos
- A escolha certa para a maioria dos trabalhos

### Grão colorido

- Parece película analógica
- Dá vida a fotografias e tons de pele
- Pode alterar ligeiramente uma cor de marca plana
- Ideal para estilos fotográficos e nostálgicos

O tamanho do grão importa tanto como a cor. O grão fino parece caro e moderno. O grão grosso parece artesanal, áspero e ruidoso. Ajusta o grão ao resultado: uma publicação de 1080×1350 pede grão mais fino do que um cartaz A3 de 3508×4961, porque o cartaz é visto de mais longe.

## Como juntar textura de grão em qualquer ferramenta de design

1. **Cria uma camada de ruído** Preenche uma nova camada com cinzento médio (`#808080`) e junta ruído. Na maioria dos editores é um filtro chamado Adicionar ruído, Ruído ou Grão. Escolhe gaussiano e monocromático para começar limpo.
2. **Define o modo de mistura** Muda a camada para **Sobrepor** ou **Luz suave**. O cinzento desaparece e fica só o salpico, que clareia e escurece as cores por baixo.
3. **Baixa a opacidade** Reduz até à quantidade da tabela acima. Confirma com zoom a 100% e outra vez no telemóvel.
4. **Mantém-na por cima** O grão pertence por cima do fundo e das fotografias. Deixa o texto pequeno e os logótipos acima do grão se os quiseres nítidos, ou abaixo para um toque de impressão.
5. **Exporta com cuidado** Exporta em PNG ou JPEG de alta qualidade. Uma compressão forte esborrata o grão em manchas, o que fica pior do que não ter grão.

Se estás a juntar grão a uma mistura de cores em particular, [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) tem as definições para isso, e [gradientes de ruído](https://gradiently.design/pt-pt/guide/noise-background) tem receitas prontas.

## Textura de grão na web

Num website não precisas de um ficheiro de imagem para o grão. Um SVG em linha com o filtro `feTurbulence` desenha ruído no navegador a qualquer tamanho, por isso fica nítido em todos os ecrãs e pesa quase nada.

```html
<svg class="grain" aria-hidden="true">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

<style>
  .grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.06;
  }
</style>
```

Uma camada de grão fixa sobre a página toda. Aumenta o `baseFrequency` para grão mais fino, baixa-o para mais grosso. Remove a matriz de cor para ruído colorido.

Mantém a opacidade baixa: uma página inteira de grão é uma área grande, e 6% costuma chegar. A [referência da MDN para feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) lista todas as definições.

## Grão em vídeo e movimento

Em imagens em movimento, o grão também deve mover-se. Uma única camada de grão parada sobre vídeo parece uma lente suja. Usa grão animado que muda a cada fotograma, mantém-no fino e exporta com um débito generoso, porque a compressão de vídeo trata o grão como detalhe a deitar fora. Para loops, lê [vídeo em loop contínuo](https://gradiently.design/pt-pt/guide/seamless-loop-video) antes de juntares textura.

O Gradiently integra o grão em cada Mark como parte da sua receita, ao lado da cor, do material, da luz e do movimento, por isso a textura é desenhada de novo em cada tamanho em que crias, em vez de esticada a partir de uma só imagem. Se queres um fundo que já traz a sua superfície, explora o Mercado e cria com qualquer Mark livre.

## FAQ

### O que é a textura de grão em design?

Um fino salpico aleatório de claro e escuro sobre um design, para que a cor digital plana pareça película, papel ou impressão.

### Quanto grão devo juntar a uma imagem?

O suficiente para se ver com zoom a 100% e não à distância de um braço. Em publicações sociais, uma camada de ruído com cerca de 6 a 12% de opacidade em Sobrepor é um bom começo.

### O grão corrige as faixas num gradiente?

Normalmente sim. O ruído aleatório quebra os limites duros entre faixas e o olho lê uma transição suave.

### Porque é que o meu grão desaparece depois de carregar?

As plataformas recomprimem as imagens e tratam o grão fino como detalhe a descartar. Usa um pouco mais de grão, exporta em PNG ou JPEG de alta qualidade e carrega no tamanho exato da plataforma.

### O grão de película deve ser colorido ou a preto e branco?

O grão monocromático mantém as cores de marca exatas e serve a maioria dos trabalhos. O grão colorido parece mais película analógica e serve estilos fotográficos.