Advitum.de auf Google+

Photoshop Tutorial: Extrem realistische 3D-Scrabble-Steine

Photoshop Tutorial: Extrem realistische 3D-Scrabble-Steine
VN:F [1.9.22_1171]
Bewertung: 3.8/5 (4 Stimmen abgegeben)
Von am
Kategorien: Design, Photoshop, Tutorials

Seit den letzten Versionen von Photoshop wurden die 3D-Features extrem verbessert. Es ist nicht mehr länger nötig, 3D-Komponenten von Illustrationen in einem 3D-Programm zu erzeugen, viele Funktionen bringt Photoshop jetzt selbst mit.

In diesem Tutorial möchte ich euch zeigen, wie man mit Photoshop Scrabble-Spielsteine erstellen kann. Die Inspiration kam mir — wie kann es auch anders sein — bei einer Partie Scrabble. Wir werden in diesem Tutorial, alleine mit Photoshop Scrabble-Steine zu einem Wort zusammensetzen. Wie das Resultat aussieht, seht ihr oben.

Photoshop Tutorial: Extrem realistische 3D-Scrabble-Steine, 3.8 out of 5 based on 4 ratings

Schritt 1: Ein neues Dokument

Aber genug geschwafelt — öffnen wir endlich Photoshop! Wir legen ein neues Dokument mit einer Größe von 700×300 Pixeln an. Den Hintergrund füllen wir mit der Farbe #194916. Dann machen wir die Hintergrundebene zu einer 3D-Postkarte. Wir brauchen diese Ebene, damit der Hintergrund später an den richtigen Stellen Licht und Schatten aufweist.

Schritt 2: Erstellen eines Scrabble-Steins

Als erstes erstellen wir eine neue Gruppe von Ebenen. Dazu klicken wir auf das Symbol in der oberen rechten Ecke der Ebenenpalette und wählen »Neue Gruppe…«. Als Namen können wir eingeben, was wir wollen. Jetzt erstellen wir eine neue Ebene in der Gruppe und füllen diese mit der Farbe #faffd9. Dann wählen wir das Abgerundetes-Rechteck-Werkzeug aus.

Das Abgerundetes-Rechteck-Werkzeug
Hier finden wir das Abgerundetes-Rechteck-Werkzeug

Mit diesem Werkzeug werden wir jetzt eine Vektormaske für unsere Gruppe von Ebenen anlegen. Dazu wählen wir die Gruppe aus und klicken mit gedrückter [STRG]-Taste auf das Ebenenmasken-Icon unterhalb der Ebenenpalette.

Wie der Name schon sagt, können wir mit dem Abgerundetes-Rechteck-Werkzeug abgerundete Rechtecke erzeugen. Als Radius stellen wir hierfür 10 Pixel ein. Dann ziehen wir mit dem Werkzeug ein Rechteck auf. Das Ergebnis sollte etwa so aussehen:

Die Vektormaske in Form eines Scrabble-Steins
Wie ihr euch warscheinlich schon gedacht habt, soll diese Form die Vorderseite unseres Scrabble-Steins darstellen.

Jetzt brauchen wir noch die Beschriftung des Steins. Dazu lege ich in der Gruppe eine neue Ebene an, wähle das Text-Tool aus und schreibe den ersten Buchstaben des Wortes aus. Ich möchte das Wort »Advitum« darstellen, deshalb ist mein erster Buchstabe logischerweise ein A. Als Schriftart habe ich mich für »Notram« entschieden, aber auch hier habt ihr freie Hand. Die Schrift sollte allerdings aussehen, als ob sie tatsächlich auf einem Scrabble-Stein stehen. Die Schriftgröße beträgt bei mir übrigens 35 Pixel, außerdem ist der Text zentriert. Als Schriftfarbe habe ich Schwarz gewählt.

