Kornete gradienter: hvorfor litt støy får farge til å se påkostet ut

En kornete gradient er en gradient med et fint lag tilfeldig støy over, så fargen får en synlig tekstur i stedet for en helt glatt, digital overflate. Den ble populær av én praktisk og én visuell grunn: korn skjuler stripene som glatte overganger ofte viser, og det får farge på en skjerm til å se ut som noe trykt, filmet eller malt. Gjort godt legger de fleste ikke merke til kornet i det hele tatt. De synes bare at fargen ser bedre ut.

Hvorfor korn får en gradient til å se bedre ut

Det er tre grunner, og de forsterker hverandre.

• Det skjuler banding. De fleste bilder har 256 nyanser per fargekanal. En slak overgang over et stort område må gå i trinn mellom dem, og øyet plukker ut trinnene som striper. Tilfeldig støy sprer pikslene over nabonyanser, så kantene mellom trinnene forsvinner. Det er samme idé som dithering. Se banding i gradienter.
• Det gir taktilitet. Fysiske ting er aldri helt glatte. Film har korn, papir har struktur, og trykkfarge legger seg ujevnt. En liten mengde støy låner de assosiasjonene, så en flat digital overgang begynner å føles som et materiale.
• Det tåler komprimering bedre. Sosiale plattformer og meldingsapper komprimerer bilder på nytt. Glatte overganger er nettopp det kraftig komprimering flater ut til blokker, og et fint korn gir koderen detaljer å holde fast i. Test likevel eksporten din: svært kraftig komprimering kan også smøre ut korn.

Hvor mye korn du bør legge til

Den vanligste feilen er for mye. Kraftig korn ser ut som en skitten linse eller et mobilbilde tatt i dårlig lys. Riktig mengde avhenger av størrelsen på det rolige området, hvor mørk gradienten er, og hvor den skal ses. Se på tallene nedenfor som utgangspunkter for et støylag i blandingsmodusen Overlay eller Soft Light, og vurder så med øyet i full størrelse.

Hvor kornet bør ligge

Korn trenger ikke å være jevnt. Det ser mest naturlig ut på store, rolige fargeflater og i mørke toner, der filmkorn er mest synlig i virkeligheten. Hold det lettere bak liten tekst, for støy i kantene av bokstaver får dem til å se bløte ut. Og hold logoen og skriften over kornlaget, ikke under, så de forblir skarpe.

Slik legger du korn på en gradient i CSS

Den letteste metoden er et SVG-støyfilter brukt som bakgrunnsbilde. feTurbulence genererer tilfeldig støy, feColorMatrix fjerner fargen så den ikke gir fargeprikker, og en blandingsmodus blander den inn i gradienten under. Høyere verdier for baseFrequency gir finere korn; stitchTiles får flisen til å gjentas uten sømmer.

.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}

Foretrekker du et bilde, fungerer et lite støybilde som kan flislegges, lagret som PNG, på samme måte som SVG-en. Hold det tapsfritt: støyfliser i JPEG får artefakter fra komprimeringen. Flere mønstre og teksturtriks uten bilder finner du i støytekstur i CSS.

Slik legger du til korn i designverktøy

1. 1

   Bygg gradienten først

   Få farger, stopp og komposisjon riktig på et rent lag. Korn kan ikke redde en grumsete overgang; se grumsete gradienter.

2. 2

   Legg til et eget støylag

   Bruk verktøyets støyeffekt eller en støytekstur på et eget lag over gradienten, så du kan justere det uten å røre fargen.

3. 3

   Gjør det ensfarget

   Fjern metningen fra støyen så den ikke gir fargede prikker, og sett laget til Overlay eller Soft Light.

4. 4

   Senk opasiteten til det forsvinner, og gå litt tilbake

   Riktig mengde ligger som regel rett over punktet der du slutter å legge merke til det.

5. 5

   Eksporter i endelig størrelse, tapsfritt hvis du kan

   Å skalere opp et kornete bilde forstørrer kornet til flekker. Eksporter PNG i nøyaktig størrelse, eller JPEG i høy kvalitet for bilder.

Korn på trykk

Korn laget for en telefonskjerm kan oppføre seg annerledes på papir. I 300 dpi kan svært fin støy forsvinne helt, og grov støy kan se ut som en trykkfeil. For plakater og flyere lager du kornet i trykkoppløsning og tar et prøvetrykk på det ekte papiret. Gradienter på trykk dekker resten av prosessen.

Korn er også ett av flere materialer. Papir, glass og silke endrer hver for seg hva en gradient sier; gradienttekstur sammenligner dem. Hver Mark har sin egen korninnstilling ved siden av farger og materialer, så balansen er allerede satt når du begynner å designe.