Körnung: Filmkorn für digitale Designs

Körnung ist eine feine Schicht zufälligen Rauschens über einem Design, damit vollkommen flache digitale Farbe aussieht, als wäre sie gedruckt, auf Film fotografiert oder in Papier gepresst. Sie ist absichtlich dezent: In der richtigen Menge benennt sie niemand, man spürt nur, dass das Bild eine Oberfläche hat. Es kommt auf vier Einstellungen an: Menge, Größe, Farbe und Mischmodus.

Warum Körnung digitale Designs besser aussehen lässt

Bildschirme zeigen Farbe, die kein physisches Material zeigen kann: vollkommen gleichmäßig, vollkommen sauber. Genau diese Sauberkeit lässt viele digitale Designs billig oder unfertig wirken. Körnung bringt ein wenig von der Unregelmäßigkeit zurück, die jede echte Oberfläche hat. Außerdem erfüllt sie drei praktische Aufgaben.

• Sie verbirgt Banding. Weiche Verläufe zerfallen auf 8-Bit-Bildschirmen in sichtbare Streifen. Zufälliges Rauschen bricht diese Kanten auf, sodass das Auge einen durchgehenden Übergang liest. Banding bei Farbverläufen erklärt die Ursache.
• Sie verbindet gemischte Elemente. Ein Foto hat natürliche Körnung, eine flache Form keine. Eine Kornschicht über beidem lässt sie wirken, als gehörten sie zum selben Bild.
• Sie gibt eine Oberfläche. Flache Farbe wirkt wie ein Bildschirm; Farbe mit Körnung wirkt wie ein Material. Deshalb steht Körnung im Zentrum der meisten Entscheidungen für Hintergrundtexturen.

Wie viel Körnung du hinzufügst

Der ehrliche Test ist der Abstand. Sieh dir das Design bei 100 Prozent an: Die Körnung sollte gerade sichtbar sein. Dann auf dem Handy auf Armlänge: Dort sollte sie es nicht sein. Ist Körnung das Erste, was jemandem auffällt, halbiere sie. Verschiedene Aufgaben vertragen verschiedene Mengen.

Monochrome oder farbige Körnung

Echtes Filmkorn ist farbig: winzige rote, grüne und blaue Punkte, die sich von Bild zu Bild ändern. Digitale monochrome Körnung ist nur hell und dunkel. Beide haben ihren Platz.

Die Korngröße zählt genauso viel wie die Farbe. Feines Korn wirkt hochwertig und modern. Grobes Korn wirkt handgemacht, rau und laut. Pass die Körnung an die Ausgabe an: Ein Post mit 1080×1350 braucht feineres Korn als ein A3-Plakat mit 3508×4961, weil das Plakat aus größerer Entfernung gesehen wird.

So fügst du Körnung in jedem Designtool hinzu

1. 1

   Leg eine Rauschebene an

   Füll eine neue Ebene mit mittlerem Grau (#808080) und füge Rauschen hinzu. In den meisten Programmen heißt der Filter Rauschen hinzufügen, Rauschen oder Körnung. Wähle Gaußsche Verteilung und monochromatisch für einen sauberen Start.

2. 2

   Stell den Mischmodus ein

   Stell die Ebene auf Ineinanderkopieren oder Weiches Licht. Das Grau verschwindet, nur das Gesprenkel bleibt und hellt die Farben darunter auf oder dunkelt sie ab.

3. 3

   Senk die Deckkraft

   Bring sie auf die Menge aus der Tabelle oben. Prüfe bei 100 Prozent Zoom und noch einmal auf dem Handy.

4. 4

   Lass sie oben

   Körnung gehört über Hintergrund und Fotos. Lass kleine Schrift und Logos über der Körnung, wenn sie scharf bleiben sollen, oder darunter für ein gedrucktes Gefühl.

5. 5

   Exportiere sorgfältig

   Exportiere PNG oder hochwertiges JPEG. Starke Kompression verschmiert Körnung zu Flecken, das sieht schlimmer aus als gar keine Körnung.

Wenn du Körnung gezielt einem Farbverlauf hinzufügst, hat körnige Farbverläufe die Einstellungen dafür, und Rausch-Hintergründe hat fertige Rezepte.

Körnung im Web

Auf einer Website brauchst du keine Bilddatei für Körnung. Ein Inline-SVG mit dem Filter feTurbulence zeichnet Rauschen im Browser in jeder Größe, es bleibt also auf jedem Bildschirm scharf und wiegt fast nichts.

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

Halte die Deckkraft niedrig: Eine ganze Seite Körnung ist eine große Fläche, und 6 Prozent reichen oft. Die MDN-Referenz zu feTurbulence listet jede Einstellung auf.

Körnung in Video und Animation

Auf bewegtem Bild sollte sich auch die Körnung bewegen. Eine einzelne stillstehende Kornschicht über Video sieht aus wie eine schmutzige Linse. Nutze animierte Körnung, die sich in jedem Frame ändert, halte sie fein und exportiere mit großzügiger Bitrate, denn Videokompression behandelt Körnung als Detail, das weg kann. Für Loops lies nahtlose Video-Loops, bevor du Textur hinzufügst.

Gradiently baut Körnung als Teil des Rezepts in jeden Mark ein, neben Farbe, Material, Licht und Bewegung, sodass die Textur in jeder Größe, in der du gestaltest, frisch rendert, statt aus einem Bild gestreckt zu werden. Wenn du einen Hintergrund willst, der seine Oberfläche schon hat, stöbere im Markt und gestalte mit einem beliebigen ungesicherten Mark.