Nun müssen wir die Schrift auf dem Stein zentrieren. Dazu gibt es einen Trick. Wir halten [STRG] gedrückt und klicken auf die Vektormaske, dann wählen wir die Textebene aus, aktivieren das Verschieben-Werkzeug und klicken auf diese beiden Icons:

Mit dem 2. und 5. Icon kann etwas zentriert werden.
Per Klick auf diese beiden Icons wird der Buchstabe zentriert.

Der Buchstabe ist jetzt mittig in der Auswahl platziert.

Aber etwas für Scrabble-Steine sehr charakteristisches fehlt hier noch — die Wertigkeit des Steins. In meinem Fall, dem A, gibt es einen Punkt. Hier findet ihr die komplette Punkteliste für die einzelnen Buchstaben.

Wir legen also eine neue Ebene an und schreiben unsere Punktzahl für den ersten Buchstaben. Auch hier wieder Schwarz als Schriftfarbe, eine Schriftgröße von 12 Pixeln, die Ausrichtung ist diesmal nicht zentriert, sondern rechtsbündig. Außerdem wähle ich als Schriftart hier »Arial«.

Der erste Scrabble-Stein + Beschriftung
So sieht mein Zwischenstand aus. Der erste Scrabble-Stein ist fertig.

Schritt 3: Aus einem Buchstaben wird ein Wort

Damit es nicht nur bei einem Buchstaben bleibt, duplizieren wir die Gruppe so oft, wie wir Buchstaben brauchen. »Advitum« hat sieben Buchstaben, also muss ich die Gruppe sechs mal duplizieren. Die Gruppen verschiebe ich alle, sodass sie nebeneinander liegen. Dann ändere ich auf den Steinen die Buchstaben und Wertigkeiten.

Jeder Buchstabe hat seinen eigenen Stein
Jetzt hat jeder Buchstabe seinen eigenen Stein.

Als nächstes transformieren wir jeden Stein, wir verschieben und rotieren sie, sodass sie durcheinander wirken. Aber die Reihenfolge muss korrekt bleiben.

Durcheinander gewürfelte Scabble-Steine bilden das Wort »Advitum«
Jetzt sind die Steine besser verteilt, dadurch bekommen wir später interessantere Schatten.

Bis hierhin war alles zweidimensional. Jetzt kommt die dritte Dimension ins Spiel.

Schritt 4: Repoussé

Aus diesen Gruppen müssen wir jetzt ein 3D-Objekt erzeugen. Dazu wählen wir alle Gruppen aus und drücken dann [STRG]-[ALT]-E. Dadurch kopieren wir alle Steine auf eine gemeinsame Ebene. Jetzt müssen wir alle Vektormasken zu einer Maske zusammenfassen. Dazu wählen wir eine Maske aus, schneiden diese aus, wählen dann die oberste, also neueste Ebene aus und fügen die Vektormaske ein. Das wiederholen wir für alle Ebenenmasken. Dann blenden wir die Ebenengruppen aus. Jetzt haben wir alle Steine auf einer Ebene.

Wählen wir die Vektormaske aus und wählen aus dem Menü 3D>Repoussé>»Ausgewählter Pfad…«. Repoussé ist Photoshops Funktion zu Erstellung von 3D-Objekten. Gleich seht ihr, wie es funktioniert.

Der Repoussé-Dialog von Photoshop
Die Einstellungen für die Tiefe der Extrusion und für die Kanten müssen angepasst werden.

Mit diesen Einstellungen bestätigen wir den Dialog.

In der Ebenenpalette hat die Ebene jetzt ein 3D-Symbol und einige Texturen zugeordnet, zwei Stück. Die zweite Textur wird für die Vorder- und Rückseite der Steine benutzt, die erste für die Seiten der Steine. Die erste Textur klicken wir doppelt an, woraufhin sich ein neues Dokument öffnet. Dieses füllen wir mit der Farbe #f8ffca. Dann können wir das neue Dokument speichern und schließen. Wir haben jetzt den Seiten des Steins die gleiche Farbe wie dem Rest des Steins zugeordnet.

