Erstellt einen coolen 3d Text mit Photoshop

  • von Lennart Prange

3dtypo_tut Ich habe ja angekündigt, dass es mal wieder ein paar Tutorials von unserer Seite geben wird. Vor euch habt ihr nun eines davon. Ihr könnt hier lernen, wie man einen coolen 3d Text mit Photoshop erstellt und diesen mit einem Hintergrund etwas aufpeppt. Das Ergebnis gefällt mir und ich hoffe, dass es euch genauso geht.

Ich schreibe nicht so häufig Tutorials und deshalb kann es ja sein, dass jemand etwas nicht versteht oder nicht mehr weiterkommt. Hinterlasst in dem Fall bitte einfach ein Kommentar.

Social Bookmarks und Kommentare würden mich freuen. Viel Spaß mit dem Tutorial.

P.S.: Die Bilder sind nicht in Originalgröße abgebildet. Deswegen kann es zu einem kleinen Qualitätsverlust kommen.

Schritt 1

Erstellt ein neues Dokument mit folgenden Eigenschaften: Größe 640px*480px, 72 ppi, RGB/8bit.

1

Schritt 2

Wählt nun das Auswahlrechteck-Werkzeug (M) und benutzt [strg]+[a] um alles zu markieren. Nun klickt ihr mit der rechten Maustaste in den Arbeitsbereich und wählt Fläche füllen. Dort stellt ihr schwarz ein und klickt ok. Euer Bild sollte nun einen schwarzen Hintergrund haben.
Jetzt geht ihr auf Filter -> Rauschfilter -> Rauschen hinzufügen und stellt folgendes ein: Stärke 10%, Gaußsche Normalverteilung, Monochromatisch.

2

Schritt 3

Nun benutzt ihr Bild -> Anpassungen -> Tonwertkorrektur und übernehmt die Werte von meinem Bild. Dann bestätigt ihr mit ok.

3

Schritt 4

Jetzt geht’s an den Text. Denkt euch was cooles aus, oder übernehmt einfach meinen Text. Meine Werte: Arial Black; 72 pt; Scharf. Achtet darauf, dass jede Zeile ungefähr gleich viele Zeichen hat.

4

Schritt 5

Jetzt müsst ihr die Schrift so verändern, dass sie ein Rechteck bildet. Sonst sieht das Ganze nicht gut aus. Aktiviert dafür Zeichen unter Fenster. Markiert dann euren Text. Wenn ihr die gleichen Werte wie ich genommen habt, könnt ihr jetzt den Zeilenabstand auf 60 Pt stellen. So rückt alles näher aneinander.

5

Schritt 6

Jetzt müsst ihr in jeder Zeile den Zeichenabstand verringern oder vergrößern. Bei Langen Zeilen müsst ihr ihn verringern und bei kurzen ihn etwas erhöhen. Seht zu, dass der Text nicht zu sehr auseinandergezogen oder gestaucht aussieht.

6_1

6_2

6_3

Schritt 7

Ok, der Text ist fertig. Nun soll etwas Perspektive rein kommen. Klickt in der Ebenenpalette auf die Ebene des Textes und wählt „In Form umwandeln“. Jetzt können wir den Text verlustfrei verzerren.

7

Schritt 8

Die Ebene muss jetzt aktiviert sein. Geht dann auf Bearbeiten -> Pfad Transformieren -> Perspektivisch. Jetzt klickt ihr auf den oberen linken Ankerpunkt (Hilfe, wie heißt das?) und haltet die Maustaste gedrückt. Jetzt könnt ihr dem Text etwas Perspektive geben, indem ihr die Maus nach unten zieht.

8

Klickt jetzt mit der rechten Maustaste in den Arbeitsbereich und wählt Frei transformieren. Verringert jetzt die Breite ein wenig.

8_2

Benutzt wieder die rechte Maustaste und wählt dieses Mal Verzerren aus. Versucht mein Bild ungefähr zu treffen.

8_3

Nun könnt ihr mit der Enter Taste bestätigen.

Schritt 9

Kopiert eure Text-Ebene jetzt mit [strg]+[j]. Wählt dann die untere Text-Ebene in der Ebenenpalette aus und stellt ihre Deckkraft auf 50%. Ihre Fläche stellt ihr auf 0%.

9

Schritt 10

Per Doppelklick auf die Ebene öffnet ihr nun den Ebenenstil Dialog. Dort findet ihr ganz unten in der Liste „Kontur“. Wählt den Punkt aus und stellt als Farbe weiß ein, Deckkraft belasst ihr bei 100%, Die Größe stellt ihr auf 1px, die Position auf Innen. Bestätigt nun per OK.

10

Schritt 11

Schiebt die Ebene mit der Kontur nun auf dem Arbeitsbereich weiter nach rechts.

11

Schritt 12

Jetzt benutzt ihr [alt]+[<-], bis ihr ein ähnliches Ergebnis wie ich erzielt.

12

Schritt 13

