Es gab Zeiten, da brauchte ein Kino nicht aufwändige Reklame, um die Zuschauer in Scharen in die Säle zu locken. Da genügte ein einfacher, aus Glühlampen gebildeter Schriftzug als Aushängeschild. Wie man diese Zeiten in Adobe Illustrator mit mehreren Konturen über einem Schriftzug wieder zurückkehren lassen kann und diesen Effekt dann für eine Einladung in Adobe Photoshop adaptieren kann, möchte ich im heutigen Freitagstutorial zeigen.
1. Wir erstellen uns in Adobe Illustrator ein 640 x 480 px großes Dokument (Strg + N). Dann ziehen wir mit dem Rechteck-Werkzeug (M) ein genauso großes Rechteck über die gesamte Zeichenfläche und füllen dieses mit der Farbe #282324. Dann wechseln wir in das Aussehen-Fenster (Fenster -> Aussehen) und stellen dort für die Kontur „Ohne“ ein. Über den markierten Button fügen wir eine zweite Fläche hinzu und versehen diese mit einem Muster aus der Palette „Farbfelder“ (Fenster -> Farbfelder, dort dann auf das markierte Symbol gehen -> Muster -> Einfache Grafiken -> Einfache Grafiken_Linien). Wir wählen das markierte Muster aus, senken dessen Deckkraft auf 15 % und ändern den Ebenenmodus in „Multiplizieren“ um. Dann fügen wir mit Klick auf das Funktionen-Symbol den Effekt „Körnung und Aufhellung“ hinzu (Effekt -> Kunstfilter -> Körnung und Aufhellung).
2. Nachdem wir diese Ebene durch Doppelklick darauf in „Hintergrund“ umbenannt haben, sperren wir sie und erstellen uns eine neue Ebene für unseren Text. In dieser Ebene schreiben wir mit dem Textwerkzeug (T) nun einen beliebigen Text mit der hier heruntergeladenen und unter diesem Pfad (C:\WINDOWS\Fonts) installierten Schriftart „Bumbastika“.
3. Die Schrift bekommt von uns nun die Farbe #FFD91D zugewiesen. Dann markieren wir die Schrift mit dem Auswahl-Werkzeug (V) und gehen auf Objekt -> Umwandeln. Anschließend gehen wir auf Objekt -> Zusammengesetzter Pfad -> Erstellen.
4. In den folgenden Schritten wird nun wiederholt das Aussehen-Fenster eine Rolle spielen. Dabei ist es immer wichtig, dass unser Text ausgewählt ist. Wir gehen nun zunächst daran, unsere Fläche zu bearbeiten. Wir fügen der Fläche mit Klick auf das Effektsymbol -> Verzerrungs – und Transformationsfilter -> Transformieren die im Bild dargestellte Transformation hinzu. Über das Effektsymbol -> Weichzeichnungsfilter -> Gaußscher Weichzeichner fügen wir weiterhin eine Weichzeichnung mit 7 px Radius hinzu und senken die Deckkraft der Fläche auf 5 %.
5. Jetzt kommt der erste Schritt zur Bearbeitung unserer Kontur. Dieser geben wir die Farbe #E17D00. Als Stärke stellen wir 6 pt ein, der Abschluss wird abgerundet und die Ecken sind Gehrungsecken (Max. 4 x). Außerdem führen wir die Linie als „Gestrichelte Linie“ (O pt, 12 pt) aus.
6. Dieser Kontur fügen wir nun noch einen Schlagschatten hinzu. Dazu klicken wir wieder auf das Effektsymbol und gehen dann auf Stilisierungsfilter -> Schlagschatten (Versatz x und Y jeweils 1 px; Weichzeichnen: 1 px, Fabre: Schwarz).
7. Mit Klick auf das markierte Symbol duplizieren wir nun unsere Kontur und schieben die Kontur unter die soeben bearbeitete Kontur. Diese kopierte Kontur färben wir Schwarz (#000000) ein. Dann gehen wir wieder auf den Transformieren-Effekt und verschieben unserer Kontur vertikal um 3 px. Wir fügen dieser Kontur auch wieder einen 3 px starken Gaußschen Weichzeichner hinzu.
8. Wir duplizieren nun wieder die oberste Kontur und löschen den Schlagschatten heraus, indem wir diesen Effekt auf das Papierkorb-Symbol unten rechts ziehen. Dann stellen wir für die Farbe #F4C338 ein und verringern die Stärke der Kontur auf 4 pt. Wir transformieren unsere Kontur wieder, indem wir sie in jede Richtung um – 0,5 pt verschieben. Dann fügen wir noch einen Schein nach Außen in der Konturfarbe hinzu.
9. Wir duplizieren die Kontur erneut, verringern deren Stärke auf 2 pt und ändern die Farbe in #F7F2C1 um. Den Schein nach Außen löschen wir und verschieben unsere Kontur um - 0,75 pt in beide Richtungen.
10. Einer weiteren Kopie der Kontur geben wir die Farbe #F7D95C. Dann löschen wir die Effekte „Transformieren“ und „Schein nach Außen“ und gehen stattdessen dafür auf Verzerrungs- und Transformationsfilter -> Zusammenziehen und Aufblasen und stellen dort den Wert + 15 % ein. Dann fügen wir noch einen 1 px starken Gaußschen Weichzeichner hinzu.
11. Natürlich wird diese Kontur nun auch noch ein letztes Mal dupliziert. Die Kopie erhält die Farbe #FFDF16. Der Regler wird auf +30 % in Richtung Aufblasen gezogen und der Radius der Weichzeichnung auf 2,5 px erhöht.
12. Die Bearbeitung des Textes ist damit abgeschlossen. Wir erstellen uns nun mit dem Rechteck-Werkzeug (M) ein 40 x 200 px großes Rechteck, indem wir mit diesem Werkzeug doppelt auf unsere Arbeitsfläche klicken und im sich öffnenden Fenster diese Werte eingeben.
13. Nun markieren wir mit dem Direktauswahl-Werkzeug (A) die beiden unteren Ankerpunkte unseres Rechteckes und ziehen diese um etwa 100 px nach rechts. Die Änderung der Position in x – Richtung lässt sich während des Verschiebens im Info-Fenster ablesen. Dann kopieren wir das Parallelogramm (Strg + C) und fügen ihn davor wieder ein (Strg + F). Diese Aktion wiederholen wir, bis wir insgesamt 6 Parallelogramme vorliegen haben. Anschließend verschieben wir diese mit dem Auswahl-Werkzeug (V) bis in etwa folgendes Bild entsteht.
14. Jetzt markieren wir nacheinander beide Dreiergruppen und gehen für jede Gruppe auf Objekt -> Zusammengesetzter Pfad -> Erstellen. Dann kopieren wir den Text und fügen ihn wieder davor ein. Zusätzlich zum kopierten Text markieren wir noch die erste Rechteckgruppe und gehen dann auf das im Pathfinder markierte Symbol („Schnittmenge bilden“). Zum Abschluss dieses Schrittes gehen wir wieder auf Objekt -> Zusammengesetzter Pfad -> Erstellen.
15. Dann ziehen wir mit Verlaufswerkzeug (G) einen Verlauf von #FFDF17 zu Transparent. Diese Gruppe zeichnen wir im Aussehen-Fenster wieder mit 10 px weich und senken die Deckkraft auf 10 %.
16. Die Schritte 14 und 15 wiederholen wir nun auch für die rechte Gruppe von Rechtecken. Damit wir nicht wieder das Aussehen der neuen Fläche separat verändern müssen, ziehen wir die markierte Fläche mit gedrückter Alt-Taste auf den neuen zusammengesetzten Pfad und kopieren somit das Aussehen der ersten Gruppe auf die Zweite. Mit diesem Effekt lassen sich dann zum Beispiel auch Texteffekt für Visitenkarten oder Einladungen gestalten. Die Erstellung einer solchen Einladungskarte mit Adobe Photoshop schauen wir uns jetzt einmal an.
17. Um diesen Effekt auch für eine Einladung oder Visitenkarte anwenden zu können, müssen wir ihn skalieren können. Ich habe hier nun schon einmal einen Text für unsere Einladung mit den Schritten 1 bis 11 erstellt und gehe nun mit dem markierten Text auf Objekt -> Transformieren -> Skalieren. Dort muss der Haken bei „Konturen und Effekte skalieren“ gesetzt sein.
18. Nun wechseln wir in Adobe Photoshop und erstellen uns dort ein neues Dokument mit beliebigen Maßen (hier 15 x 15 cm mit jeweils 5 mm Sicherheitsabstand an den Rändern). Wichtig für den späteren Druck sind nur die Auflösung von 300 dpi und der eingestellte CYMK-Farbmodus. Damit später nichts Wichtiges in der Druckerei abgeschnitten wird, ziehen wir uns aus der Linealleiste (Strg + R) Hilfslinien im 5 mm Randabstand als Begrenzung.
19. Mit dem Verlaufswerkzeug (G) ziehen wir nun einen geraden (Umschalt-Taste gedrückt halten), linearen Verlauf von #EAB629 zu #91430F. In einer neuen Ebene (Umschalt + Strg + N) ziehen wir uns mit dem Eigene-Form-Werkzeug die „Passmarke 2“ mit gedrückter Alt- und Umschalt-Taste aus der Bildmitte heraus. Dann reduzieren wir die Deckkraft der Ebene auf 20 %. Vorsicht! Die Tastenkombination Alt + Umschalt schaltet die bekannte Tastatur in die englische Tastatur um. Nochmaliges betätigen dieser Tastenkombination macht die Änderung rückgängig.
20. Mit dem Rechteckwerkzeug (M) ziehen wir uns in einer neuen Ebene ein weißes Rechteck auf. Mit Doppelklick auf diese Ebene öffnen wir deren Ebenenstil und gehen auf Kontur. Dort stellen wir als Füllart „Verlauf“ ein, wo wir einen linearen Verlauf von #4C4C4C zu #000000 einstellen. Dieser Verlauf hat einen Winkel von 90°, eine Stärke von 50 px und als Position „Innen“.
21. Mit einem 40 px großen und 0 % harten Pinsel (P) zeichnen wir mit der Farbe #FF6B09 in einer neuen Ebene entlang der Hilfslinien in festen Abständen die Grundlage für die Lampen unserer Werbetafel.
22. Wir verkleinern nun den Pinsel auf 20 px und erhöhen dessen Härte auf 60 %. Dann setzen wir in der Farbe #FCFCC7 die Highlights der Lämpchen.
23. Nun fügen wir noch mit dem Linienzeichner-Werkzeug (U) in einer neuen Ebene drei 3 px starke, horizontale Linien (dazu beim Ziehen die Umschalt-Taste gedrückt halten!) mit der Farbe #4D4D4D.
24. Nun nur noch den Text mit dem Auswahl-Werkzeug (V) aus Illustrator in Photoshop hereinziehen und auf die richtige Größe skalieren. Dann gruppieren wir noch alle „Tafelobjekte“ (Strg + G), drehen diese Tafel und löschen noch die Hilfslinien (Ansicht -> Hilfslinien löschen). Dann sind wir mit unseren Arbeiten auch schon am Ende. Viel Spaß beim Ausprobieren!
Natürlich wie üblich hier unser PDF-Download: Tutorial Glühlampenschrift (15)
Der Autor: Martin
