Bild in Photoshop
Photoshop

Duotone Effekt für deine Bilder mit Photoshop

Der Duotone Effekt für Bilder ist momentan einer der großen Trends im Webdesign. Auch wenn der Einsatz von zweifarbigen Bildern nicht gerade neu ist, kann man damit trendige und poppige Effekte erzielen. Besonders beliegt ist der Effekt daher im modernen Webdesign. Hero Header oder Banner werden durch den Two-Tone Look zum Eye-Catcher und verstärken gleichzeitig  Slogans oder Buttons. Wie einfach du mit Photoshop diesen Effekt umsetzen kannst, erkläre ich dir im folgenden Tutorial.

Was ist Duotone?

Duotone wird häufig als Synonym für den Begriff Duplex verwendet. Beim Duplexdruck wird einem Graustufenbild neben schwarz eine zweite Druckfarbe hinzugefügt. Kurz: ein Bild mit zwei Farben (Duo-Tone). So kann man die mittleren Töne und die Höhen gezielt hervorheben und die Wirkung des Bildes dadurch effektvoll verändern.

Für die Umsetzung dieses Effekts gibt es in Photoshop mehrere Möglichkeiten.

  1. Duplex
    Für diese Variante muss man das Bild zunächst in ein Graustufenbild umwandeln. Anschließend kann man über die Funktion Bild > Modus > Duplex diese Technik auf das Bild anwenden. Für das Feintuning müssen noch die Duplexkurven bearbeitet werden.
  2. Verlaufsumsetzung
    Etwas schneller und einfacher geht es mit dem Einsatz einer Verlaufsumsetzung. Wie diese Variante funktioniert, erkläre ich dir Step by Step in diesem Tutorial.

Duotone Effekt mit der Verlaufsumsetzung

1. Bild in Photoshop öffnen

Öffne zunächst ein Bild in Photoshop, das du mit dem Duotone Effekt versehen willst. In diesem Tutorial habe ich ein Bild von RyanMcGuire verwendet. Du kannst es kostenfrei bei pixabay downloaden.

duotone-effekt-photoshop-01

2. Einstellungsebene: Verlaufsumsetzung

Wähle nun in der Ebenenpalette den Punkt Verlaufsumsetzung aus.

Mit der Verlaufsumsetzung werden den Graustufenbereichen eines Bildes die entsprechenden Farben des Verlaufs zugeordnet. Für ein Duo-Tone Bild wird eine Verlaufsfüllung mit zwei Farben angelegt. Der Anfangsfarbe der Füllung werden die Tiefen zugeordnet, der Endfarbe die Lichter. Die Bereiche dazwischen werden in Abstufungen den mittleren Tönen zugewiesen.

verlaufsumsetzung

Im Fenster Eigenschaften sieht man nun den aktuell eingestellten Verlauf und die Auswirkung auf das Bild. Die tiefen Bereiche sind schwarz und die hellen Bereiche weiß.

3. Verläufe bearbeiten

Für einen coolen und poppigen Duotone Effekt, wähle ich bewusst knallige Farben.
Klicke hierzu einfach in den Farbverlauf.

verlauf bearbeiten

Im neuen Dialogfeld Verläufe bearbeiten kannst du die erste Endfarbe des Verlaufs für die Tiefen (links) festlegen. Im nächsten Schritt wird die zweite Endfarbe für die Lichter (rechts) ausgewählt.

4. Farbe für Tiefen auswählen

Nach einem Klick auf den linken Farbunterbrechungsregler öffnet sich der Farbwähler. Hier kannst du die Farbe für die Tiefen des Bildes wählen.
In diesem Beispiel habe ich ein orange-rot mit dem Wert #fd5300 gewählt.

Farbe für Tiefen festlegen
Farbauswahl für die Tiefen

5. Farbe für Lichter auswählen

Nach der gleichen Vorgehensweise legst du im nächsten Schritt die Endfarbe für die hellen Bereiche fest.

Farbe für Lichter auswählen
Farbauswahl für die Lichter

Für die Lichter habe ich ein knalliges gelb mit dem Farbwert #fdee00 eingesetzt.

6. Feintuning

Kontrast verstärken

Falls das Bild zu flau sein sollte, kann du über eine neue Einstellungsebene den Kontrast erhöhen. Entweder über die Gradationskurven oder die Tonwertkorrektur, wie im folgenden Screenshot.

kontrast erhöhen
Tonwertkorrektur zur Kontrastverstärkung

7. Fertiges Duotone Bild

Bild mit Duotone effekt

 

Farb-Variationen

Für den Duotone Effekt kann man jede Farbe nutzen und sollte einfach experimentieren.
Natürlich sollten die Farben zum Farbschema der Webseite passen und der gewünschten Wirkung des Bildes entsprechen. Aber letztlich ist die Farbgebung immer Geschmacksache!

Hier ein paar Beispiele mit unterschiedlichen Farbgebungen zum Vergleich:

Duotone im Webdesign

Der Duplex-Look wurde vor allem durch die Webseite von Spotify bekannt und hat sich mittlerweile zum Trend entwickelt.
Zur Inspiration habe ich Screenshots einiger Two-Tone Webseiten gesammelt.

 

spotify
Screenshot: https://yearinmusic.spotify.com/en-GB Der Vorreiter des Duotone Webdesign Trends
holmmarcher.dk
Screenshot: http://holmmarcher.dk/en/
screenshot outlines.pt
Screenshot: http://outlines.pt/

Über den Autor

Sonia

Sonia

Sonia, Gründer von designtrax.de, ist Webmaster in einem Freiburger Ausbildungsinstitut und arbeitet nebenberuflich als WordPress Freelancer.

Kommentar schreiben

Kommentar hinterlassen