Wie in Schritt 10, gebt ihr der obersten Ebene nun eine weiße Kontur. Außerdem stellt ihr die Fläche in der Ebenenpalette auf 50%. Dann färbt ihr die Ebene noch schwarz.

13_1 13_2

Schritt 14

Benutzt nun [strg]+[j] um die Ebene zu dublizieren. Die neue Ebene schiebt ihr dann per Pfeiltasten 3px nach links.

14

Schritt 15

Jetzt müsst ihr alle Pfad-Ebenen in der Ebenenpalette aktivieren. Das tut ihr, indem ihr auf die oberste klickt und dann mit gedrückter [shift] Taste auf die Unterste.

15

Mit [strg]+[t] könnt ihr nun wieder frei transformieren und das Ganze noch etwas stauchen, damit es perspektivisch korrekter aussieht. Dann bestätigt ihr mit Enter. Glückwunsch, der Text ist fertig.

15_2

Schritt 16

Erstellt nun ganz oben eine neue Ebene und senkt ihre Deckkraft auf 70%.

16

Stellt jetzt eure Vordergrundfarbe auf weiß.

16_2

Nehmt nun das Pinselwerkzeug (B) zur Hand und stellt eine Pinselspitze mit einer Größe von 50px und einer Härte von 0% ein.

16_3

Jetzt setzt ihr ein paar helle punkte ins Bild. Es macht Sinn, Kanten zu betonen, aber ihr könnt es natürlich auch anders machen.

16_4

Schritt 17

Erstellt nun eine neue Ebene über der Hintergrundebene. Senkt ihre Deckkraft auf 40%.

17_1

Nehmt wieder das Pinselwerkzeug zur Hand und stellt diesmal eine Größe von 200px und eine Härte von 0% ein. Nehmt als Vordergrundfarbe ein dunkles Rot und klickt dann einmal unten rechts.

17_2 17_3

Das macht ihr nun mit mehreren Farben. So bekommt ihr einen ganz netten Hintergrund.

17_4

Schritt 18 – Fertig

Das Grundgerüst steht jetzt und nun eröffnen sich zahlreiche weitere Gestaltungsmöglichkeiten. Ich hab zum Beispiel die Deckkraft des farbenfrohen Hintergrunds noch etwas verringert. Dann habe ich noch ein wenig Rauch hinzugefügt und noch ein wenig mehr Pink. Seid kreativ. Danke fürs lesen und ich hoffe, dass es euch gefallen hat. Wenn ihr Verbesserungsvorschläge habt, oder irgendwo nicht weiter kommt, könnt ihr gerne ein Kommentar hinterlassen.

18

12 Kommentare

  1. Sebastian Erhardt
    13. November 2008 um 16:02 Uhr

    ja geil!

  2. OrangeBlue
    13. November 2008 um 16:12 Uhr

    klasse tutorial 🙂

  3. tobi
    13. November 2008 um 16:18 Uhr

    Cooles Tutorial, Danke 😀
    Ich werde mir aber Schritt 14 sparen, da es auf mich danach einen etwas verschwommenen Eindruck macht 😉

  4. Lennart Prange
    13. November 2008 um 16:30 Uhr

    Danke :). Tobi: Das liegt daran, dass hier nicht die Originalgröße angezeigt wird 😉

  5. ocean90
    18. November 2008 um 18:01 Uhr

    Sehr schönes Tutorial. Werd ich mal gleich probieren. 🙂

    Danke und Gruß

  6. secretelisa
    1. Dezember 2008 um 21:02 Uhr

    Klasse Tutorial!

    Ich arbeite auf einem Mac und die strg-Befehle sind ja die gleichen, bloß mit apfel… Schritt 12 kann ich nicht nachvollziehen, was verbirgt sich denn hinter „[alt]+[<-]“ für ein Befehl? Danke für deine Bemühungen!

    Gruß!

  7. orkidee
    4. Dezember 2008 um 15:13 Uhr

    halloo

    …es geht mir genauso mit meinem mac, bin leider auch bei
    “[alt]+[<-]” hängengeblieben. schade. weißt du weiter?
    will es unbedingt noch zum leuchten bringen.
    Gruß

  8. Michael
    5. Dezember 2008 um 14:38 Uhr

    Hallo,

    super Anleitung. Ich bleibe jedoch auch beim Schritt 12 hängen. Vielleicht kannst du uns einen Tipp geben.

    Gruß

  9. Lennart Prange
    5. Dezember 2008 um 14:42 Uhr

    Schritt 12: Haltet [ALT] gedrückt und drückt dann so oft die Linke Pfeiltaste, bis die Lücke, welche bei Schritt 11 entstanden ist, geschlossen ist. Wnn es mit [ALT] alleine nicht funktioniert, versucht [STRG]+[ALT]+[PFEILTASTE].

  10. Michael
    5. Dezember 2008 um 15:02 Uhr

    Super vielen Dank. Jetzt hat es auch bei mir funktioniert.

Trackbacks/Pingbacks