3D-Scrabble-Steine in Photoshop
Jetzt sind unsere Steine dreidimensional.

Schritt 5: Positionieren der Steine

Damit später die Schatten berechnet werden können, müssen wir die Scrabble-Steine und den Hintergrund zu einem 3D-Objekt kombinieren. Dazu wählen wir beide 3D-Ebenen aus und klicken auf 3D>»3D-Ebenen auf eine Ebene reduzieren«. Höchstwarscheinlich verschwinden jetzt die Steine, dies ist aber normal, denn sie liegen jetzt hinter der Hintergrundfläche.

Öffnen wir mit einem Klick auf Fenster>3D die 3D-Palette. Hier haben wir die Kontrolle über alle 3D-Funktionen. Wir wählen, falls nicht schon geschehen, das 3D-Objekt in der Ebenenpalette aus. Jetzt widmen wir uns dem 3D-Fenster. Oben sehen wir eine Reihe von 3D-Objekten. Ganz oben sollte die »Szene« sein, diese umfasst das gesamte 3D-Objekt. darin befinden sich zwei »Meshes«, also 3D-Formen, welche wiederum eine Reihe von Texturen enthalten.

Wählen wir zuerst das erste Mesh aus, dieses hat nur eine Textur. Es handelt sich hierbei um die Hintergrundebene. Jetzt kommen wir zu dem anderen Mesh — unseren Scrabble-Steinen. Wählen wir dieses Mesh aus und aktivieren das dritte Werkzeugicon in der 3D-Palette. Am oberen Rand des Bildschirms erscheint jetzt eine Werkzeugleiste. Hier können wir das Mesh drehen, schwenken, verschieben, skalieren und noch viel mehr.

Diese Position muss für die Scrabble-Steine eingestellt werden.
Diese Position und diese Ausrichtung müssen für die Scrabble-Steine gesetzt werden.

Aber auch wenn wir diese Position so eingegeben haben, können wir die Steine noch immer nicht sehen. Das liegt daran, dass wir von hinten auf den Hintergrund schauen. Die Steine liegen also auf der anderen Seite der Fläche.

Deshalb wählen wir jetzt in der 3D-Palette das zweite Werkzeug, das 3D-Kamera-kreisen-Werkzeug aus. Damit können wir die Position der Kamera verändern. Experimentiert ein wenig mit den Kamera-Werkzeugen herum, sodass ihr ein Gefühl für sie bekommt. Dann platziert die Steine etwa wie unten.

So oder so ähnlich sollte die Kamera ausgerichtet sein.
Ich habe für meine Kamera diese Position gewählt, an dieser Stelle sollte man sich auch schon Gedanken darüber machen, auf welcher Seite man die Schatten haben will. Meine Schatten werden gleich nach links fallen, deshalb ist das Objekt so weit rechts.

Sollte der Hintergrund nicht die ganze Fläche bedecken, müssen wir ihn skalieren. Dazu wählen wir das entsprechende Mesh in der 3D-Palette aus, wählen das 3D-Mesh-skalieren-Werkzeug aus klicken uns ziehen auf den Hintergrund, um ihn zu vergrößern, bis er die ganze Fläche ausfüllt.

Wie man sieht, kommt der 3D-Effekt trotzdem noch nicht wirklich zur Geltung. Noch sind wir nicht fertig!

Schritt 6: Erleuchtung

Damit unser Bild nicht so dunkel bleibt, wollen wir eine Lichtquelle hinzufügen. Denn wo kein Licht ist, ist auch kein Schatten. Und wir wollen schließlich Schatten. Wir klicken also in der 3D-Palette auf das kleine »Neue Lichtwquelle«-Icon am unteren Ende und wählen ein Spotlicht.

