Opret en glødende neon tekst effekt

Sep 16, 2025

hvordan

Ofte er det de enkleste effekter, der ser den mest slående, og neon-tekst er et sådant projekt. Det er også meget lettere at skabe en neon effekt, der ser realistisk end du måske tror. Mens hele denne tutorial kun bruger et baggrundsbillede, tricker din hjerne sig selv til at se dette som et rigtigt, fungerende neonskilt - det er kraften i Photoshop CC. s lag stilarter. Lær mere om fantastiske ting, du kan gøre med Photoshops lag her .

Få Adobe Creative Cloud

Det faktum, at hele dette projekt er bygget fra bunden - fra skrifttypen til glødens farver, til den eventuelle animation - betyder, at der er en masse muligheder for kreativitet. Du kan vælge præcis, hvad du vil have hver eneste del af denne effekt til at se ud.

Neon fortsætter med at være populær. Viser af mættede toner mod en mørk, dæmpet baggrund er en fantastisk måde at præsentere en LANDING SIDE , A. logo design. eller en header, og det er nemt at animere dit arbejde og gemme det som en GIF med en lav filstørrelse (hold dine filer sikkert i Sky lagring ). Lad os dykke ind i, hvordan man laver det.

Oprettelse af en skrifttype, der skal vises på en ny hjemmeside? Du har brug for A. Website Builder. og fremragende Web Hosting. .

01. Start med at oprette skrifttypen

Use Photoshop's Pen tool to draw the letter 'a' — Brug Photoshop's pen værktøj til at tegne dit første bogstav

Opret et nyt dokument 550x550px i Photoshop, og tag Gitteret op ved at ramme cmd / ctrl + ' . Opret et nyt lag og med penværktøjet, skitsere dit første bogstav. Forlad huller i tegnet, da dette vil være en neon-stil skrifttype. Når du er glad, hit stroke i fanen Stier for at trække i brevet.

02. Arbejd gennem alfabetet

dollar and pounds signs in Photoshop — Glem ikke om de specialtegn

Opret så mange tegn som du vil, med pennen på et nyt lag hver gang. Hvis du vil, skal du tilføje i nogle specialtegn, f.eks. Valutasymboler, tegnsætning og accentede bogstaver. Følg den samme grundlæggende stil, du startede med, så din skrifttype er sammenhængende.

03. Flyt ind i fontcreator

fontcreator trial — Der er en gratis prøveversion af Fontcreator tilgængelig, hvis du har brug for det

Hvis du har High-logic Fontcreator , Dette er den del, hvor du kan gøre dine tegn til en skrifttype. Hvis du ikke gør det, er der en gratis prøveperiode. Ved at indsætte hver karakter i FontCreator kan vi oprette en brugbar skrifttype til Photoshop.

Arbejd dig gennem fontcreator ved at dobbeltklikke på hvert tegn og indsætte i dit pen-trækkede arbejde. Sørg for, at hvert bogstav er på samme baseline.

04. Kern din tekst

check your kerning — Tjek altid din kerning

Kerning er pladsen mellem hver af bogstaverne (for mere information, tag et kig på vores Typografisk ordliste. ), og alternativet Auto-Kerning inden for Fontcreator naturligt ud af dine breve, så skrifttypen ser pænt ud. Prøv denne indstilling og sørg for, at hvert bogstav ser godt sammen.

Når det er færdigt, udfør din skrifttype og installer den i din computer. Dette vil automatisk tilføje det til Photoshop CC.

05. Opsæt et Photoshop-dokument

photoshop document palette — Brug vores foreslåede palette eller opret din egen

Opret et nyt dokument i Photoshop. På et nyt lag skal du oprette en farvepalette ved at bruge en stor børste. Vi gik med # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 og # B2DCC4.

Find derefter et passende baggrundsbillede og træk det i Photoshop. Opret et nyt lag, fyld det den dybe røde farve og duplikere. Indstil et lag til at formere sig, og en til farve. Opret et lysstyrke / kontrastlag og indstillet til -75 i lysstyrke. Duplikere dette og maske midten for en vignette.

06. Indtast teksten

default text in Photoshop — Skriv i nogle tekst og rasterise det

Grib type værktøjet og vælg din skrifttype (hvis du ikke oprettet en skrifttype tidligere, skal du bare placere i hvert bogstav individuelt). Stave din tekst ud, før CTRL + Højreklik på laget og udvælgelse af rasterize type.

07. Opret en glød

add a bevel in Photoshop — Giv din tekst lidt mere dybde med en dejlig skråning

CTRL + Højreklik laget, og gå til blanding af muligheder og gt; Ydre glød. Der, input en opacitet på 50%, en spredning på 5% og en størrelse på 63px. Nu kan du se din neon tekst, der begynder for at se meget mere realistisk ud. Vælg en lys farve.

