Farvebånd i gradienter: derfor opstår de, og sådan løses de

Farvebånd i gradienter opstår, når en glat gradient viser synlige striber eller trin frem for en kontinuerlig blanding. Det sker, fordi digitale billeder kun kan gemme et begrænset antal nuancer pr. farve, normalt 256 pr. kanal. Når en gradient ændrer sig langsomt over et bredt område, må hver nuance dække et bånd af pixels. Øjet er godt til at opdage kanter og ser derfor båndene. Løsningen er normalt fint korn, eksport med mindre komprimering eller flere farver at arbejde med i blandingen.

Det skaber farvebånd i gradienter

De fleste billeder bruger 8 bit pr. kanal: 256 mulige værdier for hver af rød, grøn og blå. Det lyder af meget, og til en kraftig gradient er det nok. Problemet starter, når farverne i enderne ligger tæt på hinanden.

Tag en grå gradient fra #202020 til #303030 over en skærm på 1920 pixels i bredden. Hver kanal flytter sig kun fra 32 til 48, altså 16 trin. Gradienten indeholder derfor 16 forskellige nuancer, hver cirka 120 pixels bred. Intet program kan gøre den glattere, fordi der ikke er nogen nuancer imellem at bruge.

Her ses farvebånd tydeligst

Derfor kræver mørke gradientbaggrunde og aurora-gradienter størst omhu. Deres skønhed afhænger af lange, blide overgange gennem mørke toner, netop opskriften på farvebånd.

Sådan fjerner du farvebånd i gradienter

1. 1

   Tilføj korn eller dithering

   Et fint lag tilfældig støj spreder pixels mellem nabonuancer, så øjet ikke længere kan finde kanterne. Det er den mest pålidelige løsning og får også overfladen til at virke rigere. Se kornede gradienter.

2. 2

   Giv blandingen større spænd

   Større forskelle i lyshed eller kulør mellem endefarverne giver flere mulige trin og smallere bånd. En gradient med et lille kulørskift bruger flere kombinationer af rød, grøn og blå end et rent lyshedsforløb.

3. 3

   Arbejd i 16 bit, hvor du kan

   Billedredigeringsprogrammer, der understøtter 16 bit pr. kanal, bevarer langt flere niveauer under arbejdet. Konvertér først til 8 bit ved eksport med dithering slået til.

4. 4

   Eksportér i høj kvalitet

   Brug PNG til flad grafik eller JPEG med høj kvalitet til fotografiske billeder. Undgå GIF og PNG-8, som kun bevarer 256 farver i alt.

5. 5

   Eksportér i den endelige størrelse

   Opskalering af et lille gradientbillede strækker båndene. Render eller eksportér i den præcise størrelse eller større frem for at skalere op.

Ret farvebånd i CSS-gradienter

Browsere renderer CSS-gradienter live, så der er ingen eksportindstilling at ændre. To ting hjælper. Gør først farveforløbet bredere, eller tilføj et kulørskift. Læg derefter et diskret støjlag over gradienten. Det virker præcis som korn i et billede. Støjtekstur i CSS viser lette måder at lave laget på uden store billedfiler.

Ret farvebånd i video og upload til sociale medier

Sociale platforme komprimerer dit upload igen, og videocodecs er lavet til at fjerne netop de diskrete detaljer, der holder gradienter glatte. Korn hjælper dobbelt her: det skjuler trin og giver encoderen rigtige detaljer at bevare. Upload i platformens anbefalede størrelse, så indholdet ikke skaleres igen, og eksportér video i høj kvalitet. Bruger du ffmpeg til kodning, har x264 en indstilling til at 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

Loopvideoer som baggrunde er særligt udsatte, fordi de typisk er mørke og langsomme. Sømløse loopvideoer gennemgår resten af eksporten.

Forebyg farvebånd fra starten

• Vælg gradienter med nok ændring i lyshed eller kulør til deres størrelse
• Planlæg korn fra begyndelsen frem for at tilføje det som redning
• Hold mørke gradienter lidt lysere frem for at gå helt ned i rent sort
• Tjek på en telefon efter upload, ikke kun på din designskærm

Hver Mark i Gradiently renderes live i den størrelse, du designer i, med korn som en del af opskriften. Design lavet med en Mark, du har sikret dig, eksporteres som PNG eller JPEG op til tre gange designets størrelse, så en gradient aldrig skal strækkes fra et lille billede.