Jetzt sollte außer dem Licht auch ein Drahtgitter-Kegel erscheinen, welcher uns hilft, das Licht auszurichten. wenn dieser Kegel nicht zu sehen ist, klicke auf das kleine Icon links neben dem Neu-Icon. Hier müssen »3D-Achse« und »3D-Lichtquelle« ausgewählt sein.

Zum Verschieben des Lichtes wählen wir es in der 3D-Palette aus und wählen dann das 3D-Lichtquelle-drehen-Werkzeug aus. Macht euch auch hier wieder mit den Werkzeugen vertraut und verschiebt anschließend das Licht an diese Position:

Hier kommt das Licht hin.
Das Licht wird oben rechts positioniert, damit die Schatten nach vorne links fallen. Aber noch sieht man keine Schatten.

Wir müssen noch einige Einstellungen tätigen. Als erstes erhöhen wir die Helligkeit des Lichtes und verändern den Winkel des Lichtkegels.

So muss das Licht eingestellt werden.
Die Helligkeit des Lichtes fahren wir hoch und wir ändern den Winkel des Lichtkegels.

Jetzt widmen wir uns dem Realismus der Steine.

Schritt 7: Glanz auf den Steinen

Noch sehen die Steine nicht besonders realistisch aus, deshalb widmen wir uns den Materialien — also den Texturen — der Meshes. Zunächst passen wir den Hintergrund an.

Auf dem Hintergrund muss ein Glanzlicht angelegt werden.
Damit der Hintergrund im Lichtkegel heller wird, erstellen wir ein Glanzlicht. Die Farbe dafür ist #369936.

Wo wir schon beim Glanz sind, wollen wir auch einrichten, dass sich der Hintergrund und alle Steine in jedem Stein und alle Steine im Hintergrund spiegeln. Anders gesagt: alle Oberflächen sollen ein wenig reflektieren. Dazu stellen wir auf der ersten, zweiten, vierten und fünften Textur eine Spiegelung von fünf ein, auf der dritten Textur eine Spiegelung von 20.

Schritt 8: Tiefenunschärfe hinzufügen

Denken wir einmal an das Scharfstellen von Bildern mit einer Digitalkamera. Entweder wird der Vordergrund oder der Hintergrund scharf gestellt, je nach Linse mehr oder weniger gut. Um unseren Scrabble-Steinen noch etwas mehr Realismus zu geben, werden wir jetzt diese Tiefenunschärfe simulieren.

Dazu wählen wir aus der 3D-Palette das 3D-Kamerazoom-Werkzeug aus. Mit diesem Werkzeug kann man die Kamera hinein und heraus zoomen. Wir werden jetzt aber nicht zoomen, sondern den Fokus der Linse festlegen. Dazu stellen wir als erstes in der oberen Werkzeugleiste ganz rechts für die Feldtiefe einen Weichzeichnen-Wert von etwa 3 und einen Abstand von etwa 0,1 ein.

Jetzt klicken wir mit gedrückter [ALT]-Taste den Bereich des Bildes an, auf dem der Fokus liegen soll. In meinem Fall soll der Fokus auf dem vordersten Buchstaben, also dem A liegen. Deshalb drücke ich mit gedrückter [ALT]-Taste das A an. Und sofort sieht man, wie die hinteren Buchstaben weichgezeichnet werden.

Schritt 9: Finales Rendern

Wir haben jetzt also einiges konfiguriert — Schatten, Glanz, Reflektionen — aber nichts davon ist zu sehen, warum? Photoshop muss, wie jedes andere 3D-Programm, seine Ausgabe erst rendern. Rendern funktioniert im Grunde so, dass von der Lichtquelle aus Lichtstrahlen berechnet werden. Daraus werden dann Schatten und Reflektionen berechnet. Ein richtiges Rendern dauert allerding seine Zeit, mein PC hat zum Beispiel für das komplette Rendern der finalen Grafik etwa zwei Stunden benötigt.

