Skapa en glödande neon text effekt

Sep 11, 2025
Hur

Ofta är det de enklaste effekterna som ser den mest slående, och neontexten är ett sådant projekt. Det är också mycket lättare att skapa en neon-effekt som ser realistiskt ut än du kanske tror. Medan hela handledningen bara använder en bakgrundsbild, trickar din hjärna sig till att se detta som ett riktigt, fungerande neontecken - det är kraften i Photoshop cc s lager stilar. Läs mer om Fantastiska saker du kan göra med Photoshops lager här .

Det faktum att hela projektet är byggt från början - från teckensnittet till glödens färger, till den eventuella animationen - innebär att det finns mycket utrymme för kreativitet. Du kan välja exakt vad du vill ha alla delar av denna effekt att se ut.

Neon fortsätter att vara populär. Att visa mättade toner mot en mörk, dämpad bakgrund är ett bra sätt att presentera en landningssida , a logotypdesign eller en rubrik, och det är lätt att animera ditt arbete och spara det som en GIF med en låg filstorlek (håll dina filer säkra i molnlagring ). Låt oss dyka in i hur man skapar den.

Skapa ett teckensnitt som ska visas på en ny webbplats? Du behöver en Website Builder och utmärkt webbhotell .

01. Börja skapa teckensnittet

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

Använd Photoshops pennverktyg för att rita din första bokstav

Skapa ett nytt dokument 550x550px i Photoshop och ta upp gallret genom att slå cmd / ctrl + ' . Skapa ett nytt lager och med pennverktyget, skissa ut din första bokstav. Lämna luckor i tecknet, eftersom det kommer att bli en typsnitt neon-stil. När du är glad, slå stroke på fliken vägar för att rita i brevet.

02. Arbeta genom alfabetet

dollar and pounds signs in Photoshop

Glöm inte de speciella tecknen

Skapa så många tecken som du vill, med pennan på ett nytt lager varje gång. Om du vill, lägg till i några specialtecken, till exempel valutasymboler, skiljetecken och accenterade bokstäver. Följ samma grundläggande stil som du började med, så ditt teckensnitt är sammanhängande.

03. Flytta in i fontcreator

fontcreator trial

Det finns en gratis provning av fontcreator tillgänglig om du behöver det

Om du har Höglogsam fontcreator , det här är den del där du kan vända dina tecken till ett teckensnitt. Om du inte gör det är en gratis rättegång tillgänglig. Genom att klistra in varje tecken i Fontcreator kan vi skapa ett användbart typsnitt för Photoshop.

Arbeta dig igenom Fontcreator genom att dubbelklicka på varje tecken och klistra in i ditt penndragna arbete. Se till att varje bokstav är på samma baslinje.

04. Kern Din text

check your kerning

Kontrollera alltid din kerning

Kerning är utrymmet mellan var och en av bokstäverna (för mer information, ta en titt på vår Typografisk ordlista ), och det automatiska alternativet i Fontcreator rymmer naturligtvis dina bokstäver så att teckensnittet ser snyggt ut. Prova det här alternativet och se till att varje brev ser bra ut tillsammans.

När det är klart, exportera ditt teckensnitt och installera det i din dator. Detta lägger automatiskt till det i Photoshop CC.

05. Ställ in ett Photoshop-dokument

photoshop document palette

Använd vår föreslagna palett eller skapa din egen

Skapa ett nytt dokument i Photoshop. På ett nytt lager skapar du en färgpalett genom att använda en stor borste. Vi gick med # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 och # B2DCC4.

Hitta sedan en lämplig bakgrundsbild och dra den till Photoshop. Skapa ett nytt lager, fyll det den djupa röda färgen och duplicera. Ställ ett lager för att multiplicera och en till färg. Skapa ett ljusstyrka / kontrastlager och sätt till -75 i ljusstyrka. Duplicera detta och maskera mitten för en vignett.

06. Ange texten

default text in Photoshop

Skriv in lite text och rasterise det

Ta tag i typverktyget och välj ditt teckensnitt (om du inte skapade ett teckensnitt tidigare, bara placera i varje bokstav individuellt). Stava ut din text, före Ctrl + Högerklick skiktet och välja rasterize-typ.

07. Skapa en glöd

add a bevel in Photoshop

Ge din text lite mer djup med en härlig avfasning

Ctrl + Högerklicka skiktet och gå till blandningsalternativ och gt; Yttre glöd. Där ingår en opacitet på 50%, en spridning av 5% och en storlek av 63px. Nu kan du se din neontext som börjar se mycket mer realistisk ut. Välj en ljus färg.

Klicka på Bevel och Emboss, fortfarande i alternativet Layer Styles. Välj djup: 250%, storlek: 5px, mjukna: 2px. Använd höjdpunkten och skugglägena för att lägga till lite djupare för texten och spela med dessa alternativ tills du hittar rätt mix.

08. Spela runt med skuggor

drop shadow in Photoshop

