Papiertextur als Hintergrund: haptisches Design auf dem Bildschirm

Eine Papiertextur als Hintergrund lässt ein Bildschirmdesign gedruckt, haptisch und handgemacht wirken. Das funktioniert, weil Menschen Papier als Sorgfalt lesen: eine Einladung, ein Brief, eine Speisekarte, für die jemand ein Papier ausgesucht hat. Damit es gelingt, brauchst du drei Ebenen, die zusammenspielen: eine warme oder getönte Grundfarbe, feine Fasern oder Körnung und Licht, das über das Blatt leicht ungleichmäßig fällt. Die meisten falschen Papiere scheitern daran, dass sie die dritte Ebene übertreiben.

Welcher Papierlook zu deinem Design passt

Papier ist nicht eine Textur. Hadernpapier, Kraftpapier, Zeitungspapier und Washi fühlen sich völlig verschieden an, und jedes passt zu einer anderen Art von Marke. Benenn zuerst das Papier, das du nachahmst.

So erstellst du einen Hintergrund mit Papiertextur

Überzeugendes Papier kannst du in jedem Programm mit Rauschen und Füllmethoden von Grund auf bauen. Gescanntes Papier geht auch, aber eine gebaute Textur skaliert sauber auf jede Größe und zeigt nie den Rand eines Scannerglases.

1. 1

   Die Basis füllen

   Füll die Fläche mit deiner Papierfarbe aus der Tabelle, zum Beispiel #f3ead8 für ungestrichenes Creme.

2. 2

   Feine Struktur hinzufügen

   Leg eine mittelgraue Ebene an, wende monochromes Rauschen an und stell sie auf Multiplizieren oder Weiches Licht mit etwa 4 bis 8 Prozent. Das ist die Oberflächenkörnung, die jedes Papier hat.

3. 3

   Fasern hinzufügen

   Leg eine zweite, gröbere Rauschebene an und zieh oder verwisch sie leicht in eine Richtung. Bei sehr geringer Deckkraft liest sie sich wie Fasern, die durch das Blatt laufen.

4. 4

   Das Licht ungleichmäßig machen

   Füg einen weichen radialen Verlauf hinzu, in einer Ecke etwas heller und in der gegenüberliegenden etwas tiefer. Echtes Papier ist nie ganz gleichmäßig beleuchtet.

5. 5

   Die Schrift prüfen

   Setz deinen kleinsten Text darauf und sieh ihn dir auf einem Smartphone an. Ist irgendein Wort schwerer zu lesen, reduziere zuerst die Textur.

Die feine Struktur aus Schritt zwei ist dieselbe Technik, die in Körnungstextur erklärt wird. Papier nutzt einfach weniger davon, auf einer wärmeren Basis.

Dezentes Papier schlägt falsches Papier

Suchergebnisse für Papierhintergründe sind voller zerknüllter Blätter, verbrannter Ränder und Kaffeeringe. Sie wirken wie eine Freizeitpark-Version von Papier und kämpfen gegen jedes Wort, das du daraufsetzt. Eine gute Papiertextur ist so leise, dass man sie spürt, bevor man sie sieht.

Ideen für Papiertexturen in echten Designs

Papier ist dort am stärksten, wo es ganz natürlich ein gedrucktes Objekt gäbe. An diesen Stellen lohnt es sich.

• Speisekarten auf ungestrichenem Creme, in einer Serifenschrift gesetzt. Siehe Speisekarten gestalten.
• Newsletter und Journale, bei denen Papier langes Lesen ruhiger wirken lässt.
• Hochzeits- und Eventeinladungen; Hochzeitseinladungen gestalten zeigt Layouts.
• Handwerks- und Manufakturmarken, auf Kraftpapier oder grauem Recyclingpapier.
• Zitatkarten, bei denen eine einzelne Zeile auf Papier wie eine handgeschriebene Notiz wirkt.

Schrift und Farbe auf Papierhintergründen

Papier verändert, wie Schrift wirkt. Serifenschriften fühlen sich auf Creme und Baumwolle zu Hause, weil sie für den Druck gezeichnet wurden; eine klare Groteske auf Zeitungs- oder Recyclingpapier wirkt modern und leicht industriell. Serif oder Sans Serif erklärt die Abwägung. Was du auch wählst, setz die Schrift in einem warmen Fast-Schwarz wie #2b2420 statt in reinem Schwarz, das auf einem getönten Blatt digital wirkt.

Halte Fließtext in einer angenehmen Größe und gib ihm mehr Gewicht als auf Weiß: Textur schluckt etwas Kontrast, besonders auf Smartphones. Für kurze Zeilen auf Papier, etwa einen einzigen Satz auf einer Zitatkarte, kannst du dir einen leichteren Schnitt und mehr Raum leisten. Wenn du Papier gegen andere Oberflächen abwägst, vergleicht Hintergrundtextur die wichtigsten Familien nebeneinander.

Papiertextur in CSS

Für eine Website legst du einen ungleichmäßigen Lichtverlauf über die Grundfarbe und fügst dann mit SVG eine sehr leichte Rauschebene hinzu. Eine niedrigere baseFrequency als für Filmkorn ergibt ein weicheres, faserigeres Gefühl.

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

Unter den Marks von Gradiently gibt es Papier- und Sandmaterialien: handgemachte Fasern, weiche Lasuren und feine, treibende Körnung, live in jeder Größe gerendert, wobei der ruhigste Teil des Blatts hinter deine Wörter wandert. Such im Markt nach „Papier“ oder filtere nach einem hellen Grund, um einen zu finden, und gestalte kostenlos damit.