Es wäre natürlich sehr unpraktisch, wenn man nach jeder kleinen Änderung zwei Stunden warten müsste, bis man weiterarbeiten kann. Deshalb kann man, wenn man die Szene auswählt, definieren, wie die Szene gerendert werden soll. Im Feld »Qualität« gibt es drei Optionen:

  • Interaktiv (Malen) &mdash dieser Modus ist dazu gedacht, Änderungen sofort zu sehen. Mit dieser Qualität dauert das Rendering weniger als eine Sekunde. Allerdings muss man dafür auf Schatten und Reflektionen verzichten.
  • Raytracing – Entwurf — »Raytracing« heißt auf Deutsch »Strahlenverfolgung«. Hier werden also wirklich Lichtstrahlen berechnet und daraus Schatten konstruiert. Allerdings ist die Qualität auch hier nicht sehr gut, sodass das Rendering nur einige Sekunden dauert.
  • Raytracing – entgültig — dies ist die höchste Qualitätsstufe. Hier werden alle Lichtstrahlen gründlich berechnet, mit allem Drum und Dran, sodass am Ende eine qualitativ hochwertige Grafik entsteht. Doch Qualität hat ihren Preis — das finale Rendering dauert sehr lange.

Momentan steht die Qualität noch auf »Interaktiv (Malen)«, damit man sofort ein visuelles Feedback bekommt. Aber wir ändern jetzt die Qualität auf »Raytracing – endgültig« — vorsicht, ihr solltet je nach Rechenleistung eures PCs einige Zeit hierfür einplanen. Meiner Meinung nach ist es hier absolut blöd, dass Photoshop keinen Fortschrittsbalken anzeigt.

Während des Renderings werden immer verschiedene Bereiche des Bildes mit blauen Kästen markiert, hier wird dann gerade gerechnet. Sobald kein blauer Kasten mehr durch das Bild wandert, ist das Rendering fertig.

Endergebnis

Finales Rendering von realistischen Scrabble-Steinen.
Tadaa — unser Resultat!

So sieht unser Endergebnis aus. Ich finde es persönlich mehr als überzeugend. Anfangs war ich noch skeptisch, ob Photoshop tatsächlich ein 3D-Programm ersetzen kann, aber nachdem ich mich eingearbeitet habe und einige Funktionen kenne, ist für mich klar, dass ich in Zukunft kein 3D-Programm außer Photoshop benutzen werde.

Was sagt ihr?

Wie findet ihr den Effekt? Seht ihr es genau so, dass Photoshop ein 3D-Programm überflüssig macht? Teilt eure Meinung in den Kommentaren!

Photoshop Tutorial: Extrem realistische 3D-Scrabble-Steine, 3.8 out of 5 based on 4 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Patrick Hummel schrieb am Antworten

Meine Güte, dass ist wirklich sehr realistisch! I like it. Vor allem der Schatten überzeugt und ist mit einem Foto gleichzustellen. Schöne Arbeit!

    Lars Ebert schrieb am Antworten

    Danke Patrick,

    ehrlich gesagt war ich selbst etwas überrascht, dass man nur mit Photoshop schon einen so hohen Grad an Realismus erzeugen kann.

Pathi schrieb am Antworten

