Die wichtigsten non-destruktiven Photoshop-Techniken + Tipps, Tricks & Videos

Von Jonas

In diesem Artikel lernt ihr die wichtigsten Photoshop-Techniken für verlustfreies (non-destruktives) Arbeiten kennen.

Aktualisiert am 23. Mai 2012 Lesezeit ca. 12 Min. 15 Kommentare

Wer kreativ arbeitet, probiert aus, nimmt häufig Korrekturen und Anpassungen vor und verwirft die Entscheidungen evtl. einen Tag später wieder. Um trotz des sprunghaften Ablaufs effektiv zu sein, sollte man möglichst wenig Pixel unwiederbringlich zerstören. Korrekturen lassen sich nur so schnell und unkompliziert vornehmen. Dieses Prinzip nennt sich non-destruktives oder verlustfreies Arbeiten und ist die Basis eines professionellen Workflows. Mit jeder Photoshop-Version kommen neue verlustfreie Methoden hinzu. In diesem Beitrag möchte ich euch die wichtigsten Techniken vorstellen.

Einstellungsebenen, Füllebenen & Korrekturen

Der Klassiker unter den non-destruktiven Methoden ist die Einstellungs- oder Füllebene. In neuen Photoshop-Versionen werden Einstellungsebenen auch als „Korrektur“ bezeichnet und in einem entsprechenden Bedienfeld zusammengefasst.

Mit einer Einstellungsebene könnt ihr Bildkorrekturen vornehmen und diese Korrekturen auch im Nachhinein noch verändern oder deaktivieren. Es gibt Einstellungsebenen für folgende Anpassungen (Stand: CS6):

• Helligkeit / Kontrast
• Tonwertkorrektur
• Gradationskurve
• Belichtung
• Dynamik
• Farbton / Sättigung
• Farbbalance
• Schwarz / Weiß
• Fotofilter
• Kanalmixer
• Color-Lookup
• Umkehren
• Tonwerttrennung
• Schwellenwert
• Verlaufumsetzung
• Selektive Farbkorrektur

Als Füllebenen stehen folgende Möglichkeiten zur Auswahl (Stand: CS6):

• Farbfläche
• Verlauf
• Muster

Einstellungsebenen erzeugen

Eine neue Einstellungsebene/Korrektur lässt sich auf verschiedene Arten erzeugen:

• Über „Ebene → Neue Einstellungsebene“
• Über das Icon „neue Füll- oder Einstellungsebene“ im Fuß des Ebenen-Bedienfeldes
• Über das Bedienfeld „Korrekturen“

Sobald ihr eine Korrekturebene hinzugefügt habt, könnt ihr im Bedienfeld „Eigenschaften“ entsprechende Anpassungen vornehmen. Im Ebenen-Bedienfeld werden die Korrekturen als separate Ebene angezeigt und wirken sich auf alle darunterliegenden Ebenen aus. Damit sich eine Einstellungsebene nur auf die darunterliegende Ebene auswirkt, müsst ihr eine Schnittmaske erstellen.

Korrekturen automatisch als Schnittmaske hinzufügen

Klickt auf den kleinen Pfeil oben rechts im Korrekturen-Bedienfeld. Anschließend könnt ihr auswählen, dass neue Korrekturen automatisch als Schnittmaske hinzugefügt werden. (Menüpunkt: Auf Ebene beschränken). Ihr könnt auch festlegen, dass automatisch eine Maske hinzugefügt wird (Menüpunkt: Standardmäßig Maske hinzufügen).

Smartobjekte

Smartobjekte gehören zu den mächtigsten Werkzeugen von Photoshop. Ein Smartobjekt erleichtert verschiedene Bereiche der Bildbearbeitung und hilft gleichzeitig bei der non-destruktiven Arbeit.
Ein Smartobjekt dient als Container-Element für eine einzelne Ebene oder eine Gruppe von Ebenen. Wenn ihr eine Ebene/eine Gruppe in ein Smartobjekt umwandelt, merkt sich Photoshop alle Daten, die zu diesem Zeitpunkt vorhanden waren und fasst sie im Smartobjekt zusammen. Das Smartobjekt könnt ihr nun bearbeiten, ohne dass dies Auswirkungen auf die enthaltenen Elemente hat. Ihr könnt das Objekt also beispielsweise beliebig oft skalieren, ohne dass Qualität verloren geht.
Ob es sich bei einer Ebene um ein Smartobjekt handelt, erkennt ihr an dem Icon der Ebene.

Smartobjekte erzeugen

