# Achtergrondtexturen: korrel, papier, stof en glas

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

Textuur maakt van een vlakke schermkleur een oppervlak. Subtiel gebruikt geeft het warmte en verbergt het banding; zwaar gebruikt wordt het ruis. Zo vind je de grens.

## The short version

- Een achtergrondtextuur is fijn oppervlaktedetail, zoals korrel, papiervezel, geweven stof of matglas, over een kleur of kleurverloop gelegd.
- Textuur werkt het best op lage sterkte, gevoeld in plaats van gezien, zodat ze warmte geeft zonder te concurreren met de inhoud erop.
- De schaal van textuur moet passen bij de kijkgrootte: fijne korrel voor kleine schermen en van dichtbij kijken, grovere textuur voor grote formaten die van verder worden bekeken.
- Korrel over een kleurverloop leggen verbergt banding, omdat willekeurig detail de zichtbare stappen tussen tinten doorbreekt.
- Socialplatforms en video-encoders comprimeren afbeeldingen opnieuw, wat zeer fijne textuur kan uitsmeren, dus controleer de textuur na het uploaden.

Een **achtergrondtextuur** is fijn oppervlaktedetail over een kleur of kleurverloop: de spikkels van filmkorrel, de vezels van papier, het weefsel van linnen, de vorst van glas. Het zorgt dat een achtergrond als materiaal leest in plaats van als pixels. De regel die het meest telt is sterkte. Een textuur die je voelt in plaats van opmerkt maakt een ontwerp warmer en duurder ogend; een textuur die je als eerste opmerkt wordt het onderwerp en vecht met alles erbovenop.

Een staande post met de kop Trage ochtenden, goede koffie op een zacht getextureerd kleurverloop

Een getextureerd kleurverloop op een staande post: het oppervlak leest als materiaal en de woorden blijven leidend.

## Soorten achtergrondtextuur

| Textuur | Voelt als | Het best voor |
| --- | --- | --- |
| Korrel of ruis | Film, druk, een matte afwerking | Kleurverlopen, donkere achtergronden, alles wat banding vertoont |
| Papier | Gedrukt, handgemaakt, redactioneel | Quotes, tijdschriften, uitnodigingen, rustige merken |
| Stof en linnen | Zacht, geweven, tastbaar | Mode, interieur, horeca |
| Matglas | Modern, gelaagd, lichtgevend | Interfaces, kaarten over kleur, techmerken |
| Halftoon en riso-stippen | Retrodruk, zines, posters | Speelse en redactionele socialposts |
| Steen en beton | Stevig, architecturaal, stil | Luxe, architectuur, productfotografie |

Veelvoorkomende textuurfamilies en de associaties die ze meebrengen. Kies er één per ontwerp.

