Därför har din gradient ränder, och så åtgärdar du bandning

Gradientbandning är när en jämn gradient visar synliga ränder eller steg i stället för en sammanhängande övergång. Det beror på att digitala bilder bara kan lagra ett begränsat antal nyanser per färg, vanligtvis 256 per kanal, och när en gradient ändras långsamt över en bred yta måste varje nyans täcka ett band av pixlar. Ditt öga är mycket bra på att upptäcka kanter, så det plockar ut de banden. Lösningen är oftast att lägga till ett fint korn, exportera med mindre komprimering eller ge övergången mer färg att arbeta med.

Vad som orsakar gradientbandning

De flesta bilder använder 8 bitar per kanal: 256 möjliga värden för var och en av röd, grön och blå. Det låter som gott och väl, och för en kraftig gradient är det det. Problemet börjar när färgerna i varje ände ligger nära varandra.

Ta en grå gradient från #202020 till #303030 över en skärm som är 1920 pixlar bred. Varje kanal går bara från 32 till 48, alltså 16 steg. Gradienten innehåller alltså 16 skilda nyanser, var och en ungefär 120 pixlar bred. Ingen programvara kan göra den jämnare, eftersom det inte finns några nyanser emellan att använda.

Var bandningen syns mest

Därför behöver mörka gradientbakgrunder och norrskensgradienter mest omsorg. Deras skönhet beror på långa, milda toningar genom mörka toner, vilket är exakt receptet för bandning.

Så åtgärdar du gradientbandning

1. 1

   Lägg till korn eller dither

   Ett fint lager slumpmässigt brus sprider pixlar mellan angränsande nyanser, så att ögat inte längre kan hitta kanterna. Det är den mest pålitliga lösningen, och den får också ytan att se rikare ut. Se korniga gradienter.

2. 2

   Ge övergången större omfång

   Större skillnader i ljushet eller nyans mellan ändfärgerna betyder fler tillgängliga steg och smalare band. En gradient som också förskjuter nyansen lite använder fler kombinationer av rött, grönt och blått än en ren ljushetsskala.

3. 3

   Arbeta i 16 bitar där du kan

   Bildredigerare som stöder 16 bitar per kanal behåller många fler nivåer medan du arbetar. Konvertera till 8 bitar först vid exporten, med dithering påslagen.

4. 4

   Exportera i hög kvalitet

   Använd PNG för platt grafik, eller JPEG med hög kvalitetsinställning för fotografiska bilder. Undvik GIF och PNG-8, som bara behåller 256 färger totalt.

5. 5

   Exportera i slutlig storlek

   Att förstora en liten gradientbild sträcker ut dess band. Rendera eller exportera i exakt storlek, eller större, i stället för att skala upp.

Åtgärda bandning i CSS-gradienter

Webbläsare renderar CSS-gradienter live, så det finns ingen exportinställning att ändra. Två saker hjälper. Först, vidga skalan eller lägg till ett nyansskifte. Sedan, lägg ett subtilt brusskikt över gradienten, vilket fungerar precis som korn i en bild. CSS-brustextur visar lätta sätt att göra det lagret utan stora bildfiler.

Åtgärda bandning i video och uppladdningar till sociala medier

Sociala plattformar komprimerar om det du laddar upp, och videokodekar är gjorda för att kasta bort exakt den sortens subtila detaljer som håller gradienter jämna. Korn hjälper dubbelt här: det döljer stegen, och det ger kodaren verkliga detaljer att behålla. Ladda upp i plattformens rekommenderade storlek så att den inte skalas om igen, och exportera video med en generös kvalitetsinställning. Om du kodar med ffmpeg har x264 en inställning som är trimmad för att bevara 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

Loopande videobakgrunder är särskilt utsatta för det här, eftersom de oftast är mörka och långsamma. Sömlösa loopvideor tar upp resten av exporten.

Förebygga bandning från början

• Välj gradienter med tillräcklig ljushets- eller nyansförändring för sin storlek
• Planera för korn från början i stället för att lägga till det som en räddningsaktion
• Håll mörka gradienter lite lyfta i stället för att låta dem glida hela vägen till rent svart
• Kontrollera på en telefon efter uppladdningen, inte bara på din designskärm

Varje Mark i Gradiently renderas live i den storlek du designar i, med sitt korn som en del av receptet, och designer som görs med en säkrad Mark exporteras som PNG eller JPEG upp till tre gånger designens storlek, så en gradient behöver aldrig sträckas ut från en liten bild.