Um ein Smartobjekt zu erzeugen, wählt in der Ebenenpalette zunächst die Ebene(n)/Gruppe(n) aus, die ihr umwandeln wollt. Anschließend wählt ihr eine der folgenden Optionen:

• Macht einen Rechtsklick in die Auswahl des Ebenenbedienfeldes und wählt dann „In Smartobjekt konvertieren“.
• Wählt „Filter → Für Smartfilter konvertieren“
• Wählt „Ebene → Smartobjekte → In Smartobjekt konvertieren“

Wenn ihr Bilder per Drag and Drop in Photoshop hineinzieht, erzeugt Photoshop i.d.R. automatisch ein Smartobjekt.

Smartobjekte verschachteln

Wenn ihr mehrere Objekte in einem Smartobjekt zusammengefasst habt, könnt ihr über einen Doppelklick auf das Icon in der Ebenenpalette das Smartobjekt „betreten“. Das Smartobjekt wird dabei in einer neuen Datei geöffnet, die im *.psb-Dateiformat (Photoshop-Big) erstellt wird. Innerhalb der Datei seht ihr nun alle Ebenen und könnt wie gewohnt Anpassungen vornehmen. Smartobjekte können auch mehrmals verschachtelt werden.

Instanzen von Smartobjekten erstellen

Wenn ihr ein Smartobjekt kopiert und anschließend über einen Doppelklick den Inhalt eines der Smartobjekts verändert, wirkt sich diese Änderung auf alle Smartobjekte aus, die von der Ursprungsquelle abhängig sind.
Ein Beispiel: Ihr erstellt einen Button für eure Website. Sobald ihr mit der Gestaltung des Buttons zufrieden seid, fasst ihr alle „Button-Ebenen“ in einem Smartobjekt zusammen. Anschließend erstellt ihr Kopien des Buttons und platziert diese im Layout. Nun möchtet ihr später den Button verändern. Dazu müsst ihr dank Smartobjekt nicht jeden Button einzeln anpassen, sondern nur den Inhalt eines Button-Objektes. Die Veränderungen wirken sich auf alle Buttons aus.

Inhalte von Smartobjekten ersetzen

Wenn ihr euch innerhalb eines Smartobjekts befindet, könnt ihr das Dokument wie gewohnt speichern. Dabei bietet Photoshop standardmäßig das *.psb (Photoshop Big) Dokumentformat für große Dateien an. Ihr könnt das Smartobjekt allerdings auch als *.psd abspeichern. Wenn ihr jetzt Änderungen am Smartobjekt vornehmt und speichert, aktualisiert Photoshop nicht mehr automatisch die abhängigen Dateien. Um die Ansicht zu aktualisieren, müsst ihr in das Dokument wechseln in dem das Smartobjekt eingebunden ist. Über einen Rechtsklick auf das Smartobjekt im Ebenenbedienfeld könnt ihr „Inhalt ersetzen“ wählen. Im nun folgenden Dialog wählt ihr die gespeicherte Datei aus.

Verknüpfte Smartobjekte

Mit verknüpften Smartobjekten können Layouts und Collagen modular verwaltet werden. Verschiedene Designer können gleichzeitig an verschiedenen Bereichen eines Projekts arbeiten und auch für den einzelnen Designer wird der Workflow enorm vereinfacht und beschleunigt. Photoshop bietet seit Version 14.2 diese Funktion. Einen ausführlichen Beitrag findet ihr hier: Verknüpfte Smartobjekte in Photoshop CC (14.2+)

Video: Verschachtelte Smartobjekte und Smartfilter

In diesem Screencast zeige ich euch, welche Vorteile die Arbeit mit Smartobjekten bietet. Ich gehe kurz auf die Basics ein, zeige wie Smartfilter eingesetzt werden und wie ihr mit verschachtelten, voneinander abhängigen Objekten arbeitet.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Smart-Filter

Mit Filtern lassen sich in Photoshop unzählige Effekte erzeugen. Der Nachteil von Filtern ist jedoch, dass Sie die Pixel einer Ebene dauerhaft verändern. Sobald Ihr einen Filter jedoch auf ein Smartobjekt anwendet, handelt es sich bei diesem Filter um einen sogenannten Smart-Filter. Smart-Filter stehen in Version CS6 für nahezu alle Filterarten zur Verfügung. Lediglich die Weichzeichnungs-Tools und die Objektivunschärfe werden nicht unterstützt.
Im Gegensatz zu einem normalen Filter arbeitet der Smart-Filter verlustfrei. Sobald ihr einen Filter angewendet habt, seht ihr einen neuen Eintrag in der Ebenenpalette.