Elke textuur draagt een associatie. Korrel zegt film en druk, papier zegt handgemaakt, glas zegt interface. Kies degene die past bij hoe je merk moet aanvoelen en gebruik die overal; papier op de ene post en glas op de volgende maakt het effect ongedaan. Weet je nog niet welk gevoel je wilt, dan heeft [merkpersoonlijkheid](https://gradiently.design/nl/guide/brand-personality) een eenvoudige manier om te beslissen.

## Schaal: textuur afstemmen op kijkgrootte

Textuur leest anders op verschillende formaten. Een telefoonscherm van dichtbij toont elk spikkeltje, dus fijne korrel is genoeg. Een poster aan de overkant van de kamer of een dia op een beamer heeft grovere textuur nodig om nog op te vallen. En textuur die op een post van 1080×1350 goed staat kan verdwijnen als een platform hem tot thumbnail verkleint, of vlekkerig worden als hij opnieuw wordt gecomprimeerd.

- Story 1080×1920: fijn: 1080 × 1920
- Post 1080×1350: fijn: 1080 × 1350
- Dia 1920×1080: middel: 1920 × 1080
- A3-druk 3508×4961: grover: 3508 × 4961

Dezelfde textuur heeft per formaat en kijkafstand een andere schaal nodig.

In druk overleeft korrel over het algemeen goed en helpt ze zelfs kleurverlopen schoon te reproduceren; [kleurverlopen drukken](https://gradiently.design/nl/guide/print-gradients) behandelt de details.

## Textuur over kleurverlopen leggen

De nuttigste combinatie is textuur over een kleurverloop. Korrel doorbreekt de zichtbare stappen die in gladde overgangen verschijnen, banding genoemd, en laat een digitaal kleurverloop gedrukt lijken. De gebruikelijke methode is de textuur als aparte laag boven de kleur te leggen en te mengen met een modus als Overlay of Soft light bij lage dekking, zodat ze de kleur schaduwt in plaats van bedekt.

1. **Begin met de kleur** Zorg eerst dat het kleurverloop klopt. Textuur redt kleuren die niet samenwerken niet.
2. **Voeg één textuurlaag toe** Leg hem boven het kleurverloop. Gebruik een grijze of neutrale textuur zodat de kleur niet wordt getint.
3. **Meng hem erdoor** Zet de laag op Overlay of Soft light. Soft light is zachter en houdt kleuren schoon.
4. **Verlaag de sterkte** Verminder de dekking tot je de textuur alleen merkt als je ernaar zoekt, vaak ruim onder de helft.
5. **Controleer het donkerste gebied** Banding verstopt zich in donkere, langzame overgangen. Zorg dat de textuur daar alle stappen heeft opgelost.

Op het web is dezelfde aanpak een paar regels code; zie [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture). Waarom juist korrel zo goed staat op kleurverlopen lees je bij [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients).

## Textuur en leesbaarheid

### Vermijd

- Sterke textuur direct achter kleine tekst
- Patronen met veel contrast, zoals een gedurfd linnenweefsel onder lopende tekst
- Twee of drie verschillende texturen in één ontwerp
- Textuur zo fijn dat ze na het uploaden tot brij wordt

### Doe

- Subtiele textuur, of een rustiger gebied waar woorden staan
- Textuur met weinig contrast in dicht bij elkaar liggende tinten van één kleur
- Eén textuurfamilie in elk formaat
- Controleer de geüploade versie, niet alleen de export

Textuur voegt visuele ruis toe bij letters, en kleine letters lijden het eerst. Houd textuur subtiel waar tekst staat, of geef de woorden een rustig, gelijkmatig gebied van de achtergrond. [Tekst op drukke achtergronden](https://gradiently.design/nl/guide/type-on-busy-backgrounds) behandelt de technieken uitgebreid.

Een vierkante quotepost waarbij de getextureerde achtergrond ongewijzigd achter de tekst loopt

Textuur en kleur die dwars door de woorden lopen…

Dezelfde vierkante quotepost met de achtergrond rustiger en met meer contrast achter de tekst

…en dezelfde achtergrond die er rustige ruimte achter maakt.

## Textuur die consistent blijft

Textuur raak je makkelijk kwijt tussen tools: een korrellaag in het ene bestand, een papierafbeelding in het andere, een andere sterkte bij elke export. In Gradiently is textuur onderdeel van de achtergrond zelf. Een Mark stapelt tot drie materialen met korrel en licht, zodat hetzelfde oppervlak in elk formaat achter elk ontwerp wordt weergegeven, en zijn rustigste gebied achter de woorden schuift.

Een Mark: kleur, materiaal en korrel samen weergegeven, identiek in elk formaat.

## FAQ

### Wat is een achtergrondtextuur?

Fijn oppervlaktedetail, zoals korrel, papiervezel, stofweefsel of matglas, over een kleur of kleurverloop gelegd zodat het als fysiek materiaal leest.

### Hoe sterk moet een achtergrondtextuur zijn?

Subtiel. Je moet hem alleen merken als je ernaar zoekt. Is de textuur het eerste wat je ziet, verlaag dan de dekking.

### Lost textuur toevoegen banding in kleurverlopen op?

Korrel meestal wel. Willekeurig fijn detail doorbreekt de zichtbare stappen tussen tinten zodat de overgang glad oogt.

### Welke overvloeimodus gebruik ik voor textuur?

Soft light voor een zacht effect dat kleuren schoon houdt, of Overlay voor een sterker effect. Gebruik een neutrale grijze textuur zodat ze de kleur niet tint.

### Waarom ziet mijn textuur er vlekkerig uit op sociale media?

Platforms comprimeren uploads opnieuw, wat zeer fijne textuur kan uitsmeren. Gebruik een iets grovere textuur en controleer het geüploade resultaat.