Danke für das Tolle Tutorial, eine Frage habe ich, was ist strg – alt – e beim Mac?

    Lars Ebert schrieb am Antworten

    Auf dem Mac müsste die entsprechende Tastenkombination Command-Option-E sein.

      Pathi schrieb am Antworten

      Besten Dank Lars. 🙂 Habs herausgefunden.
      Jedoch krieg ich das bei Schritt 4 nicht hin…

      Jetzt müssen wir alle Vektormasken zu einer Maske zusammenfassen. Dazu wählen wir eine Maske aus, schneiden diese aus, wählen dann die oberste, also neueste Ebene aus und fügen die Vektormaske ein. Das wiederholen wir für alle Ebenenmasken. Dann blenden wir die Ebenengruppen aus. Jetzt haben wir alle Steine auf einer Ebene.

      Wählen wir die Vektormaske aus und wählen aus dem Menü 3D>Repoussé>»Ausgewählter Pfad…«. Repoussé ist Photoshops Funktion zu Erstellung von 3D-Objekten. Gleich seht ihr, wie es funktioniert.

      Screenshot
      Wenn ich jetzt die Vectorebene von K (grau) anklicke und cmd+x (ausschneiden) und dann bei der oberen Ebene (o reduziert) auf cmd+v klicke, dann scheint es zu klappen, jedoch wenn ich dies bei beiden mache, und dann 3D-Repousee Ausgewählter Pfad anklicke, wird nur ein Buchstabe 3D. … Kannst du mir da allenfalls helfen?

      Vielen herzlichen Dank, 🙂
      Pathi

        Lars Ebert schrieb am Antworten

        Wähle die Vektormaske mit allen Buchstaben aus und markiere mit dem Pfad-Auswahl-Werkzeug alle Pfade, dann sollte es funktionieren.

          Chris schrieb am

          Danke für deine Mühe, ich habe das Gleiche Problem wie Pathi hier beschrieben hat mit den Vektormasken und ich verstehe leider nicht was du mit deiner Antwort meinst??!!

          Ich schaffe es einfach nicht alle Vektormasken auf einer Ebene (ich denke mal du meinst damit die neu erzeugte Ebene die mit Strg Alt e erstellt wurde)zusammenzufassen.

          Könntest du das nochmal genauer erklären? Vielen Dank.

          Lars Ebert schrieb am

          Hallo Chris,

          du musst mit dem Pfad-Auswahl-Werkzeug auf einer der Ebenen den Pfad von Hand auswählen und dann Strg+X drücken, um ihn auszuschneiden. Dann klickst du auf die Vektormaske der obersten Ebene und drückst dann Strg-V um den eben ausgeschnittenen Pfad einzufügen. Dann machst du mit den anderen Vektormasken das gleiche, bis du alle Pfade in einer Vektormaske hast.

Pathi schrieb am Antworten

Vielen Dank, ich habs hingekriegt. 🙂 sieht cool aus

syntax schrieb am Antworten

Schlechter kann man es ja wohl nicht erklären. Details auf höchst bescheuerte Informationen, aber die Vektormasken wird nicht erklärt! Dieses Tutorial ist völlig nutzlos!

    Lars Ebert schrieb am Antworten

    Schade, dass dir das Tutorial nicht weiterhilft. Vielleicht hast du ein paar Tipps für mich, was ich beim nächsten mal besser machen kann?

      hoelschi schrieb am Antworten

      Hallo Lars,

      danke für das Tutorial. Genau so etwas habe ich gesucht, denn ich hatte keine Lust, ein externes 3D-Programm zu benutzen.
      Ich bin mit den Erklärungen voll und ganz zufrieden, musste aber selbst bei dem ein oder anderen Punkt etwas nachdenken.
      „syntax“ hat sich wohl etwas im Ton vergriffen. Wenn er mit dem Tutorial nicht klar kommt, soll er weitersuchen, und wenn sich jemand, der kein Dozent, Professor oder Lehrer ist, die Mühe macht, ohne finanziellen Nutzen Tutorials ins Netz zu stellen, gehört demjenigen Respekt gezollt, und er gehört nicht beschimpft.

      Lars, also bitte weiter so und nicht von Schwachköpfen beirren lassen.

        Lars Ebert schrieb am Antworten

        Hallo hoelschi,

        vielen Dank für dein Lob! Findet man dein Resultat auch irgendwo im Netz?

        Was Kommentare wie die von »Syntax« angehen, lebe ich nach dem Motto »Don’t feed the Trolls«. Umso mehr freuen mich positive Kommentar wie deiner 🙂

Diese Artikel könnten dir auch gefallen