Silhouetten oder Schattenrisse sind traditionell eher in der Fotografie ein Thema und von Gegenlicht-Aufnahmen her bekannt. Dank starker Kontraste werden Bildelemente zu schwarzen Strukturen. Dieser Effekt kann in zahlreichen Varianten simuliert werden, so auch im Webdesign oder für Flyer mit Unterstützung von Photoshop.
Farbkontrast: Im Hintergrund
Auf einer neuen Ebene, die über »Ebene ↔ Neu ↔ Ebene« oder schneller über Umschalt+Strg+N erzeugt wird, wählt man mit dem Auswahlrechteck einen Bereich aus, der mit einer beliebigen Farbe gefüllt wird. Hier wurde als Grundlage die Farbe #6611ee (RGB 102, 17, 238) verwendet und mit der Farbe #bb22dd (RGB 187, 34, 221) ein paar Akzente gesetzt. Photoshop bietet einige Pinselvorgaben an, die etwas “zerrissen” sind. Damit wurde auf einer weiteren Ebene graue Farbe über die bunte Fläche gemalt.
Silhouetten
Schattenrisse könnte man aus entsprechenden Fotos freistellen, freigestellte farbige Elemente schwarz einfärben oder fertige Werkzeugspitzen verwenden, die man etwa auf brusheezy.com finden kann. So wurden in diesem Beispiel der Baum und etwas Gras eingezeichnet. Das hohe Gras ist übrigens eine der Standard-Pinselvorgaben, die Photoshop mitbringt. Die Form der Erde wurde mit dem Polygon-Lasso ausgewählt und die Selektion auf einer eigenen Ebene mit Schwarz gefüllt.
Inhalte und mehr
Weitere Werkzeugspitzen wie “Stempel” oder “Grunge” können die Komposition schnell abrunden. Nach dem Download und Entpacken der Spitzen wählt man in Photoshop das Pinsel-Werkzeug aus und klickt in der Optionsleiste auf den schwarzen Pfeil zur Auswahl der Vorgaben, dort auch gleich auf den nächsten Pfeil rechts oben, der zu einer Liste mit vielen Optionen zu den Pinseln führt. Über »Pinsel laden« wird die Kollektion um weitere Werkzeugspitzen erweitert.
Schwarz-Weiße Landschaft: Schwarzer Hügel
Im Hintergrund liegt ein Verlauf von Weiß zu #d2ccc2 (RGB 210, 204, 194). Die Hügellandschaft wird darüber auf einer eigenen Ebene in mehreren Schritten mit der Auswahlellipse ausgewählt. Dazu hält man bei der Selektion die Shift-Taste gedrückt. Ist man mit der Form zufrieden, wird diese mit Schwarz über »Bearbeiten ↔ Fläche füllen« gefüllt und die Auswahl aufgehoben.
Florale Elemente
Auch hier werden die Silhouetten dank den passenden Werkzeuspitzen schnell eingezeichnet, dieses Mal jedoch florale Elemente aus der Kategorie »Ornaments«. Dabei sollten die einzelnen Blumen auf jeweils einer eigenen Ebenen liegen, um diese mit dem Verschieben-Werkzeug besser positionieren zu können. So entsteht eine schwarz-weiße Landschaft, die einen schönen Kontrast zu den farbigen Inhalten bildet.
Grunge mit Silhouetten: Schmutziger Hintergrund
Es bietet sich an, verschiedene Stile zu kombinieren. So etwa die Silhouetten mit dem Grunge-Stil. Wir benötigen zuerst einen dreckigen Hintergrund. Dafür könnte man eine passende Textur einsetzen oder, wie hier, mit verschiedenen Werkzeugspitzen die “Farbe” von Hand einzeichnen. Wichtig ist dabei, den schwarzen Ornamenten eine Basis zu bieten, aus denen sie “herauswachsen” können. Hier wurde dafür an der Seite eine schwarze Leiste gemalt.
Ornamente
Man könnte aber auch ein Bild einfügen, aus dessen Hintergrund die floralen Elemente hervor schauen. So hat man auch gleich die Basis für die künftigen Inhalte geschaffen. Diese Fläche soll sich etwas vom Hintergrund absetzen, weshalb der »Ebenenstil ↔ Schlagschatten« aktiviert wurde. Mit den Silhouetten könnte dann etwa das Menü eingerahmt werden, um den Blick des Betrachters darauf zu lenken. ™
Dirk Metzmacher
Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials in den letzten 7 Jahren Leser von Fachpublikationen wie Galileo Press, dem Franzis Verlag oder DigitalPhoto sowie Online-Magazinen wie etwa Dr.Web, photokina oder das Smashing Magazine von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine
Sehr übersichtliches Step-by-Step-Tutorial – um es auf deutsch zu sagen :-). Vielen Dank!
Gefällt mir sehr gut, dieser Stil. Wie auch Grunge oder Ornamente – sehr gut umgesetzt. Danke!
Naja ganz ehrlich. Das was mir hier am meisten geholfen hat ist der Link zu Brusheezy. Die Pinselvorlagen für Grunge, Ornamente und Co sind deutlich komfortabler und schneller als jeder Filter oder Muster.
Hi! Was mich als blutiger Anfänger mal interessiert ist mit welchem Photoshop hier gearbeitet wird? Es gibt doch verschiedene?
Gruß Thorsten
@ Thorsten S.
Das spielt im Grunde keine Rolle. In den seltensten Tutorials werden Funktionen genutzt die erst mit neueren Versionen verfügbar wurden. Auch Funktionsweisen und Menü/Tastennavigation sind weitestgehend identisch.
Solche Tutorials lassen sich demnach mit Photoshop 7 praktisch genau so gut umsetzen wie mit CS4.
Grüße
Manuel
Danke Manuel!
Dann kann ich mir ja die kostengünstigere Variante holen! :-)
Gruß aus Oldenburg
Thorsten
[...] Uhr, 0 Reaktionen Kategorie: Webdesign Auf Dr. Web findet ihr ein exzellentes Tutorial, wie ihr in Photoshop Silhouetten erstellen könnt. Silhouetten oder Schattenrisse sind traditionell eher in der Fotografie ein Thema und von [...]
Gefällt mir sehr gut! Dankeschön… Gerne mehr in diese Richtung.
Klasse Tutorial! Nachdem ich Stunden damit verbracht habe, nach guten Tipps zum Thema Silhouetten zu googlen, bin ich einigermaßen glücklich über dieses hilfreiche Tutorial! Vielen Dank! Liebe Grüße, fLyeR! aus Stuttgart
Klasse Sammlung und Tipps auch für Profis, erspart langes suchen zum Thema Silhouetten im Netz. Maritime Grüße aus Bremen
[...] Photoshop Tutorial: Silhouetten im Webdesign [...]