Por que o seu gradiente tem listras e como corrigir o banding

O banding em gradientes é quando um gradiente liso mostra listras ou degraus visíveis em vez de uma mistura contínua. Acontece porque as imagens digitais só guardam um número limitado de tons por cor, em geral 256 por canal, e quando um gradiente muda devagar por uma área larga, cada tom precisa cobrir uma faixa de pixels. O seu olho é muito bom em detectar bordas, então percebe essas faixas. A correção costuma ser acrescentar um grão fino, exportar com menos compressão ou dar à mistura mais cor para trabalhar.

O que causa o banding em gradientes

A maioria das imagens usa 8 bits por canal: 256 valores possíveis para cada um de vermelho, verde e azul. Parece muito e, para um gradiente forte, é. O problema começa quando as cores de cada ponta são próximas.

Pegue um gradiente cinza de #202020 a #303030 numa tela de 1920 pixels de largura. Cada canal só vai de 32 a 48, ou seja, 16 degraus. Então o gradiente contém 16 tons distintos, cada um com cerca de 120 pixels de largura. Nenhum software consegue deixá-lo mais liso, porque não há tons intermediários para usar.

Onde o banding mais aparece

É por isso que os fundos de gradiente escuros e os gradientes de aurora pedem mais cuidado. A beleza deles depende de rampas longas e suaves por tons escuros, que é exatamente a receita do banding.

Como corrigir o banding em gradientes

1. 1

   Acrescente grão ou dither

   Uma camada fina de ruído aleatório espalha pixels entre tons vizinhos, então o olho não encontra mais as bordas. É a correção mais confiável e também deixa a superfície mais rica. Veja os gradientes com grão.

2. 2

   Dê mais faixa à mistura

   Diferenças maiores de luminosidade ou de matiz entre as cores das pontas significam mais degraus disponíveis e faixas mais estreitas. Um gradiente que também muda um pouco de matiz usa mais combinações de vermelho, verde e azul do que uma rampa só de luminosidade.

3. 3

   Trabalhe em 16 bits onde puder

   Os editores de imagem que aceitam 16 bits por canal mantêm muito mais níveis enquanto você trabalha. Converta para 8 bits só na exportação, com o dithering ligado.

4. 4

   Exporte em alta qualidade

   Use PNG para gráficos chapados ou JPEG em alta qualidade para imagens fotográficas. Evite GIF e PNG-8, que guardam só 256 cores no total.

5. 5

   Exporte no tamanho final

   Ampliar uma imagem de gradiente pequena estica as faixas dela. Renderize ou exporte no tamanho exato, ou maior, em vez de ampliar.

Corrigindo o banding em gradientes CSS

Os navegadores renderizam gradientes CSS ao vivo, então não há ajuste de exportação para mudar. Duas coisas ajudam. Primeiro, amplie a rampa ou acrescente uma mudança de matiz. Segundo, ponha uma camada sutil de ruído sobre o gradiente, que funciona exatamente como o grão numa imagem. A textura de ruído em CSS mostra jeitos leves de fazer essa camada sem arquivos de imagem grandes.

Corrigindo o banding em vídeos e uploads sociais

As plataformas sociais recomprimem o que você envia, e os codecs de vídeo são feitos para descartar exatamente o tipo de detalhe sutil que mantém os gradientes lisos. O grão ajuda duas vezes aqui: esconde os degraus e dá ao codificador detalhe de verdade para guardar. Envie no tamanho recomendado pela plataforma para que ele não seja redimensionado de novo e exporte o vídeo numa configuração generosa de qualidade. Se você codifica com ffmpeg, o x264 tem um ajuste feito para preservar o grão.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Os fundos em vídeo com loop são especialmente propensos a isso, porque costumam ser escuros e lentos. Os vídeos em loop contínuo tratam do resto da exportação.

Prevenindo o banding desde o início

• Escolha gradientes com variação de luminosidade ou de matiz suficiente para o tamanho
• Planeje o grão desde o começo em vez de acrescentá-lo como socorro
• Mantenha os gradientes escuros um pouco elevados em vez de deslizar até o preto puro
• Confira no celular depois de enviar, não só no monitor em que você desenha

Todo Mark do Gradiently é renderizado ao vivo no tamanho em que você cria, com o grão como parte da receita, e os designs feitos com um Mark reservado exportam como PNG ou JPEG em até três vezes o tamanho do design, então um gradiente nunca precisa ser esticado a partir de uma imagem pequena.