Der Filter kann jederzeit ein- und ausgeschaltet werden und lässt sich über die automatisch hinzugefügte Maske bearbeiten. Mit einem Doppelklick auf das Icon des entsprechenden Smartfilters öffnet ihr die „Eigenschaften“ und könnt auch nachträglich noch Korrekturen vornehmen oder die Einstellungen anpassen.

50%-Grauebenen / Neutrale Ebenen

Jede Ebene in Photoshop kann mit einem Mischmodus versehen werden, der bestimmt, wie die Pixel dieser Ebene sich auf die darunterliegenden Ebenen auswirken. Den Mischmodus könnt ihr im Kopf des Ebenenbedienfeldes einstellen.
Die Mischmodi „Ineinanderkopieren“, „Weiches Licht“, „Hartes Licht“, „Strahlendes Licht“ und „Lineares Licht“ haben die Eigenschaft, dass 50% graue Pixel unsichtbar werden. Hellere Pixel beleuchten die Ebenen darunter, dunklere Pixel dunkeln die Ebenen darunter ab. 50% Grauebenen bieten sich also optimal an, um Licht und Schatten auf einer separaten Ebene einzuzeichnen.

50% Grauebene erstellen

Um eine Ebene mit einem mittleren Grauton (exakt 50% Grau) zu füllen, gibt es wie immer verschiedene Wege:

• Über „Bearbeiten > Fläche füllen > Verwenden: 50% Grau“
• Alt + Klick auf das Icon für eine neue Ebene im Ebenenbedienfeld. Im folgenden Dialog muss als Modus einer der oben genannten Mischmodi gewählt werden. Anschließend setzt ihr den Haken in der Checkbox darunter um die Ebene mit neutraler Farbe zu füllen.

Licht und Schatten

Um Licht und Schatten auf einer neutralen Ebene einzuzeichnen, bieten sich das Abwedler/Nachbelichter-Werkzeug und der Modus „Weiches Licht“ an. Mit dem Abwedler hellt ihr die Grautöne auf, der Nachbelichter dunkelt ab. Mit dieser Technik könnt ihr sehr komfortabel Licht und Schatten für die darunterliegende Ebene einzeichnen.
Zu diesem Thema habe ich bereits einen Artikel inkl. Video erstellt: Screencast: Photoshop-Elemente verlustfrei beleuchten.

Strukturen

Neutrale Ebenen bieten sich auch an um dezente Strukturen, wie beispielsweise ein leichtes Rauschen, hinzuzufügen und später noch anpassen zu können. Konvertiert die Grauebene dazu in einen Smartobjekt und fügt über einen Smart-Filter ein leichtes Rauschen hinzu. Nun könnt ihr alle Bestandteile der Struktur zu jeder Zeit korrigieren.

Lens-Flares und Beleuchtungseffekte

Wenn ihr Lense Flairs hinzufügen wollt, bietet sich eine neutrale Ebene ebenfalls an. Über „Filter > Renderfilter > Blendenflecke“ könnt ihr den Lense-Flair hinzufügen und anschließend beliebig im Bild positionieren. Blendenflecke sehen meistens im Mischmodus „Hartes Licht“ am besten aus.

Auch die Beleuchtungseffekte unter „Filter → Renderfilter → Beleuchtungseffekte“ lassen sich über neutrale Ebenen perfekt steuern. Alternativ können beide Filter auch als Smart-Filter eingesetzt werden.

Ebenenmasken

Über Masken lassen sich Bildbereiche ausblenden und freistellen, ohne dass die Pixel tatsächlich entfernt werden, wie es etwa beim Radiergummi der Fall ist. Eine Maske kann auf verschiede Arten hinzugefügt werden:

• Über „Ebene → Ebenenmasken → Aus Transparenz“
• Über das Icon „Ebenenmaske hinzufügen“ im Fuß des Ebenenbedienfeldes.

Sobald eine Maske aktiv ist, könnt ihr mit Schwarz und Weiß auf dieser Maske arbeiten. Ebenenbereiche, die auf der Maske weiß abgebildet werden, sind sichtbar, schwarz maskierte Bereiche sind unsichtbar. Grautöne erzeugen Transparenzen auf der Ebene.
Im Bedienfeld „Eigenschaften“ ist die Maske ebenfalls aufgeführt. Hier könnt ihr die Maske weiter bearbeiten, beispielsweise die Maskenkante weichzeichnen oder die Maske invertieren.

Maske verbessern

Die detailliertesten Einstellungen verbergen sich hinter dem Button „Maske verbessern“. Das entsprechende Bedienfeld bietet sich vor allem für komplexe Freistellarbeiten wie Haare etc. an.