Röra inte din yttre glöd med din droppe skugga

För den inre skuggan, välj samma ljusfärg du valde för den yttre glöden. Allt du behöver för att redigera här är storleken, beroende på hur stor texten är. Ändra detta och lämna alla andra värden på 0.

Eftersom neontexten kommer att sitta av väggen något, kommer vi att behöva en subtil droppe skugga, men inte för mycket som vi inte vill äventyra den yttre glöden. Använd en låg opacitet och ge den här några andra avstånd och storlek.

09. Ljus upp det

string added to text in Photoshop

Se till att strängen följer igenom alla tecken

Gå till textskiktet, ctrl / Högerklicka och välj Kopiera lagerstilar. Klicka på djurskiktet, ctrl / Högerklicka och välj Klistraymboler. Dubbelklicka på FX-ikonen och vrid de rosa färgerna till grönt för en liten kontrast till texten.

Ta tag i pennverktyget och skapa en sträng genom neontexten och de djur som du har skapat. Se till att det följer genom alla tecken och sedan stroke med # 808080, med en 2px borste vald med 1% avstånd.

10. Lägg till en drop-shadow

add a drop shadow in Photoshop

Ge strängen en vinkel och lite droppskugga

Gå till blandningsalternativen för den sträng du just har gjort. Gå till vinkel för att ge det en subtil form, och ge den en subtil droppe skugga också. Variablerna här beror på storleken och formen av den sträng du har skapat, så bara experimentera för att se vad som fungerar.

11. Skapa en "off" -version

flickering effect in Photoshop

Gör nu en icke-glödande kopia så att du kan skapa en flimrande effekt

Låt oss skapa ett lager av text som inte är glödande, så vi kan animera en flimmer på några av bokstäverna. Duplicera textskiktet, dölj sedan den yttre glödstilen. Ställ in den inre skuggan till # 808080, ändra sedan ljuset i detta lager till -50, med nyans / mättnad ( cmd / ctrl + Du ).

På det glödande textlagret, ta tag i markeringsverktyget och välj några bokstäver som du vill stänga av kort i animationen. Gör duplikationer av detta lager, med dessa bokstäver maskerade tills du har tillräckliga lager för att skapa en animering.

12. Animera din design

export animation as a gif in Photoshop

Exportera som en animerad GIF och du är bra att gå

Gå till toppen av Photoshop och välj Motion som ett arbetsytalternativ. Animations tidslinje visas längst ner; Här kan du definiera vilka lager som visas eller är dolda på så länge du vill att de ska vara.

Skapa nya ramar längs botten med olika bokstäver, antingen glödande eller inte glödande, beroende på om skiktet är synligt eller inte. Ställ in tiden för varje lagerets animering med den lilla pilen på varje ram också. Spara som en GIF med Spara för webben.

Den här artikeln publicerades ursprungligen i webbdesigner, den kreativa webbdesignmagasinet - som erbjuder experthandledning, spetstrender och gratis resurser. Prenumerera på webbdesigner här .

Relaterade artiklar:

  • 40 måste-se exempel på kinetisk typografi
  • Hur man skapar en animerad typseffekt
  • Skapa din egen 3D-typsnitt

Hur - Mest populära artiklar

Hur man förfina din designportfölj

Hur Sep 11, 2025

Din portfölj håller nyckeln till att få nästa projekt i väskan så det förtjänar mycket uppmärksamhet. Det är också viktigt att komma ihåg att det aldrig är en färdig produkt. So..

Hur man ritar en elefant

Hur Sep 11, 2025

Som det största levande landet däggdjur på jorden har elefanter ganska otrevlig närvaro. Vid födseln väger elefanter redan upp till 200 pund (ungefä..

Kom igång med diffus

Hur Sep 11, 2025

Ett av de enklaste sätten att få lite extra liv till någon bit av 3d konst är att lägga till färg och textur till den. Det finns en mängd olika namn som ges till denna p..

Hur man skapar glasögon med akvarell

Hur Sep 11, 2025

För den här workshopen tar jag dig steg för steg genom en av mina målningar - som täcker allt från konceptet skissar till ..

Hur man skulpterar i Cinema 4D

Hur Sep 11, 2025

När man närmar sig en modell eller scen som kräver den raffinerade modelleringen som erbjuds genom skulptur, kan många 3D-art..

Hur man bygger snabbare webbplatser

Hur Sep 11, 2025

Framför hans prat på Generera london den 21 september tog vi upp med Patrick hamnann , en webbpre..

Hur man målar magiska glödande runor

Hur Sep 11, 2025

I den här handledningen visar jag dig hur man målar mystiska runor som verkar glöda. Min formel för att måla glödande saker..

Hur man använder lagerfotografi kreativt inom ditt designarbete

Hur Sep 11, 2025

I stället för att vara en sista utväg, kan Stock Imagery och bilda en väsentlig del av din kreativa arsenal. Från lager vekt..

Kategorier