# Textura de grão: como pôr grão de filme em designs digitais

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

Um pouco de grão é o jeito mais rápido de fazer um design digital parecer um objeto feito. Demais, e parece uma tela quebrada. Veja como avaliar a quantidade, o tamanho e a cor dele.

## The short version

- Textura de grão é uma granulação fina e aleatória sobre um design, para que a cor digital chapada pareça filme, papel ou impressão.
- O grão ajuda de três formas: esconde as faixas em degradês suaves, une fotos e gráficos chapados e dá uma superfície física a formas limpas.
- Na maioria dos designs de tela, o grão deve estar só visível em tamanho real e invisível na distância do braço; se as pessoas o notam primeiro, é demais.
- Grão monocromático é o padrão seguro; grão colorido parece mais com filme de verdade, mas pode deslocar uma paleta.
- Compressão JPEG pesada suaviza o grão, então exporte imagens com grão em PNG ou JPEG de alta qualidade e dê um bitrate generoso a vídeos com grão.

**Textura de grão** é uma camada fina de ruído aleatório colocada sobre um design para que a cor digital perfeitamente chapada pareça impressa, fotografada em filme ou prensada em papel. É sutil de propósito: na quantidade certa ninguém lhe dá nome, só sente que a imagem tem uma superfície. Acertar se resume a quatro ajustes: quantidade, tamanho, cor e mistura.

## Por que o grão deixa designs digitais melhores

As telas 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 superfície real tem. Ele também faz três trabalhos práticos.

- **Esconde as faixas.** Degradês suaves se quebram em listras visíveis em telas de 8 bits. O ruído aleatório desfaz essas bordas e o olho lê um fade contínuo. [Faixas em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica a causa.
- **Unifica elementos mistos.** Uma foto tem grão natural e uma forma chapada não tem nenhum. Uma camada de grão sobre as duas faz com que pareçam da mesma imagem.
- **Dá uma superfície.** Cor chapada parece tela; cor com grão parece material. Por isso o grão está no centro da maioria das escolhas de [textura de fundo](https://gradiently.design/pt-br/guide/background-texture).

Um post de torrefação de café com fundo quente texturizado e um título curto

Um fundo quente e de textura suave parece um objeto artesanal, o que combina com um produto feito à mão.

Um post com um número grande sobre um fundo colorido de grão suave

A mesma sensação carrega um fato simples. O grão impede que um número grande pareça uma planilha.

## Quanto grão acrescentar

O teste honesto é a distância. Veja o design em 100 por cento: você deve mal ver o grão. Depois olhe no celular na distância do braço: não deve ver. Se o grão é a primeira coisa que alguém nota, reduza pela metade. Trabalhos diferentes pedem quantidades diferentes.

| Uso | Quantidade | Tamanho do grão | Por quê |
| --- | --- | --- | --- |
| Fundo de site | Bem leve, 3 a 6% de opacidade | Fino | Áreas grandes e leitura longa deixam o grão óbvio |
| Post social | Leve, 6 a 12% | Fino a médio | Sobrevive à recompressão e às telas de celular |
| Pôster ou panfleto | Médio, 10 a 18% | Médio | Visto de longe, o grão lembra impressão |
| Visual retrô ou de filme | 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 sobre vídeo em movimento parece sujeira na lente |

Pontos de partida, como opacidade de uma camada de ruído em Sobrepor ou Luz suave. Ajuste a olho; telas e cores variam.

> **Designs escuros pedem menos** O grão aparece mais em tons escuros e médios do que perto do branco. Num fundo escuro, comece com metade da quantidade que usaria num claro.

## Grão monocromático ou colorido

O grão de filme real é colorido: pontinhos de vermelho, verde e azul que variam de quadro a quadro. O grão monocromático digital é só claro e escuro. Os dois têm seu lugar.

### Grão monocromático

- Mantém a paleta exatamente como escolhida
- Lembra impressão, papel ou risografia
- Seguro para cores de marca e logos
- O padrão certo para a maioria dos trabalhos

### Grão colorido

- Parece filme analógico
- Dá vida a fotos e tons de pele
- Pode deslocar um pouco uma cor de marca chapada
- Melhor para estilos fotográficos e nostálgicos

O tamanho do grão importa tanto quanto a cor. Grão fino parece caro e moderno. Grão grosso parece artesanal, bruto e barulhento. Ajuste o grão à saída: um post de 1080×1350 pede grão mais fino que um pôster A3 de 3508×4961, porque o pôster é visto de mais longe.

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

1. **Crie uma camada de ruído** Preencha uma nova camada com cinza médio (`#808080`) e adicione ruído. Na maioria dos editores é um filtro chamado Adicionar ruído, Ruído ou Grão. Escolha gaussiano e monocromático para começar limpo.
2. **Defina o modo de mistura** Mude a camada para **Sobrepor** ou **Luz suave**. O cinza desaparece e só a granulação permanece, clareando e escurecendo as cores abaixo.
3. **Reduza a opacidade** Leve até a quantidade da tabela acima. Confira em zoom de 100 por cento e de novo no celular.
4. **Mantenha por cima** O grão fica acima do fundo e das fotos. Deixe textos pequenos e logos acima do grão se quiser que fiquem nítidos, ou abaixo dele para um toque de impressão.
5. **Exporte com cuidado** Exporte em PNG ou JPEG de alta qualidade. Compressão pesada borra o grão em manchas, o que fica pior do que não ter grão.

Se você vai pôr grão especificamente num degradê de cores, [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) tem os ajustes para isso, e [gradientes de ruído](https://gradiently.design/pt-br/guide/noise-background) traz receitas prontas.

## Textura de grão na web

Num site você não precisa de um arquivo de imagem para o grão. Um SVG embutido com o filtro `feTurbulence` desenha ruído no navegador em qualquer tamanho, então fica nítido em toda tela 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 inteira. Aumente `baseFrequency` para um grão mais fino, diminua para um mais grosso. Remova a matriz de cor para ruído colorido.

Mantenha a opacidade baixa: uma página inteira de grão é uma área grande, e 6 por cento muitas vezes basta. A [referência da MDN para feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) lista todos os ajustes.

## Grão em vídeo e movimento

Em imagens em movimento, o grão também deve se mover. Uma única camada de grão estática sobre o vídeo parece uma lente suja. Use grão animado que muda a cada quadro, mantenha-o fino e exporte com bitrate generoso, porque a compressão de vídeo trata o grão como detalhe a descartar. Para loops, leia [vídeo em loop contínuo](https://gradiently.design/pt-br/guide/seamless-loop-video) antes de acrescentar textura.

O Gradiently embute o grão em cada Mark como parte da sua receita, junto com cor, material, luz e movimento, então a textura é renderizada de novo em cada tamanho em que você cria, em vez de ser esticada de uma imagem. Se quiser um fundo que já tenha a sua superfície, explore o Mercado e crie com qualquer Mark livre.

## FAQ

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

Uma granulação fina e aleatória de claros e escuros sobre um design, para que a cor digital chapada pareça filme, papel ou impressão.

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

O bastante para ver em zoom de 100 por cento e não na distância do braço. Para posts sociais, uma camada de ruído com cerca de 6 a 12 por cento de opacidade em Sobrepor é um bom começo.

### O grão resolve as faixas em gradientes?

Em geral sim. O ruído aleatório quebra as bordas duras entre as faixas e o olho lê um fade suave.

### Por que meu grão some depois do upload?

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

### O grão de filme deve ser colorido ou preto e branco?

O grão monocromático mantém exatas as cores da marca e serve para a maioria dos trabalhos. O grão colorido lembra mais o filme analógico e combina com estilos fotográficos.