Erstellen Sie einen glühenden Neontexteffekt

Sep 16, 2025
wie man

Oft sind es die einfachsten Effekte, die am auffälligsten aussehen, und Neonentext ist ein solches Projekt. Es ist auch viel einfacher, einen Neon-Effekt zu erstellen, der realistisch aussieht, als Sie denken könnten. Während dieses gesamte Tutorial nur ein Hintergrundbild verwendet, trickt sich Ihr Gehirn, um dies als echtes, funktionierendes Neonzeichen zu sehen - das ist die Kraft von Photoshop CC. 'S Ebenenstile. Erfahren Sie mehr über die Erstaunliche Dinge, die Sie mit Photoshops Schichten hier machen können .

Die Tatsache, dass dieses gesamte Projekt von Grund auf aufgebaut ist - von der Schriftart bis zu den Farben des Glühens bis zur eventuellen Animation - bedeutet, dass es viel Umfang der Kreativität gibt. Sie können genau das wählen, was Sie möchten, dass jeder Teil dieses Effekts aussehen möchte.

Neon ist weiterhin beliebt. Wenn Sie gesättigte Töne vor einem dunklen, gedämpften Hintergrund zeigen, ist eine großartige Möglichkeit, ein zu präsentieren Landing-Seite , ein Logo Design oder ein Header, und es ist einfach, Ihre Arbeit zu animieren und es mit einer niedrigen Dateigröße als GIF zu speichern (halten Sie Ihre Dateien sicher in Cloud-Speicherung. ). Lass uns tauchen, wie man es erstellen kann.

Erstellen einer Schriftart, die auf einer neuen Website angezeigt werden soll? Du brauchst ein Webseitenersteller und ausgezeichnet Web-Hosting .

01. Beginnen Sie mit dem Erstellen der Schriftart

Use Photoshop's Pen tool to draw the letter 'a'

Verwenden Sie das Peno-Tool von Photoshop, um Ihren ersten Buchstaben zu zeichnen

Erstellen Sie ein neues Dokument 550x550PX in Photoshop und bringen Sie das Gitter mit dem Schlagen auf cmd / ctrl + ' . Erstellen Sie eine neue Ebene und mit dem Stiftwerkzeug, skizzieren Sie Ihren ersten Buchstaben. Lassen Sie Lücken im Charakter, da dies eine Neonstart-Schrift sein wird. Sobald Sie glücklich sind, schlagen Sie den Schlaganfall auf der Registerkarte Pfade, um in den Buchstaben zu zeichnen.

02. Arbeiten Sie durch das Alphabet

dollar and pounds signs in Photoshop

Vergiss nicht die Sonderzeichen

Erstellen Sie so viele Zeichen, wie Sie möchten, wobei der Stift jedes Mal auf einer neuen Ebene angezeigt wird. Wenn Sie möchten, fügen Sie einige Sonderzeichen hinzu, z. B. Währungssymbole, Satzzeichen, Satzzeichen. Folgen Sie dem gleichen Grundstil, mit dem Sie begonnen haben, damit Ihre Schrift kohärt.

03. Wechseln Sie in den FontCreator

fontcreator trial

Es gibt eine kostenlose Testversion für FontCreator verfügbar, wenn Sie es brauchen

Wenn Sie haben High-Logic FontCreator Dies ist der Teil, an dem Sie Ihre Charaktere in eine Schriftart drehen können. Wenn Sie dies nicht tun, ist eine kostenlose Testversion verfügbar. Indem wir jedes Zeichen in FontCreator einfügen, können wir eine verwendbare Schrift für Photoshop erstellen.

Arbeiten Sie sich durch den FontCreator, indem Sie auf jedes Zeichen doppelt klicken und in Ihrer stiftgezogenen Arbeit einfügen. Stellen Sie sicher, dass jeder Buchstabe auf derselben Basislinie ist.

04. KERN IHRER SMS

check your kerning

Überprüfen Sie immer Ihre Kerning

KERNING ist der Raum zwischen den einzelnen Buchstaben (für weitere Informationen, werfen Sie einen Blick auf unsere typografisches Glossar ), und die Auto-Kerning-Option in FontCreator räumt natürlich Ihre Buchstaben aus, damit die Schrift ordentlich aussieht. Versuchen Sie diese Option und stellen Sie sicher, dass jeder Buchstabe zusammen gut aussieht.

Sobald es vollständig ist, exportieren Sie Ihre Schriftart und installieren Sie es in Ihren Computer. Dies fügt es automatisch zu Photoshop CC hinzu.

