Verlaufsüberlagerungen: Fotos tönen, ohne sie zu verstecken

Eine Verlaufsüberlagerung ist eine Farbschicht, die über ein Foto ausläuft, obenauf gelegt, um es zu tönen, eine Bildserie zu vereinheitlichen oder eine Überschrift lesbar zu machen. Der Trick ist der Verlauf: Ein Teil des Fotos wird stark berührt, der Rest kaum. Deshalb wirkt eine Verlaufsüberlagerung durchdacht, wo ein flacher schwarzer Kasten mit 50 Prozent wie eine Notlösung aussieht. Du bestimmst, wo die Farbe landet, wie stark sie wird und wie sie sich mit dem Bild darunter mischt.

Vier Arten von Verlaufsüberlagerungen

Fast jedes Overlay, das du auf einer Website, einem Plakat oder einem Post siehst, gehört zu einer von vier Arten. Wer weiß, welche er braucht, spart sich viel Gefummel an Deckkraftreglern.

Der Scrim: ein Overlay für Text

Der Scrim ist das Arbeitspferd. Er beginnt völlig transparent und wird zum Rand hin dunkler, an dem deine Worte stehen, meist unten oder links. Das Foto bleibt dort unberührt, wo das Motiv ist, und der Text bekommt einen ruhigen, dunklen Boden. Nimm einen dunklen Ton aus dem Foto selbst statt reinem Schwarz: ein tiefes Braun über einem warmen Interieur, ein Marineblau über einer Meereslandschaft. Reines Schwarz sieht aus wie ein Schmierfleck.

Die oberen 40 Prozent des unteren Scrims sind völlig klar, was Gesichter und Produkte hell hält. Die Dunkelheit baut sich in der unteren Hälfte auf und erreicht ihren Höhepunkt ganz am Rand, genau dort, wo eine Bildunterschrift sitzt. Mehr Wege, Worte auf Bildern lesbar zu halten, findest du in lesbarer Text auf Fotos.

Farbschleier und Mischmodi

Mit einem Farbschleier lassen Marken Stockfotos, Handybilder und Eventfotos wie eine Familie aussehen. Leg einen Verlauf aus zwei Markenfarben über das Foto und ändere seinen Mischmodus. Der Mischmodus entscheidet, wie sich die Farbe mit dem Bild mischt, und er zählt mehr als die Farben.

So legst du eine Verlaufsüberlagerung über ein Foto

1. 1

   Entscheiden, wofür das Overlay da ist

   Text, Stimmung oder Einheitlichkeit. Ein Scrim für Text, ein Schleier für Stimmung und Einheitlichkeit. Wenn du es nicht sagen kannst, brauchst du vermutlich keins.

2. 2

   Einen dunklen Ton aus dem Foto aufnehmen

   Nimm für einen Scrim die tiefste Farbe, die schon im Bild ist, oder zwei Markenfarben für einen Schleier.

3. 3

   Den Verlauf über den Bereich legen, der ihn braucht

   Fang klar über dem Motiv an und bau zum Rand mit den Worten hin auf. Halte den Übergang lang, damit keine Linie sichtbar ist.

4. 4

   Einen Mischmodus wählen

   Normal für Scrims, Multiplizieren für helle Fotos, Negativ multiplizieren für dunkle, Farbe für eine einzelne Tönung.

5. 5

   Die Deckkraft senken, bis es fast verschwindet

   Dann einen Schritt zurück nach oben. Die besten Overlays bemerkt man erst, wenn man sie ausschaltet.

6. 6

   Den Text in Handygröße prüfen

   Verkleinere das Design auf die Größe, in der man es sieht, und lies jedes Wort. Kontrast, der auf einem Monitor funktioniert, kann auf einem Handy versagen; Farbkontrast hat die Zielwerte.

Wie dunkel eine Verlaufsüberlagerung sein sollte

Als Arbeitsgrenze gilt: Muss der dunkelste Rand eines Scrims über etwa 80 Prozent gehen, bevor der Text lesbar ist, ist das Foto an dieser Stelle zu unruhig. Verschieb die Worte, schneide anders zu oder wähl ein ruhigeres Bild. Ein Schleier über dem ganzen Bild braucht weit weniger, sonst sieht das Foto nicht mehr wie ein Foto aus.

Verlaufsüberlagerungen auf einer Website

Im Web kannst du Overlay und Foto in einer Deklaration stapeln, was sie zusammenhält, wenn sich das Bild ändert. Das Overlay kommt zuerst, weil CSS die erste Ebene obenauf malt. Alle Techniken, einschließlich Mischmodi und Pseudo-Elementen, stehen in Verlaufsüberlagerung mit CSS.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Ein Schleier, der jedes Mal zu deiner Marke passt

Overlays driften auseinander, wenn jeder Designer eigene Farben wählt. Im Studio von Gradiently lassen sich Fotos in den Farben deines Marks tönen, als Mono, Duotone oder Schleier, sodass Bilder aus verschiedenen Quellen eine Palette teilen, ohne dass du von Hand abgleichst. Und wenn Worte auf einem Mark statt auf einem Foto stehen, beruhigt er den Bereich dahinter von selbst, ganz ohne Overlay. Wie der Schleier funktioniert, steht in Duotone-Fotos in den Farben deines Marks.