Die folgenden Anwendungsbeispiele kommen aus dem Webdesign und der klassischen Bildbearbeitung. Viele kennen die dicken schwarzen Schattierungen, die im Web Anfang der 2000er so ziemlich hinter jedem Button zu sehen waren. Zum Glück gehört dieser übertriebene Gestaltungstrend der Vergangenheit an. Nachdem einige Jahre lang darauf weitestgehend verzichtet wurde, tauchen Schatten im Web nun nach und nach wieder auf. Dieses Mal aber mit dem Unterschied, dass sie nur noch sehr dezent und gezielt eingesetzt werden.
Bei Schatten in der klassischen Bildbearbeitung sind der Einfallswinkel der Lichtquelle und der Hintergrund, auf den der Schatten fällt, entscheidend. Wir zeigen Ihnen, wie Sie in Photoshop einen harten Schlagschatten und einen sehr weichen Schatten erstellen.
Videotutorial
Moderne Schatten im Webdesign
Als erstes Anwendungsbeispiel für Schatten liegt eine bunte und auffällige Landingpage ohne Schatten vor. Auf dieser befinden sich anklickbare Buttons, die mithilfe eines Schattens etwas mehr Aufmerksamkeit generieren könnten. Um einen Schlagschatten zu erstellen, klicken Sie zunächst doppelt mit der linken Maustaste auf die Ebene mit dem Button. In den Fülloptionen können Sie dann ganz unten als letzten Punkt den Schlagschatten auswählen. Wenn Sie in den Schlagschatten-Optionen die Deckkraft des Schlagschattens testweise mal auf 100 Prozent stellen, dann sehen Sie genau das Ergebnis, was Anfang der 2000er total im Trend lag: ein harter auffälliger Schatten.
Der heutige Trend tendiert eher in Richtung „weniger ist mehr“. Daher soll in diesem Beispiel der Schlagschatten den Button zwar etwas hervorheben, dabei aber trotzdem dezent wirken.
Dazu ziehen Sie zunächst den Deckkraft-Regler des Schattens auf den Wert 20. Stellen Sie dann einen Abstand des Schattens von 0 ein, somit müssen Sie auch keinen bestimmten Winkel angeben. Der Schatten soll rund um den Button gleich aussehen. Stellen Sie anschließend noch die Größe auf 5 px, um den Schatten weichzuzeichnen. Der Schatten sollte jetzt schon dezent sichtbar sein, ist aber noch etwas zu schwach, um den Button hervorzuheben.
Damit der Button besser zu Geltung kommt, klicken Sie auf das Drop-down-Menü bei Kontur. Hier können Sie verschiedene Darstellungsarten Ihres Schattens auswählen. In diesem Beispiel wird die abgerundete Kontur verwendet.
Diese Einstellungen müssen Sie nun aber nicht für alle folgenden Buttons nochmal neu vornehmen. Klicken Sie im Ebenenfenster mit der rechten Maustaste auf den Button mit dem angelegten Schatten und wählen Sie Ebenenstil kopieren. Nun können Sie den Effekt einfach auf alle anderen Buttons übertragen, indem Sie auf die Ebenen ebenfalls mit der rechten Maustaste drücken und dann Ebenenstil einfügen auswählen.
Harte Schlagschatten in Photoshop erstellen
Schatten müssen in der Bildbearbeitung häufig hinzugefügt werden, wenn Fotos von Objekten in ein anderes Bild hinein retuschiert werden sollen und nicht mit ähnlichen Bedingungen fotografiert wurden. In diesem Beispiel soll ein Kugelschreiber in ein Bild mit einigen anderen Objekten eingefügt werden. Im Vorfeld wurde der optische Eindruck und insbesondere die Farbe des Kugelschreibers schon an den Bildstil angepasst, sodass nur noch der Schatten dieses Objektes für eine realistische Darstellung fehlt.
Durch den Schattenfall der anderen Objekte auf dem Bild ist sehr gut zu sehen, dass die Lichtquelle von oben rechts auf die Gegenstände strahlt. Öffnen Sie zunächst wieder die Fülloptionen über das Ebenenfenster und setzen Sie ein Häkchen unter Schlagschatten.
Setzen Sie zunächst die Deckkraft auf 67 Prozent und den Winkel des Schattens auf 44 Grad. Somit bekommt der Schatten die gleiche Ausrichtung wie die Schatten der anderen Objekte. Stellen Sie dann den Abstand auf 24 px und die Größe auf 29 px. Der Schatten, den der Kugelschreiber wirft, wirkt jetzt schon recht realistisch. Damit der optische Gesamteindruck aber stimmt, muss das Licht-Schatten-Verhältnis auch auf dem Stift selbst dargestellt werden.
Klicken Sie dazu in den Fülloptionen den Reiter Abgeflachte Kante und Relief an. Stellen Sie hier eine Tiefe von 100 Prozent ein und definieren Sie eine Größe von 49 px. Die Lichteinstrahlung können Sie dann über den kleinen Kreis unter dem Punkt Schattierung einstellen. Wählen Sie hier einen Winkel von 30 Grad bei einer Höhe von ebenfalls 30 Grad. Zum Schluss setzen Sie die unteren Regler für die Lichter auf 4 Prozent und die Tiefen auf 38 Prozent. Nun ist der Kugelschreiber sehr gut an das Bild angepasst.
Weiche Schatten in Photoshop erstellen
Der absolute Klassiker unter den Schattenarten ist jener, den Mensch unter Lichteinstrahlung auf den Boden oder den Hintergrund, vor dem er steht, wirft. Ähnlich wie in Beispiel 2 wurde im Vorfeld bereits eine Person freigestellt, deren Schatten auf eine verputzte Wand hinzugefügt werden soll. Öffnen Sie wieder die Fülloptionen über die Ebene mit der freigestellten Person und setzen Sie ein Häkchen unter Schlagschatten.
In diesem Fall wird angenommen, dass die Lichtquelle von oben links kommt. Setzen Sie für einen realistischen Schattenwurf die Deckkraft des Schlagschattens auf 30 Prozent und stellen Sie einen Winkel von 155 Grad ein. Stellen Sie einen Abstand von 286 und eine Größe von 18 px ein.
Tipp: Wenn in Photoshop mal ein Regler ganz nach rechts gezogen ist, heißt das in vielen Fällen nicht gleichzeitig, dass der Maximalwert eingestellt ist. Im Beispiel des Schattenabstands können Sie auch einfach einen deutlich höheren Wert per Hand eingeben und der Schatten wird über das Maximum des Reglers hinaus verschoben.
Weiche Schatten zur Seite auslaufen lassen
Die anderen Einstellungen des Schlagschattens bleiben bei den voreingestellten Standardwerten. Die Besonderheit bei Schatten, die von Menschen geworfen werden, ist, dass diese zunächst scharf sind, aber mit zunehmender Entfernung zum Hintergrund immer unschärfer werden. Um diesen Effekt zu erzeugen, wird der eben definierte Schatten als eigene Ebene benötigt.
Klicken Sie dazu im oberen Menü auf Ebene > Ebenenstil und dann auf Ebene erstellen. Der Schlagschatten und die freigestellte Person sind jetzt auf zwei verschiedenen Ebenen. Wählen Sie dann die Schattenebene aus und klicken im oberen Menü Filter > Weichzeichnungsgalerie > Feld-Weichzeichnung.
Mithilfe dieses Filters können Sie nun an selbst definierten Positionen einen Unschärfebereich einfügen. Der erste Punkt wird etwa auf Höhe des Ellenbogens gesetzt. Klicken Sie dazu einfach mit der linken Maustaste in Ihr Bild. Daraufhin wird ein Unschärfebereich erstellt, den Sie mit dem kleinen Regler stärker oder schwächer einstellen können.
In diesem Beispiel wird ein Wert von 150 px verwendet. Den Wert können Sie bei Bedarf auch im rechten Einstellungs-Bedienfeld per Hand ändern. Setzen Sie dann etwa auf Bauchhöhe einen zweiten Unschärfebereich und stellen Sie einen Wert von 130 px ein. Zum Schluss kommt noch ein dritter Punkt etwas unterhalb der Hüfte mit einem Wert von 80 px hinzu. Damit wirkt der Schatten deutlich realistischer und Sie können die eingestellte Unschärfe über OK bestätigen.