05. Richten Sie ein Photoshop-Dokument ein

photoshop document palette

Verwenden Sie unsere vorgeschlagene Palette oder erstellen Sie Ihre eigenen

Erstellen Sie ein neues Dokument in Photoshop. Erstellen Sie auf einer neuen Ebene eine Farbpalette, indem Sie eine große Pinsel verwenden. Wir gingen mit # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 und # B2DCC4.

Dann finden Sie ein passendes Hintergrundbild und ziehen Sie es in Photoshop. Erstellen Sie eine neue Ebene, füllen Sie es die tiefe rote Farbe und duplizieren. Stellen Sie eine Schicht ein, um sich zu multiplizieren, und eine zu färben. Erstellen Sie eine Helligkeits- / Kontrastschicht und setzen Sie in Helligkeit auf -75 ein. Duplizieren Sie dies und maskieren Sie das Zentrum für eine Vignette.

06. Geben Sie den Text ein

default text in Photoshop

Geben Sie etwas Text ein und schreien Sie es

Nehmen Sie das Typ-Tool und wählen Sie Ihre Schrift aus (falls Sie eine Schrift nicht früher erstellt haben, legen Sie einfach in jedem Buchstaben einzeln ein). Schreibe deinen Text vor, vorher Strg + Klicken Sie mit der rechten Maustaste auf die Ebene und die Auswahl von Rasterize-Typ.

07. Erstellen Sie ein Glühen

add a bevel in Photoshop

Gib deinen Text etwas mehr Tiefe mit einer schönen Fase

Strg + Klicken Sie mit der rechten Maustaste die Ebene und zu den Mischungsoptionen & gt; Äußerer Glühen. Dort gibt es eine Deckkraft von 50%, eine Verbreitung von 5% und einer Größe von 63px. Jetzt können Sie Ihren Neon-Text sehen, der beginnt, viel realistischer auszusehen. Wählen Sie eine helle Farbe.

Klicken Sie auf Bevel and Embus, immer noch in der Option Layer-Styles. Wählen Sie Tiefe: 250%, Größe: 5px, erweichen: 2px. Verwenden Sie die Markierungs- und Schattenmodi, um dem Text etwas mehr Tiefe hinzuzufügen, und spielen Sie mit diesen Optionen, bis Sie den richtigen Mix finden.

08. Spielen Sie mit Schatten herum

drop shadow in Photoshop

Machen Sie nicht Ihren äußeren Glühen mit Ihrem Drop-Schatten

Wählen Sie für den inneren Schatten die gleiche helle Farbe, die Sie für den äußeren Glühen ausgewählt haben. Alles, was Sie hier bearbeiten müssen, ist die Größe, je nachdem, wie groß der Text ist. Ändern Sie das und lassen Sie alle anderen Werte bei 0.

Da der Neon-Text leicht von der Wand sitzen wird, brauchen wir einen subtilen Schlagschatten, aber nicht zu viel, da wir den äußeren Glühen nicht beeinträchtigen wollen. Verwenden Sie eine geringe Deckkraft, und geben Sie diese ein noch mehr Entfernung und Größe.

09. Ziehen Sie es auf

string added to text in Photoshop

Stellen Sie sicher, dass die Zeichenfolge alle Zeichen folgt

Gehen Sie in die Textschicht, Strg / Klicken Sie mit der rechten Maustaste und wählen Sie Layer-Stile kopieren. Klicken Sie auf die Tierschicht, Strg / Klicken Sie mit der rechten Maustaste und wählen Sie Layer-Stile einfügen. Doppelklicken Sie auf das FX-Symbol und drehen Sie die rosa Farben für einen kleinen Kontrast zum Text auf grün.

Schnappen Sie sich das Stiftwerkzeug und erstellen Sie eine Zeichenfolge durch den Neonentext und die Tiere, die Sie erstellt haben. Stellen Sie sicher, dass es durch alle Zeichen folgt, und dann mit # 808080 streicheln, wobei eine 2px-Pinsel mit einem Abstand von 1% ausgewählt ist.

10. Fügen Sie einen Drop-Shadow hinzu

add a drop shadow in Photoshop

Gib der Schnur eine Abschrägung und ein bisschen Schlagschatten

Gehen Sie zu den Mischungsoptionen für die gerade gemachte Zeichenfolge. Kopf zum Abschrägen, um ihm eine subtile Form zu geben und auch einen subtilen Fallschatten zu geben. Die Variablen hängen hier von der Größe und der Form der von Ihnen erstellten Zeichenfolge ab, also experimentieren Sie einfach, um zu sehen, was funktioniert.

