Korrelig kleurverloop: waarom wat ruis kleur duur laat ogen

Een korrelig kleurverloop is een kleurverloop met een fijne laag willekeurige ruis erover, zodat de kleur een zichtbare textuur heeft in plaats van een volkomen glad, digitaal oppervlak. Het werd populair om een praktische en een visuele reden: korrel verbergt de strepen die gladde verlopen vaak tonen, en het laat kleur op een scherm ogen als iets dat gedrukt, gefilmd of geschilderd is. Goed gedaan merken de meeste mensen de korrel helemaal niet op. Ze vinden alleen dat de kleur er beter uitziet.

Waarom korrel een kleurverloop mooier maakt

Er zijn drie redenen, en ze versterken elkaar.

• Het verbergt banding. De meeste beelden hebben 256 tinten per kleurkanaal. Een zacht verloop over een groot vlak moet daartussen stappen, en je oog pikt de stappen op als strepen. Willekeurige ruis verstrooit pixels over naburige tinten, zodat de randen tussen de stappen verdwijnen. Dit is hetzelfde idee als dithering. Zie banding in kleurverlopen.
• Het maakt het tastbaar. Fysieke dingen zijn nooit volkomen glad. Film heeft korrel, papier heeft structuur en gedrukte inkt ligt ongelijkmatig. Een klein beetje ruis leent die associaties, zodat een vlak digitaal verloop als een materiaal gaat aanvoelen.
• Het overleeft compressie beter. Social platforms en berichtenapps comprimeren beelden opnieuw. Gladde verlopen zijn precies wat zware compressie tot blokken afvlakt, en een fijne korrel geeft de encoder detail om zich aan vast te houden. Test je export wel: heel sterke compressie kan ook korrel uitsmeren.

Hoeveel korrel je toevoegt

De meest gemaakte fout is te veel. Zware korrel oogt als een vuile lens of een telefoonfoto bij weinig licht. De juiste hoeveelheid hangt af van de grootte van het rustige vlak, hoe donker het kleurverloop is en waar het wordt bekeken. Zie de getallen hieronder als vertrekpunten voor een ruislaag in de overvloeimodus Overlay of Soft Light, en oordeel daarna op het oog op volle grootte.

Waar je de korrel plaatst

Korrel hoeft niet gelijkmatig te zijn. Hij oogt het natuurlijkst op grote, rustige kleurvlakken en op donkere tonen, waar filmkorrel in het echt het best zichtbaar is. Houd hem lichter achter kleine tekst, want ruis aan de randen van letters laat ze zacht ogen. En houd je logo en letters boven de korrellaag, niet eronder, zodat ze scherp blijven.

Korrel toevoegen aan een kleurverloop in CSS

De lichtste methode is een SVG-ruisfilter als achtergrondafbeelding. feTurbulence genereert willekeurige ruis, feColorMatrix haalt de kleur eruit zodat hij niet spikkelt, en een overvloeimodus mengt hem in het kleurverloop eronder. Hogere waarden voor baseFrequency geven fijnere korrel, en stitchTiles laat de tegel zonder naden herhalen.

.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;
}

Werk je liever met een afbeelding, dan doet een kleine ruistegel die als PNG is opgeslagen hetzelfde als de SVG. Houd hem zonder verlies: ruistegels in JPEG pikken compressieartefacten op. Voor meer patronen en trucs met textuur zonder afbeeldingen, zie ruistextuur in CSS.

Korrel toevoegen in ontwerptools

1. 1

   Bouw eerst het kleurverloop

   Krijg de kleuren, stops en compositie goed op een schone laag. Korrel kan een modderig verloop niet redden, zie modderige kleurverlopen.

2. 2

   Voeg een aparte ruislaag toe

   Gebruik het ruiseffect van de tool of een ruistextuur op een eigen laag boven het kleurverloop, zodat je hem kunt bijstellen zonder aan de kleur te komen.

3. 3

   Maak hem monochroom

   Haal de verzadiging uit de ruis, zodat hij geen gekleurde spikkels toevoegt, en zet de laag dan op Overlay of Soft Light.

4. 4

   Verlaag de dekking tot hij verdwijnt en ga dan een stukje terug

   De juiste hoeveelheid ligt meestal net boven het punt waarop je hem niet meer opmerkt.

5. 5

   Exporteer op het uiteindelijke formaat, zonder verlies als het kan

   Een korrelig beeld opschalen vergroot de korrel tot vlekken. Exporteer PNG op de exacte grootte, of een JPEG van hoge kwaliteit voor foto’s.

Korrel in drukwerk

Korrel die voor een telefoonscherm is ontworpen, kan zich op papier anders gedragen. Op 300 dpi kan heel fijne ruis volledig verdwijnen, en grove ruis kan op een drukfout lijken. Maak de korrel voor posters en flyers op drukresolutie en maak een proef op het echte papier. Kleurverlopen drukken behandelt de rest van het proces.

Korrel is ook een van meerdere materialen. Papier, glas en zijde veranderen elk wat een kleurverloop zegt, en kleurverloop met textuur vergelijkt ze. Elke Mark heeft een eigen korrelinstelling naast zijn kleuren en materialen, dus de balans staat al goed als je begint met ontwerpen.