Papiertextuur als achtergrond: voelbare ontwerpen op scherm

Een papiertextuurachtergrond laat een schermontwerp gedrukt, tastbaar en handgemaakt voelen. Het werkt omdat mensen papier lezen als zorg: een uitnodiging, een brief, een menukaart waarvoor iemand een papiersoort koos. Om het goed te doen heb je drie lagen nodig die samenwerken: een warme of getinte basiskleur, een fijne vezel of korrel en licht dat over het vel iets ongelijkmatig valt. Het meeste namaakpapier faalt doordat het de derde laag overdrijft.

Welke papierlook past bij je ontwerp

Papier is niet één textuur. Katoenpapier, kraft, krantenpapier en washi voelen totaal anders, en elk past bij een ander soort merk. Begin met het benoemen van de papiersoort die je nabootst.

Zo maak je een papiertextuurachtergrond

Je kunt overtuigend papier van nul bouwen in elke editor met ruis en overvloeimodi. Gescand papier werkt ook, maar een gebouwde textuur schaalt netjes naar elk formaat en laat nooit de rand van een scanner zien.

1. 1

   Vul de basis

   Vul het canvas met je papierkleur uit de tabel, bijvoorbeeld #f3ead8 voor ongecoat crème.

2. 2

   Voeg fijne structuur toe

   Voeg een middengrijze laag toe, pas monochrome ruis toe en zet hem op Multiply of Soft Light op ongeveer 4 tot 8 procent. Dit is de oppervlaktekorrel die elk papier heeft.

3. 3

   Voeg vezel toe

   Voeg een tweede, grotere ruislaag toe en rek of vervaag die licht in één richting. Op heel lage dekking leest het als vezels die door het vel lopen.

4. 4

   Maak het licht ongelijkmatig

   Voeg een zachte radiale vervaging toe, in één hoek iets lichter en in de tegenoverliggende iets dieper. Echt papier wordt nooit perfect gelijkmatig belicht.

5. 5

   Controleer de inkt

   Plaats je kleinste tekst erbovenop en bekijk het op een telefoon. Als een woord moeilijker te lezen is, verminder dan eerst de textuur.

De fijne structuur in stap twee is dezelfde techniek als uitgelegd in korreltextuur. Papier gebruikt er gewoon minder van, met een warmere basis.

Subtiel papier wint van namaakpapier

Zoekresultaten voor papierachtergronden staan vol verkreukelde vellen, verbrande randen en koffieringen. Ze zien eruit als een pretparkversie van papier en vechten met elk woord dat je erop zet. Een goede papiertextuur is stil genoeg dat mensen hem voelen voor ze hem zien.

Ideeën voor papiertextuur in echte ontwerpen

Papier is op zijn best waar een gedrukt object vanzelf zou bestaan. Dit zijn de plekken waar het zijn plaats verdient.

• Restaurantmenukaarten op ongecoat crème, gezet in een schreeflettertype. Zie ontwerp van restaurantmenu’s.
• Nieuwsbrieven en dagboeken, waar papier lang lezen rustiger maakt.
• Huwelijks- en evenementuitnodigingen; ontwerp van huwelijksuitnodigingen heeft layouts.
• Ambachtelijke en handgemaakte merken, op kraft of grijs kringlooppapier.
• Citaatkaarten, waar één regel op papier voelt als een briefje dat iemand schreef.

Tekst en inkt op papierachtergronden

Papier verandert hoe tekst leest. Schreeflettertypes voelen thuis op crème en katoen omdat ze voor druk zijn getekend; een strak schreefloos lettertype op krantenpapier of grijs kringlooppapier voelt modern en een tikje industrieel. Schreef versus schreefloos legt de afweging uit. Welke je ook kiest, zet de inkt in een warm bijna zwart zoals #2b2420 in plaats van zuiver zwart, dat er digitaal uitziet tegen een getint vel.

Houd lopende tekst op een prettig formaat en geef hem meer gewicht dan op wit: textuur eet een beetje contrast, vooral op telefoons. Voor korte regels op papier, zoals één zin op een citaatkaart, kun je een lichter gewicht en meer ruimte veroorloven. Weeg je papier af tegen andere oppervlakken, dan vergelijkt achtergrondtextuur de belangrijkste families naast elkaar.

Papiertextuur in CSS

Leg voor een website een ongelijkmatig lichtverloop over de basiskleur en voeg dan een heel lichte ruislaag toe met SVG. Een lagere baseFrequency dan je voor filmkorrel zou gebruiken geeft een zachter, vezeliger gevoel.

.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::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='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}

Gradiently heeft papier- en zandmaterialen onder zijn Marks: handgemaakte vezel, zachte wassingen en fijne drijvende korrel, live gerenderd op elk formaat, waarbij het rustigste deel van het vel achter je woorden meebeweegt. Zoek op de Markt naar “papier” of filter op een lichte ondergrond om er een te vinden, en ontwerp er gratis mee.