11. Erstellen Sie eine 'OFF'-Version

flickering effect in Photoshop

Machen Sie nun eine nicht glühende Kopie, damit Sie einen flackernden Effekt erstellen können

Lassen Sie uns eine Textschicht erstellen, die nicht glühend ist, sodass wir ein Flimmern an einigen der Buchstaben animieren können. Duplizieren Sie die Textebene, verbergen Sie den äußeren Glühstil. Stellen Sie den inneren Schatten auf # 808080 ein, ändern Sie dann die Leichtigkeit dieser Schicht auf -50, indem Sie mit Farbton / Sättigung verwenden ( cmd / ctrl. + U ).

Schnappen Sie sich auf der leuchtenden Textebene das Festzelt-Tool und wählen Sie einige Buchstaben aus, die Sie kurz in der Animation ausschalten möchten. Erstellen Sie die Duplikationen dieser Ebene, wobei diese Buchstaben ausgeführt werden, bis Sie über ausreichende Ebenen verfügen, um eine Animation zu erstellen.

12. Animieren Sie Ihr Design

export animation as a gif in Photoshop

Exportieren als animiertes GIF und Sie sind gut zu gehen

Gehen Sie zum oberen Recht auf Photoshop und wählen Sie als Arbeitsbereichsoption Bewegung aus. Die Animationszeitleiste wird unten angezeigt. Hier können Sie festlegen, welche Schichten dargestellt sind, ob Sie jedoch lange gezeigt werden, aber Sie möchten, dass sie sie sind.

Erstellen Sie neue Frames entlang des Bodens mit verschiedenen Buchstaben, die entweder glühend oder nicht glühen oder nicht glühen, je nachdem, ob die Schicht sichtbar ist oder nicht. Legen Sie die Zeit der Animation jeder Ebene mit dem kleinen Pfeil auf jedem Rahmen ein. Speichern Sie als GIF mit Speichern für das Web.

Dieser Artikel wurde ursprünglich im Webdesigner, dem kreativen Webdesign-Magazin, veröffentlicht, anbietet Experten-Tutorials, modernste Trends und kostenlose Ressourcen. Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

  • 40 Must-siehe Beispiele der kinetischen Typografie
  • So erstellen Sie einen animierten Tippeffekt
  • Erstellen Sie Ihre eigene 3D-Schrift

wie man - Die beliebtesten Artikel

10 Möglichkeiten, Ihre 3D-Anatomie zu verbessern

wie man Sep 16, 2025

(Bildkredite: Ryan Kingslien) Die Erneuerung der menschlichen Figur ist eines der härtesten Herausforderungen, denen..

So erreichen Sie Skala in Ihren Gemälden

wie man Sep 16, 2025

In diesem Tutorial gehen wir über einige grundlegende Prinzipien, die dazu beitragen, die Idee von großem Maßstab in Ihren eigenen Teilen zu kommunizieren. Ich verwende Bleistifte und Öle..

Machen Sie Ihre App offline mit Service-Arbeitern

wie man Sep 16, 2025

Seite 1 von 2: Seite 1: schnelleres Laden Seite 1: schnelleres Laden ..

10 Regeln für die Herstellung von benutzerfreundlichen Webformularen

wie man Sep 16, 2025

Trotz der Entwicklung der Mensch-Computer-Interaktion bleiben Formen noch eines der wichtigsten Arten von Interaktion für Benutz..

Level auf deiner VR-Art

wie man Sep 16, 2025

Ich habe mit dem Cinema 4D ein paar Monate angefangen, nachdem ich mein VR-Headset vor einem Jahr bekommen habe. Bis dahin ich be..

Exportieren von Effekten Animationen an HTML5

wie man Sep 16, 2025

Animation im Web ist hier, um zu bleiben. Es ist in allem von den subtilen Bewegungen, die unsere Hilfe bringen Ui-Design..

Wie man ein Schloss mit Sketchup malen

wie man Sep 16, 2025

Es gibt eine Reihe von Kunsttechniken das kann mit deiner digitalen Malerei helfen, aber es gibt nicht das Erstell..

Top-Tipps zur Bildhauerung einer Kreatur in Zbrush

wie man Sep 16, 2025

Um den Bau einer Kreatur in Zbrush zu demonstrieren, benutze ich dieses Stück 3D Art. Ich arbeite daran, entworfe..

Kategorien