Klik på Bevel og Emboss, stadig i Layer Styles indstillingen. Vælg dybde: 250%, størrelse: 5px, blødgør: 2px. Brug Highlight og Shadow-tilstandene til at tilføje lidt mere dybde til teksten, og afspil med disse muligheder, indtil du finder den rigtige blanding.

08. Spil rundt med skygger

drop shadow in Photoshop — Må ikke ødelægge din ydre glød med din drop shadow

For den indre skygge skal du vælge den samme lyse farve, du har valgt til den ydre glød. Alt du skal redigere her er størrelsen, afhængigt af hvor stor teksten er. Ændre dette og forlade alle andre værdier ved 0.

Da neon-teksten kommer til at sidde væk fra væggen lidt, skal vi have brug for en subtil drop skygge, men ikke for meget som vi ikke ønsker at kompromittere den ydre glød. Brug en lav opacitet, og giv denne en mere afstand og størrelse.

09. Lys det op

string added to text in Photoshop — Sørg for, at strengen følger gennem alle tegnene

Gå til tekstlaget, Ctrl. / Højreklik og vælg Kopierlagsstil. Klik på dyreag, Ctrl. / Højreklik og vælg Indsæt Layer Styles. Dobbeltklik på FX-ikonet og drej de lyserøde farver til Green for en lille kontrast til teksten.

Grib penværktøjet og lav en streng gennem neonteksten og de dyr, du har oprettet. Sørg for, at det følger gennem alle tegnene, og derefter slagt med # 808080, med en 2px børste valgt med 1% afstand.

10. Tilføj en drop-shadow

add a drop shadow in Photoshop — Giv strengen en skrå og lidt dråbe skygge

Gå til blandingsindstillingerne for den streng, du lige har lavet. Gå til Bevel for at give det en subtil form, og giv det også en subtil drop skygge. Variablerne her afhænger af størrelsen og form af den streng, du har oprettet, så bare eksperimentere for at se, hvad der virker.

11. Opret en 'Off' version

flickering effect in Photoshop — Nu lav en ikke-glødende kopi, så du kan skabe en flimmerende effekt

Lad os skabe et lag af tekst, der ikke gløder, så vi kan animere en flimmer på nogle af bogstaverne. Duplikér tekstlaget, og skjul derefter den ydre glødestil. Indstil den indre skygge til # 808080, og ændre derefter lysheden af dette lag til -50 ved hjælp af Hue / Saturation ( cmd / ctrl. + U. ).

På det glødende tekstlag skal du tage markeringsværktøjet og vælge et par bogstaver, du vil slukke kort i animationen. Gør duplikationer af dette lag, med disse bogstaver maskeret ud, indtil du har tilstrækkelige lag til at oprette en animation.

12. Animér dit design

export animation as a gif in Photoshop — Eksporter som en animeret gif, og du er god at gå

Gå til øverste højre side af Photoshop og vælg Motion som en arbejdsområde. Animationstidslinjen vises i bunden; Her kan du definere, hvilke lag der vises eller skjules på, men længe du vil have dem til at være.

Opret nye rammer langs bunden med forskellige bogstaver, enten glødende eller ikke glødende, afhængigt af om laget er synligt eller ej. Indstil tiden for hvert lags animation ved hjælp af den lille pil på hver ramme også. Gem som en GIF ved hjælp af Gem til Web.

Denne artikel blev oprindeligt offentliggjort i Web Designer, Creative Web Design Magazine - tilbyder ekspert tutorials, banebrydende trends og gratis ressourcer. Abonner på Web Designer her .

Relaterede artikler:

40 must-se eksempler på kinetisk typografi
Sådan oprettes en animeret skriveffekt
Opret din egen 3D-skrifttype

Opret en glødende neon tekst effekt

01. Start med at oprette skrifttypen

02. Arbejd gennem alfabetet

03. Flyt ind i fontcreator

04. Kern din tekst

05. Opsæt et Photoshop-dokument

06. Indtast teksten

07. Opret en glød

08. Spil rundt med skygger

09. Lys det op

10. Tilføj en drop-shadow

11. Opret en 'Off' version

12. Animér dit design

hvordan - Mest populære artikler

Sådan oprettes en 3D-varulv i Unreal Engine

21 Måder til at optimere din CSS og fremskynde dit websted

Sådan korrigeres en fejlfri sammensætning

Skærpe din hårde overflade modellering i 3ds max

12 Tips til realistisk 3D-belysning

Simuler en spøgelsesraner transformation

Introduktion til brugervenlighedstest

Opret interaktive diagrammer i Ionic 2

Kategorier