Hvorfor gradienten din har striper, og hvordan du fikser banding

Banding i gradienter er når en jevn gradient viser synlige striper eller trinn i stedet for en sammenhengende overgang. Det skjer fordi digitale bilder bare kan lagre et begrenset antall nyanser per farge, som regel 256 per kanal, og når en gradient endrer seg langsomt over et bredt område, må hver nyanse dekke et bånd av piksler. Øyet ditt er veldig godt til å oppdage kanter, så det plukker ut båndene. Løsningen er som regel å legge til fint korn, eksportere med mindre komprimering eller gi overgangen mer farge å jobbe med.

Hva som forårsaker banding i gradienter

De fleste bilder bruker 8 biter per kanal: 256 mulige verdier hver for rødt, grønt og blått. Det høres mye ut, og for en kraftig gradient er det nok. Problemet starter når fargene i hver ende ligger tett.

Ta en grå gradient fra #202020 til #303030 over en skjerm som er 1920 piksler bred. Hver kanal går bare fra 32 til 48, altså 16 trinn. Gradienten inneholder dermed 16 ulike nyanser, hver omtrent 120 piksler bred. Ingen programvare kan gjøre den jevnere, for det finnes ingen nyanser imellom å bruke.

Hvor banding vises mest

Det er derfor mørke gradientbakgrunner og aurora-gradienter trenger mest omsorg. Skjønnheten deres hviler på lange, slake overganger gjennom mørke toner, og det er nøyaktig oppskriften på banding.

Slik fikser du banding i gradienter

1. 1

   Legg til korn eller dithering

   Et fint lag med tilfeldig støy sprer pikslene mellom nabonyanser, så øyet ikke lenger finner kantene. Det er den mest pålitelige løsningen, og den får også overflaten til å se rikere ut. Se kornete gradienter.

2. 2

   Gi overgangen mer spenn

   Større forskjeller i lyshet eller fargetone mellom endefargene gir flere tilgjengelige trinn og smalere bånd. En gradient som også skifter litt i fargetone, bruker flere kombinasjoner av rødt, grønt og blått enn en ren lyshetsovergang.

3. 3

   Jobb i 16 biter der du kan

   Bilderedigeringsprogrammer som støtter 16 biter per kanal, beholder langt flere nivåer mens du jobber. Konverter til 8 biter først ved eksport, med dithering slått på.

4. 4

   Eksporter i høy kvalitet

   Bruk PNG til flat grafikk, eller JPEG med høy kvalitetsinnstilling til fotografiske bilder. Unngå GIF og PNG-8, som bare beholder 256 farger totalt.

5. 5

   Eksporter i endelig størrelse

   Å skalere opp et lite gradientbilde strekker båndene. Tegn eller eksporter i nøyaktig størrelse, eller større, i stedet for å skalere opp.

Fiks banding i CSS-gradienter

Nettlesere tegner CSS-gradienter direkte, så det finnes ingen eksportinnstilling å endre. To ting hjelper. For det første: utvid overgangen eller legg til et skifte i fargetone. For det andre: legg et diskret støylag over gradienten, som fungerer akkurat som korn i et bilde. Støytekstur i CSS viser lette måter å lage det laget på uten store bildefiler.

Fiks banding i video og opplastinger til sosiale medier

Sosiale plattformer komprimerer det du laster opp på nytt, og videokodeker er laget for å kaste nettopp den typen fine detaljer som holder gradienter jevne. Her hjelper korn to ganger: det skjuler trinn, og det gir koderen ekte detaljer å beholde. Last opp i plattformens anbefalte størrelse så bildet ikke skaleres en gang til, og eksporter video med en romslig kvalitetsinnstilling. Koder du med ffmpeg, har x264 en innstilling som er tilpasset for å bevare korn.

# 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

Videobakgrunner i loop er særlig utsatt for dette, fordi de som regel er mørke og langsomme. Sømløse loopvideoer går gjennom resten av eksporten.

Forebygg banding fra starten

• Velg gradienter med nok endring i lyshet eller fargetone for størrelsen
• Planlegg for korn fra begynnelsen i stedet for å legge det til som en redningsaksjon
• Hold mørke gradienter litt løftet i stedet for å gli helt ned til ren svart
• Kontroller på en telefon etter opplasting, ikke bare på designskjermen din

Hver Mark i Gradiently tegnes direkte i størrelsen du designer i, med kornet som en del av oppskriften, og design laget med en Mark du har sikret deg, eksporteres som PNG eller JPEG i opptil tre ganger designets størrelse, så en gradient aldri må strekkes fra et lite bilde.