Zunächst solltet ihr mit dem „Radius verbessern Werkzeug“, das automatisch aktiv ist sobald das Fenster geöffnet wurde, die Maskenkante nachzeichnen. Die Einstellungen innerhalb des Bedienfeldes wirken sich dann nur noch auf den gewählten Bereich aus.
Über den „Radius“ könnt ihr den Bereich verringern oder ausweiten. Auch ein Klick auf „Smart Radius“ lohnt sich. Hierbei passt Photoshop den Radius automatisch an die Bildbereiche an.
Im Abschnitt „Kante anpassen“ könnt ihr die Maske innerhalb eurer Auswahl noch weiter optimieren. Insbesondere der „Kontrast“ und der Punkt „Kante verschieben“ führt hier zu ansprechenden Ergebnissen.

Farbbereich

Über den Button „Farbbereich“ könnt ihr mittels Pipette Farben auswählen, die für die Maske verwendet werden sollen. Über die Toleranz bestimmt ihr, wie viele ähnliche Farben ebenfalls in die Maske aufgenommen werden sollen. Hier solltet ihr darauf achten, dass ihr keine zu scharfen Kanten erzeugt, sondern weiche Übergänge.
Wenn ihr die „lokalisierten Farbbereiche“ aktiviert, könnt ihr über den Bereichsregler festlegen in welchem Radius Farben aufgenommen werden.

Ebenenstile & Stile

Die Ebenenstile sind ebenfalls Klassiker unter den non-destruktiven Techniken und besonders im Webdesign äußerst hilfreich. Ein Ebenenstil kann auf eine Ebene oder Ebenengruppe (ab CS6) angewendet werden und überlagert die Pixel dieser Ebene(n) mit weiteren visuellen Eigenschaften. Über das Bedienfeld „Stile“ können Ebenenstile gespeichert und auf andere Ebenen angewendet werden.
Es existieren Ebenenstile für folgende Effekte:

• Abgeflachte Kante und Relief
• Kontur
• Schatten nach innen
• Schein nach innen
• Glanz
• Farbüberlagerung
• Verlaufsüberlagerung
• Musterüberlagerung
• Schein nach außen
• Schlagschatten

Ebenenstile hinzufügen

Um einer ausgewählten Ebene einen Ebenenstil hinzuzufügen, existieren verschiedene Wege:

• Über „Ebene → Ebenenstil“
• Über einen Doppelklick auf die entsprechende Ebene in Ebenenbedienfeld (Doppelklick neben den Namen der Ebene)
• Über das Bedienfeld „Stile“. Hier können gespeicherte Stile angewandt werden.

Ebenenstile als Stil abspeichern

Wenn ihr einen Ebenenstil speichern möchtet, geht das am einfachsten über das Bedienfeld „Stile“. Hier klickt ihr auf das Icon für einen neuen Stil und wählt im darauffolgenden Dialog aus, welche weiteren Eigenschaften in den Stil einfließen sollen. Zur Erklärung: Im Kopf des Ebenenbedienfeldes findet ihr Regler für „Deckkraft“ und „Fläche“. Die Deckkraft steuert die Sichtbarkeit der Ebene inkl. aller angewandten Ebenenstile. Die Fläche hingegen steuert nur die Pixel der Ebene. Ebenenstile behalten dabei ihre volle Deckkraft.

Ebenenstile kopieren

Ihr könnt Stile mit einem Rechtsklick auf die entsprechende Ebene im Ebenenbedienfeld kopieren (Ebenenstil kopieren) und anschließend auf andere Ebenen anwenden (Ebenenstil einfügen). Es ist auch möglich, alle Stile über das Kontextmenü zu löschen.

Ebenenstile einklappen/ausklappen

Wenn ihr Ebenenstile hinzufügt, werden die Stile im Bedienfeld ausgeklappt dargestellt. Wenn ihr das verhindern möchtet, klickt auf den kleinen Pfeil oben rechts in der Ebenenpalette und wählt anschließend die „Bedienfeldoptionen“. Hier deaktiviert ihr das Häkchen bei „Neue Effekte erweitern“.
Ab Photoshop CS6 könnt ihr darüber hinaus alle aufgeklappten Menüs mit einem Klick schließen oder alle öffnen. Dazu drückt ihr Alt und Klickt anschließend auf den Pfeil neben dem „fx“-Icon.

Ebenenstile als CSS3-Code exportieren

Ebenenstile bieten noch einen weiteren Vorteil. Mit Tools wie CSS3PS oder CSSHat könnt ihr Stile in CSS3-Code konvertieren lassen. Das ist praktisch und beschleunigt den Workflow spürbar.

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing