Navigation

Photoshop: In die dritte Dimension

16. März 2009
von

Ursprünglich ein reines 2D-Programm, bietet Photoshop mehr und mehr auch 3D-Features an. So könnten etwa Modelle geladen und direkt bemalt werden. Ein anderer Weg ist es, 3D-Grafiken nur zu simulieren. Im Webdesign wird so ein Blickfang gestaltet, in dem man mit Schatten, Reflexionen oder der Perspektive spielt. Eine Menüführung mit Tiefenwirkung ist das Ziel.

Beispiel 1: Schattenspiele

Hintergrund erstellen
In diesem Beispiel geht es darum, einzig mit dem Schlagschatten Tiefe vorzutäuschen. Zuerst brauchen wir aber einen Hintergrund, von dem sich andere Elemente abheben können. Dazu wählt man mit dem Auswahlrechteck auf einer eigenen Ebene einige Streifen aus und füllt die Selektion über »Bearbeiten ↔ Fläche füllen« mit #66aa33 (RGB 102, 170, 51) und #448833 (RGB 68, 136, 51). Dabei könnte schon bei einer der Flächen der »Ebenenstil ↔ Schlagschatten« aktiviert werden.

Flächen
Auf weiteren Ebenen, die über »Ebene ↔ Neu ↔ Ebene« oder schneller über den Button „Neue Ebene erstellen“ in der Ebenenpalette erzeugt werden, zieht man mit dem Auswahlrechteck weitere Flächen auf, die man mit Weiß oder Grau füllt. Auch diese Ebenen erhalten einen Schlagschatten, wobei man mit den Optionen bei Distanz und Größe spielen sollte, um unterschiedliche Höhen zu simulieren. Der »Ebenenstil ↔ Kontur« kann dafür sorgen, dass sich Flächen besser von der Umgebung abgrenzen.

Inhalte
Nachdem man das Menü und weiteren Content eingefügt hat, könnte man die „höchste“ Ebene als Werbefläche für aktuelle Projekte einsetzen. Die Inhalte dafür können auch in einem separaten Dokument erstellt und dann auf eine Ebene reduziert eingefügt werden. So hat man die Möglichkeit, per Schnittmaske diese Ebene nur da anzeigen zu lassen, wo auf der darunterliegenden Fläche Pixel zu finden sind. Eine Schnittmaske wird über »Ebene ↔ Schnittmaske erstellen« aktiviert.

Beispiel 2: Reflexionen

Zweigeteilt
Die Hintergrundebene wird mit #191919 (RGB 25, 25, 25) gefüllt, dann eine neue Ebene erstellt. Nach der Auswahl einer Fläche, die als Grundlage für ein Menü dienen soll, füllt man die Selektion mit einem Verlauf von #993300 (RGB 153, 51, 0) nach ff8822 (RGB 255, 136, 34). Die Auswahl wird aufgehoben und der »Ebenenstil ↔ Schlagschatten« mit Winkel 90 Grad, Distanz 25 und Größe 85 aktiviert.

Button
Der Verlauf soll eine Fläche simulieren, auf der einige Buttons liegen. Die Grundform der einzelnen Button wurde mit dem Abgerundeten-Rechteck-Werkzeug aufgezogen. In der Optionsleiste kann unter Radius eingestellt werden, wie weich die Kante verlaufen soll. Bei den orangenen Schaltflächen sorgt eine »Verlaufsüberlagerung« von #ff7700 (RGB 255, 119, 0) nach #ffcc33 (RGB 255, 204, 51), »Schein nach innen« mit Füllmethode überlagern (Ineinanderkopieren), Deckkraft 20%, Farbe Weiß und Größe 5 sowie eine »Kontur« mit Größe 1 Pixel und der Farbe #ffcc22 (RGB 255, 204, 34) für die gewünschte Form.

Weitere Inhalte
Die Button werden beschriftet (im Idealfall später per CSS) und weiterer Text, Flächen und Buttons eingefügt. Um den Effekt des “Räumlichen” zu erhöhen, könnte man einen Button hinter einer Buttonreihe positionieren oder leichte Reflexionen einsetzen, damit der Untergrund eher als solcher erkennbar ist. Dazu werden einfach die Ebenen mit gedrückter Strg-Taste ausgewählt und dann kopiert, welche die Elemente beinhalten, die gespiegelt werden sollen.

Das Kopieren erfolgt sehr schnell über Drag & Drop auf den Button „Neue Ebene erstellen“ in der Ebenenpalette. Nach »Ebene ↔ Auf eine Ebene reduzieren« und »Bearbeiten ↔ Transformieren ↔ Vertikal spiegeln« spendiert man der Ebene eine Maske über »Ebene ↔ Ebenenmaske ↔ Alles einblenden«. Ein Verlauf von Weiß nach Schwarz sorgt für einen weichen Übergang zum Hintergrund, der durch eine Verminderung der Ebenendeckkraft und dem Bearbeiten mit dem »Gaußschen Weichzeichner« noch verstärkt wird.

Beispiel 3: 3D-Formen

Halterung
Natürlich könnte man auch gleich 3D-Körper simulieren. In diesem Beispiel sind das verchromte Stangen, eine Fassung und einige Schilder. Zuerst wird der Hintergrund mit #313131 (RGB 49, 49, 49) gefüllt, dann auf einer eigenen Ebene eine Abgrenzung erstellt. Diese besteht aus einer Fläche, die mit einem Muster gefüllt und dank einem Schlagschatten vom Hintergrund abgehoben wurde.

Die verchromte Stange und die Fassung zeichnet man auf einer eigenen Ebene mit dem Buntstift ein. Dazu reichen einige Pixel in einer Reihe, die über »Transformieren ↔ Skalieren« in die Länge gezogen werden. Hier waren das zum Beispiel die Farben #4b4b4b, #939393, #8b8b8b, #a5a5a5, #f7f7f7, #a1a1a1 und wieder #4b4b4b.

Schilderwald
Die Flächen der Schilder werden mit dem Ellipse-Werkzeug aufgezogen. Für die Umrandung aktiviert man die Ebenenstile »Schein nach innen« mit Füllmethode Normal, Deckkraft 75%, Unterfüllen 0% und Größe 5 Pixel sowie »Kontur« mit Größe 1 Pixel, Deckkraft 60% und Farbe #878787 (RGB 135, 135, 135). Ein Schlagschatten hebt die Schilder leicht vom Hintergrund ab.

Schatten, Icons und Beschriftung
Um den Effekt der hängenden Schilder zu verstärken, habe ich die entsprechende Ebenen kopiert, auf eine Ebene reduziert und mit einem weiteren Schlagschatten ausgestattet, der etwas extremer gesetzt wurde. Einige freie Icons (wie etwa das Retro Icon Set) und eine Beschriftung runden die Komposition ab. ™

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

9 Kommentare zu „Photoshop: In die dritte Dimension
  1. David Hellmann am 16. März 2009 um 12:45

    bei mir auf der seite ist auch 3D :)

  2. Nico am 16. März 2009 um 14:36

    Bei mir ist und bleibt 2D :D Finde ich viel zu kompliziert da den meisten Besuchern es wahrscheinlich eh nicht auffällt :)

  3. Ongimann am 16. März 2009 um 20:52

    Hehe. ich hatte bei mir früher auch etwas 3D auf der Seite.
    Aber bei der neuen habe ich auch alles nur noch in 2D.
    Obwul mein Logo immer noch nen leichten Schatten hat.

  4. Jan Schwarzkopf am 17. März 2009 um 14:14

    An dem Beispiel sieht man mal wieder was man mit Photoshop alles anstellen kann :-)

    Sieht wirklich sehr hübsch aus.
    Habe aber momentan nur Photoshop Elements.

  5. Stefan Merki am 18. März 2009 um 02:06

    Ich habe den Eindruck das man bei Photoshop ewig lernen könnte.
    Die Anregungen und genaue Anweisung finde ich gelungen!

    Danke dafür!

  6. Gunther am 18. März 2009 um 12:36

    Warum immer Photoshop??? Solche Effekte lassen sich auch mit Programmen, die nicht 1000 € kosten oder sogar gratis sind, herstellen. Bringt das den Lesern doch mal nahe. Oder geht ihr davon aus, dass der Grossteil der Leser Photoshop, und dazu in einer legalen Version, besitzen?

  7. [...] 3D-Effekte in Photoshop (via Dr. Web) [...]

  8. [...] wichtigsten Pinsel-, Tutorial-, etc. -Quellen. Und dann sind mir in letzter Zeit noch Tutorials zu 3D-Effekten, Optimierung der Bildqualität, Angleichung von Hautfarben, Tonwertkorrektur und zum [...]

  9. Chrissy am 17. April 2009 um 13:26

    Gunther mal ganz ruhig ;)

    Klar kann man mit Gimp oder ähnlichen Programmen auch ähnliche Ergebnisse zaubern, aber ich denke nur weil man sich darüber unterhält mit welchem PS man arbeitet heißt das noch lange nicht, dass sie den Lesern nur PS nahebringen wollen oder sehe ich das nun falsch?

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!