# Korreltextuur: filmkorrel toevoegen aan digitaal ontwerp

[Canonical HTML page](https://gradiently.design/nl/guide/textured-background)

Een beetje korrel is de snelste manier om een digitaal ontwerp als een gemaakt object te laten voelen. Te veel en het lijkt op een kapot scherm. Zo beoordeel je hoeveelheid, grootte en kleur.

## The short version

- Korreltextuur is een fijne, willekeurige spikkel over een ontwerp zodat vlakke digitale kleur als film, papier of druk leest.
- Korrel helpt op drie manieren: hij verbergt banding in vloeiende overgangen, bindt foto’s en vlakke graphics samen en geeft schone vormen een fysiek oppervlak.
- Voor de meeste schermontwerpen moet korrel op volledige grootte net zichtbaar zijn en op armlengte onzichtbaar; als mensen hem als eerste opmerken, is het te veel.
- Monochrome korrel is de veilige standaard; gekleurde korrel lijkt meer op echte film maar kan een palet laten verschuiven.
- Zware JPEG-compressie strijkt korrel glad, dus exporteer korrelige stilstaande beelden als PNG of JPEG van hoge kwaliteit en geef korrelige video een ruime bitrate.

**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](https://gradiently.design/nl/guide/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](https://gradiently.design/nl/guide/background-texture).

Een post van een koffiebranderij met een warme getextureerde achtergrond en een korte kop

Een warme, zacht getextureerde achtergrond leest als een gemaakt object, wat past bij een product dat met de hand is gemaakt.

Een post met een groot getal op een zacht korrelige gekleurde achtergrond

Hetzelfde gevoel draagt een nuchter feit. Korrel houdt een groot getal weg van een spreadsheet.

## 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.

| Gebruik | Hoeveelheid | Korrelgrootte | Waarom |
| --- | --- | --- | --- |
| Websiteachtergrond | Heel licht, 3 tot 6% dekking | Fijn | Grote vlakken en lang kijken maken korrel opvallend |
| Socialpost | Licht, 6 tot 12% | Fijn tot middel | Overleeft hercompressie en telefoonschermen |
| Poster of flyer | Middel, 10 tot 18% | Middel | Van een afstand bekeken leest korrel als druk |
| Retro- of filmlook | Sterk, 18 tot 30% | Middel tot grof | De korrel is deel van de stijl |
| Videoloop | Licht, geanimeerd | Fijn | Stilstaande korrel op bewegende video lijkt op vuil op de lens |

Startpunten, als dekking van een ruislaag in Overlay of Zacht licht. Pas op het oog aan; schermen en kleuren verschillen.

> **Donkere ontwerpen hebben minder nodig** Korrel valt meer op in donkere en middentonen dan op bijna wit. Begin op een donkere achtergrond met de helft van wat je op een lichte zou gebruiken.

## 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.

### Monochrome korrel

- Houdt je palet precies zoals gekozen
- Leest als druk, papier of risografie
- Veilig voor merkkleuren en logo’s
- De juiste standaard voor het meeste werk

### Gekleurde korrel

- Lijkt op analoge film
- Geeft leven aan foto’s en huidtinten
- Kan een vlakke merkkleur licht verschuiven
- Het best voor fotografische, nostalgische stijlen

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. **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. **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. **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. **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. **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](https://gradiently.design/nl/guide/grainy-gradients) de instellingen daarvoor, en [ruisverlopen](https://gradiently.design/nl/guide/noise-background) 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.

```html
<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>
```

Een vaste korrellaag over een hele pagina. Verhoog `baseFrequency` voor fijnere korrel, verlaag hem voor grovere. Haal de kleurmatrix weg voor gekleurde ruis.

Houd de dekking laag: een hele pagina korrel is een groot vlak, en 6 procent is vaak ruim genoeg. De [MDN-referentie voor feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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](https://gradiently.design/nl/guide/seamless-loop-video) 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.

## FAQ

### Wat is korreltextuur in ontwerp?

Een fijne, willekeurige spikkel van licht en donker over een ontwerp zodat vlakke digitale kleur als film, papier of druk oogt.

### Hoeveel korrel moet ik aan een afbeelding toevoegen?

Genoeg om op 100 procent zoom te zien en niet op armlengte. Voor socialposts is een ruislaag van ongeveer 6 tot 12 procent dekking in Overlay een goed begin.

### Lost korrel gradient banding op?

Meestal wel. Willekeurige ruis breekt de harde randen tussen banden op zodat het oog een vloeiende overgang leest.

### Waarom verdwijnt mijn korrel na het uploaden?

Platforms comprimeren afbeeldingen opnieuw en behandelen fijne korrel als detail dat weg mag. Gebruik iets meer korrel, exporteer PNG of JPEG van hoge kwaliteit en upload op het exacte formaat van het platform.

### Moet filmkorrel gekleurd of zwart-wit zijn?

Monochrome korrel houdt merkkleuren exact en past bij het meeste werk. Gekleurde korrel lijkt meer op analoge film en past bij fotografische stijlen.