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

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 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.

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.

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.

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. 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. 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. 3

   Baixa a opacidade

   Reduz até à quantidade da tabela acima. Confirma com zoom a 100% e outra vez no telemóvel.

4. 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. 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 tem as definições para isso, e gradientes de ruído 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.

<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>

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 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 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.