Korreltextuur: filmkorrel toevoegen aan digitaal ontwerp

Korreltextuur is een fijne laag willekeurige ruis over een ontwerp zodat volkomen vlakke digitale kleur eruitziet alsof hij gedrukt, op film gefotografeerd of in papier geperst is. Het is bewust subtiel: bij de juiste hoeveelheid noemt niemand het, mensen voelen gewoon dat het beeld een oppervlak heeft. Het goed doen komt neer op vier instellingen: hoeveelheid, grootte, kleur en overvloeimodus.

Waarom korrel digitaal ontwerp beter laat ogen

Schermen kunnen kleur tonen die geen fysiek materiaal haalt: volkomen gelijkmatig, volkomen schoon. Die properheid laat veel digitale ontwerpen goedkoop of onaf voelen. Korrel brengt een beetje van de onregelmatigheid terug die elk echt oppervlak heeft. Het doet ook drie praktische klussen.

• Het verbergt banding. Vloeiende overgangen breken op 8-bits schermen in zichtbare strepen. Willekeurige ruis breekt die randen op zodat het oog een doorlopende overgang leest. Gradient banding legt de oorzaak uit.
• Het verenigt gemengde elementen. Een foto heeft natuurlijke korrel en een vlakke vorm niet. Eén korrellaag over beide laat ze bij hetzelfde beeld horen.
• Het voegt een oppervlak toe. Vlakke kleur leest als een scherm; kleur met korrel leest als een materiaal. Daarom zit korrel in het hart van de meeste keuzes voor achtergrondtextuur.

Hoeveel korrel je toevoegt

De eerlijke test is afstand. Bekijk het ontwerp op 100 procent: je moet de korrel net zien. Kijk er dan naar op je telefoon op armlengte: dan niet. Is korrel het eerste wat iemand opmerkt, halveer hem dan. Verschillende klussen vragen verschillende hoeveelheden.

Monochrome of gekleurde korrel

Echte filmkorrel is gekleurd: minuscule spikkels rood, groen en blauw die per beeld variëren. Digitale monochrome korrel is alleen licht en donker. Beide hebben hun plek.

Korrelgrootte telt even zwaar als kleur. Fijne korrel voelt duur en modern. Grove korrel voelt handgemaakt, ruw en luid. Schaal de korrel naar de uitvoer: een post van 1080×1350 heeft fijnere korrel nodig dan een A3-poster van 3508×4961, omdat de poster van verder weg wordt bekeken.

Korreltextuur toevoegen in elke ontwerptool

1. 1

   Maak een ruislaag

   Vul een nieuwe laag met middengrijs (#808080) en voeg ruis toe. In de meeste editors is dit een filter genaamd Ruis toevoegen, Ruis of Korrel. Kies Gaussiaans en monochroom voor een schone start.

2. 2

   Stel de overvloeimodus in

   Zet de laag op Overlay of Zacht licht. Het grijs verdwijnt en alleen de spikkel blijft, die de kleuren eronder lichter en donkerder maakt.

3. 3

   Verlaag de dekking

   Breng hem terug naar de hoeveelheid in de tabel hierboven. Controleer op 100 procent zoom en nog eens op je telefoon.

4. 4

   Houd hem bovenop

   Korrel hoort boven de achtergrond en foto’s. Laat kleine letters en logo’s boven de korrel als je ze scherp wilt, of eronder voor een gedrukt gevoel.

5. 5

   Exporteer zorgvuldig

   Exporteer PNG of JPEG van hoge kwaliteit. Zware compressie smeert korrel uit tot vlekken, wat slechter oogt dan geen korrel.

Voeg je korrel specifiek toe aan een kleurovergang, dan heeft korrelige kleurverlopen de instellingen daarvoor, en ruisverlopen heeft kant-en-klare recepten.

Korreltextuur op het web

Op een website heb je geen afbeeldingsbestand nodig voor korrel. Een inline SVG met het filter feTurbulence tekent ruis in de browser op elk formaat, dus het blijft scherp op elk scherm en weegt bijna niets.

<svg class="grain" aria-hidden="true">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

<style>
  .grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.06;
  }
</style>

Houd de dekking laag: een hele pagina korrel is een groot vlak, en 6 procent is vaak ruim genoeg. De MDN-referentie voor feTurbulence noemt elke instelling.

Korrel in video en beweging

Op bewegend beeld moet korrel ook bewegen. Eén stilstaande korrellaag over video lijkt op een vuile lens. Gebruik geanimeerde korrel die elk beeld verandert, houd hem fijn en exporteer met een ruime bitrate, want videocompressie behandelt korrel als detail dat weg mag. Lees voor loops naadloze videoloops voordat je textuur toevoegt.

Gradiently bouwt korrel in elke Mark in als onderdeel van zijn recept, naast kleur, materiaal, licht en beweging, zodat de textuur voor elk formaat waarin je ontwerpt opnieuw wordt opgebouwd in plaats van uit één afbeelding uitgerekt. Wil je een achtergrond die zijn oppervlak al heeft, kijk dan rond op de Markt en ontwerp met elke vrije Mark.