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

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

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.

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.

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

   Reduza a opacidade

   Leve até a quantidade da tabela acima. Confira em zoom de 100 por cento e de novo no celular.

4. 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. 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 tem os ajustes para isso, e gradientes de ruído 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.

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

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