Erstellen Sie einen leuchtenden Neon-Texteffekt
Oft sind es die einfachsten Effekte, die am auffälligsten aussehen, und Neontext ist ein solches Projekt. Es ist auch viel einfacher, einen Neon-Effekt zu erstellen, der realistisch aussieht, als Sie vielleicht denken. Während dieses gesamte Tutorial nur ein Hintergrundbild verwendet, versucht Ihr Gehirn, dies als echte, funktionierende Leuchtreklame zu betrachten - das ist die Stärke von Photoshop CC Ebenenstile. Erfahren Sie mehr über die Hier können Sie erstaunliche Dinge mit den Ebenen von Photoshop tun .
Die Tatsache, dass das gesamte Projekt von Grund auf neu erstellt wurde - von der Schriftart über die Farben des Lichts bis hin zur eventuellen Animation - bedeutet, dass viel Spielraum für Kreativität besteht. Sie können genau auswählen, wie jeder Teil dieses Effekts aussehen soll.
Neon ist weiterhin beliebt. Das Vorführen gesättigter Töne vor einem dunklen, gedämpften Hintergrund ist eine großartige Möglichkeit, a zu präsentieren Zielseite zu Logo Design oder ein Header, und es ist einfach, Ihre Arbeit zu animieren und als GIF mit einer geringen Dateigröße zu speichern. Lassen Sie uns untersuchen, wie es erstellt wird.
01. Erstellen Sie die Schriftart
Erstellen Sie in Photoshop ein neues Dokument mit einer Größe von 550 x 550 Pixel und rufen Sie das Raster auf, indem Sie auf klicken cmd / ctrl + ' . Erstellen Sie eine neue Ebene und skizzieren Sie mit dem Stiftwerkzeug Ihren ersten Buchstaben. Lassen Sie Lücken im Charakter, da dies eine neonartige Schrift sein wird. Wenn Sie zufrieden sind, klicken Sie auf der Registerkarte Pfade auf Strich, um den Buchstaben zu zeichnen.
02. Arbeite das Alphabet durch
Erstellen Sie so viele Zeichen wie Sie möchten, wobei sich der Stift jedes Mal auf einer neuen Ebene befindet. Wenn Sie möchten, fügen Sie einige Sonderzeichen hinzu, z. B. Währungssymbole, Satzzeichen und Buchstaben mit Akzent. Folgen Sie dem gleichen Grundstil, mit dem Sie begonnen haben, damit Ihre Schrift zusammenhängend ist.
03. Wechseln Sie zu FontCreator
Wenn Sie haben High-Logic FontCreator Dies ist der Teil, in dem Sie Ihre Zeichen in eine Schriftart verwandeln können. Wenn Sie dies nicht tun, ist eine kostenlose Testversion verfügbar. Durch Einfügen jedes Zeichens in FontCreator können wir eine verwendbare Schriftart für Photoshop erstellen.
Arbeiten Sie sich durch FontCreator, indem Sie auf jedes Zeichen doppelklicken und Ihre mit einem Stift gezeichnete Arbeit einfügen. Stellen Sie sicher, dass sich jeder Buchstabe auf derselben Grundlinie befindet.
04. Kern dein Text
Kerning ist der Abstand zwischen den einzelnen Buchstaben (weitere Informationen finden Sie in unserem typografisches Glossar ) und die Auto-Kerning-Option in FontCreator räumt Ihre Buchstaben natürlich so aus, dass die Schrift ordentlich aussieht. Probieren Sie diese Option aus und stellen Sie sicher, dass jeder Buchstabe zusammen gut aussieht.
Wenn es fertig ist, exportieren Sie Ihre Schriftart und installieren Sie sie auf Ihrem Computer. Dadurch wird es automatisch zu Photoshop CC hinzugefügt.
05. Richten Sie ein Photoshop-Dokument ein
Erstellen Sie ein neues Dokument in Photoshop. Erstellen Sie auf einer neuen Ebene eine Farbpalette mit einem großen Pinsel. Wir gingen mit # 501d26, # af273d, # f74663, # ffdae1, # 35e985 und # b2dcc4.
Suchen Sie dann ein geeignetes Hintergrundbild und ziehen Sie es in Photoshop. Erstellen Sie eine neue Ebene, füllen Sie sie mit der tiefroten Farbe und duplizieren Sie sie. Stellen Sie eine Ebene auf Multiplizieren und eine auf Farbe ein. Erstellen Sie eine Helligkeits- / Kontrastebene und setzen Sie die Helligkeit auf -75. Dupliziere dies und maskiere die Mitte für eine Vignette.
06. Geben Sie den Text ein
Nehmen Sie das Textwerkzeug und wählen Sie Ihre Schriftart aus (wenn Sie zuvor keine Schriftart erstellt haben, platzieren Sie sie einfach in jedem Buchstaben einzeln). Formulieren Sie vorher Ihren Text Strg + Rechtsklick die Ebene und wählen Sie Rasterize Type.
07. Erstelle ein Leuchten
Strg + Rechtsklick Klicken Sie auf die Ebene und gehen Sie zu Mischoptionen> Äußeres Leuchten. Geben Sie dort eine Deckkraft von 50%, einen Spread von 5% und eine Größe von 63px ein. Jetzt können Sie sehen, dass Ihr Neontext viel realistischer aussieht. Wählen Sie eine helle Farbe.
Klicken Sie auf Abschrägen und Prägen, noch in der Option Ebenenstile. Wählen Sie Tiefe: 250%, Größe: 5px, Erweichen: 2px. Verwenden Sie die Modi Hervorheben und Schatten, um dem Text etwas mehr Tiefe zu verleihen, und spielen Sie mit diesen Optionen, bis Sie die richtige Mischung gefunden haben.
08. Spielen Sie mit Schatten herum
Wählen Sie für den inneren Schatten dieselbe helle Farbe, die Sie für das äußere Leuchten ausgewählt haben. Hier müssen Sie lediglich die Größe bearbeiten, je nachdem, wie groß der Text ist. Ändern Sie dies und lassen Sie alle anderen Werte bei 0.
Da der Neontext leicht von der Wand abweicht, benötigen wir einen subtilen Schlagschatten, aber nicht zu viel, da wir das äußere Leuchten nicht beeinträchtigen möchten. Verwenden Sie eine geringe Deckkraft und geben Sie dieser mehr Abstand und Größe.
09. Zünde es an
Gehe zur Textebene, Strg / Klicken Sie mit der rechten Maustaste und wählen Sie Ebenenstile kopieren. Klicke auf die Tierschicht, Strg / Klicken Sie mit der rechten Maustaste und wählen Sie Ebenenstile einfügen. Doppelklicken Sie auf das FX-Symbol und ändern Sie die rosa Farben in Grün, um einen kleinen Kontrast zum Text zu erhalten.
Nehmen Sie das Stiftwerkzeug und erstellen Sie eine Zeichenfolge aus dem Neontext und den von Ihnen erstellten Tieren. Stellen Sie sicher, dass alle Zeichen durchlaufen werden, und streichen Sie dann mit # 808080 mit einem 2px-Pinsel, der mit einem Abstand von 1% ausgewählt wurde.
10. Fügen Sie einen Schlagschatten hinzu
Gehen Sie zu den Mischoptionen für die gerade erstellte Zeichenfolge. Gehen Sie zu Bevel, um ihm eine subtile Form zu geben, und geben Sie ihm auch einen subtilen Schlagschatten. Die Variablen hier hängen von der Größe und Form der von Ihnen erstellten Zeichenfolge ab. Experimentieren Sie also einfach, um zu sehen, was funktioniert.
11. Erstellen Sie eine 'Aus' -Version
Lassen Sie uns eine Textebene erstellen, die nicht leuchtet, damit wir einige Buchstaben flackern lassen können. Duplizieren Sie die Textebene und verbergen Sie dann den Outer Glow-Stil. Stellen Sie den inneren Schatten auf # 808080 und ändern Sie dann die Helligkeit dieser Ebene mit Farbton / Sättigung auf -50 ( cmd / ctrl + U. ).
Nehmen Sie auf der leuchtenden Textebene das Auswahlrechteck und wählen Sie einige Buchstaben aus, die Sie in der Animation kurz ausschalten möchten. Machen Sie Duplikate dieser Ebene, wobei diese Buchstaben ausgeblendet werden, bis Sie über genügend Ebenen verfügen, um eine Animation zu erstellen.
12. Animieren Sie Ihr Design
Gehen Sie in Photoshop oben rechts und wählen Sie Bewegung als Arbeitsbereich aus. Die Animationszeitleiste wird unten angezeigt. Hier können Sie festlegen, welche Ebenen so lange angezeigt oder ausgeblendet werden sollen, wie Sie möchten.
Erstellen Sie neue Rahmen am unteren Rand mit verschiedenen Buchstaben, die entweder leuchten oder nicht leuchten, je nachdem, ob die Ebene sichtbar ist oder nicht. Stellen Sie die Zeit der Animation jeder Ebene auch mit dem kleinen Pfeil auf jedem Bild ein. Speichern Sie als GIF mit Save For Web.
Dieser Artikel wurde ursprünglich in Web Designer, dem kreativen Webdesign-Magazin, veröffentlicht. Er bietet Experten-Tutorials, aktuelle Trends und kostenlose Ressourcen. Abonnieren Sie hier den Web Designer .
Zum Thema passende Artikel:
