Lag en glødende neon tekst effekt

Sep 14, 2025
hvordan
[1. 3]

Ofte er det de enkleste effektene som ser mest slående, og neon-teksten er et slikt prosjekt. Det er også mye lettere å skape en neoneffekt som ser realistisk ut enn du kanskje tror. Mens denne hele opplæringen bare bruker ett bakgrunnsbilde, triker hjernen din seg til å se dette som et ekte, fungerende neonskilt - det er kraften til Photoshop CC. s lagers stiler. Lær mer om fantastiske ting du kan gjøre med Photoshops lag her .

Det faktum at dette hele prosjektet er bygget fra grunnen - fra fonten til glødens farger, til den endelige animasjonen - betyr at det er mye mulighet for kreativitet. Du kan velge nøyaktig hva du vil ha hver del av denne effekten for å se ut.

Neon fortsetter å være populær. Viser av mettet toner mot en mørk, dempet bakgrunn er en fin måte å presentere en destinasjonsside , A. Logo Design eller en header, og det er enkelt å animere arbeidet ditt og lagre det som en GIF med en lav filstørrelse (hold filene dine trygge i skylagring ). La oss dykke inn på hvordan du lager det.

Opprette en skrift som skal vises på et nytt nettsted? Du trenger en Nettstedbygger og utmerket Web Hosting. .

01. Begynn å lage skrifttypen

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

Bruk Photoshops pennverktøy for å tegne ditt første brev

Opprett et nytt dokument 550x550px i Photoshop, og ta opp rutenettet ved å treffe CMD / CTRL + ' . Opprett et nytt lag og med pennverktøyet, skisser du ut ditt første brev. La hull i tegnet, da dette kommer til å være en neon-stil skrifttype. Når du er glad, må du slå slag i fanen Stier for å tegne i brevet.

02. Arbeid gjennom alfabetet

dollar and pounds signs in Photoshop

Ikke glem de spesielle tegnene

Lag så mange tegn som du vil, med pennen på et nytt lag hver gang. Hvis du vil, legger du til noen spesialtegn, for eksempel valutasymboler, tegnsetting og aksentbrev. Følg den samme grunnleggende stilen du startet med, så din skrift er sammenhengende.

03. Flytt inn i fontCreator

fontcreator trial

Det er en gratis prøveversjon av fontcreator tilgjengelig hvis du trenger det

Hvis du har Høytogisk fontCreator , Dette er den delen der du kan slå tegnene dine til en skrift. Hvis du ikke gjør det, er en gratis prøveversjon tilgjengelig. Ved å lime inn hvert tegn i fontCreator, kan vi lage et brukbart skrifttype for Photoshop.

Arbeid deg gjennom fontCreator ved å dobbeltklikke på hvert tegn og lim inn i pennegruppen. Pass på at hvert brev er på samme basislinje.

04. KERN din tekst

check your kerning

Dobbeltklikk alltid kjernen din

Kerning er plassen mellom hver av bokstavene (for mer informasjon, ta en titt på vår Typografisk ordliste ), og auto-kerningalternativet i fontcreatoren naturlig mellomrom ut av bokstavene dine slik at fonten ser pent ut. Prøv dette alternativet og sørg for at hvert brev ser bra sammen.

Når den er fullført, eksporter din skrift og installer den i datamaskinen. Dette vil automatisk legge det til Photoshop CC.

05. Sett opp et Photoshop-dokument

photoshop document palette

Bruk vår foreslåtte palett eller lag din egen

Opprett et nytt dokument i Photoshop. På et nytt lag, opprett en fargepalett ved å bruke en stor børste. Vi gikk med # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 og # B2DCC4.

Finn deretter et passende bakgrunnsbilde og dra det til Photoshop. Opprett et nytt lag, fyll det på den dype røde fargen, og duplikat. Sett ett lag for å multiplisere, og en til farge. Lag et lysstyrke / kontrastlag og sett til -75 i lysstyrke. Dupliser dette og masker senteret for en vignette.

06. Skriv inn teksten

default text in Photoshop

Skriv inn litt tekst og rasteris den

Ta tak i typen verktøy og velg skrifttypen din (hvis du ikke opprettet en skrifttype tidligere, bare plass i hvert brev individuelt). Stave ut teksten din, før Ctrl + Høyreklikk laget og valg av rasteriser type.

07. Lag en glød

add a bevel in Photoshop

Gi teksten litt mer dybde med en nydelig skråning

Ctrl + Høyreklikk laget, og gå til blending alternativer og GT; Ytre glød. Der, skriv inn en opasitet på 50%, et spredning på 5% og en størrelse på 63px. Nå kan du se din neon tekst begynner å se mye mer realistisk. Velg en lys farge.

Klikk på Bevel og Emboss, fortsatt i alternativet Lagstiler. Velg dybde: 250%, størrelse: 5px, myk: 2px. Bruk høydepunktet og skyggemodusene for å legge til litt mer dybde i teksten, og spill med disse alternativene til du finner den riktige blandingen.

08. Spill rundt med skygger

drop shadow in Photoshop

Ikke rot opp din ytre glød med dropskyggen din

For den indre skyggen, velg den samme lyse fargen du plukket for den ytre gløden. Alt du trenger å redigere her er størrelsen, avhengig av hvor stor teksten er. Endre dette og la alle andre verdier på 0.

Som neon-teksten kommer til å sitte av veggen litt, skal vi trenge en subtil dråpe skygge, men ikke for mye som vi ikke vil kompromittere den ytre gløden. Bruk en lav opasitet, og gi denne litt mer avstand og størrelse.

09. Lys det opp

string added to text in Photoshop

Pass på at strengen følger gjennom alle tegnene

Gå til tekstlaget, CTRL. / Høyreklikk og velg Kopier lagstiler. Klikk på dyret, CTRL. / Høyreklikk og velg Lim Layer Styles. Dobbeltklikk på FX-ikonet og slå de rosa fargene til grønt for en liten kontrast til teksten.

Ta tak i pennverktøyet og opprett en streng gjennom neon-teksten og dyrene du har opprettet. Pass på at det følger gjennom alle tegnene, og deretter strekk med # 808080, med en 2px pensel valgt med 1% avstand.

10. Legg til en drop-shadow

add a drop shadow in Photoshop

Gi strengen en skråning og litt drop shadow

Gå til blandingsalternativene for strengen du nettopp har laget. Hodet til å skygge for å gi den en subtil form, og gi den en subtil dråpe skygge også. Variablene her avhenger av størrelsen og formen på strengen du har opprettet, så bare eksperimentere for å se hva som fungerer.

11. Opprett en 'av' versjon

flickering effect in Photoshop

Gjør nå en ikke-glødende kopi, slik at du kan opprette en flimrende effekt

La oss lage et lag med tekst som ikke lyser, så vi kan animere en flimmer på noen av bokstavene. Dupliser tekstlaget, skjul deretter den ytre glødstilen. Sett den indre skyggen til # 808080, og endre lysets lyshet til -50, ved hjelp av Hue / Metning ( CMD / CTRL. + U. ).

På det glødende tekstlaget, ta tak i markeringsverktøyet og velg noen bokstaver du vil slå av kort i animasjonen. Gjør duplikasjoner av dette laget, med disse bokstavene maskert til du har tilstrekkelige lag for å lage en animasjon.

12. Animere ditt design

export animation as a gif in Photoshop

Eksporter som en animert gif og du er god til å gå

Gå til toppen til høyre for Photoshop og velg Motion som et arbeidsområdealternativ. Animasjon tidslinjen vil vises på bunnen; Her kan du definere hvilke lag som vises eller skjules på, men lenge du vil at de skal være.

Lag nye rammer langs bunnen med forskjellige bokstaver enten glødende eller ikke glødende, avhengig av om laget er synlig eller ikke. Still inn tidspunktet for hvert lags animasjon ved hjelp av den lille pilen på hver ramme også. Lagre som en GIF ved hjelp av Save for Web.

Denne artikkelen ble opprinnelig publisert i webdesigner, Creative Web Design Magazine - tilbyr ekspertveiledning, banebrytende trender og gratis ressurser. Abonner på webdesigner her .

Relaterte artikler:

  • 40 må-se eksempler på kinetisk typografi
  • Hvordan lage en animert skrivingseffekt
  • Lag ditt eget 3D-skrift

hvordan - Mest populære artikler

Bygg en stemme kontrollert UI

hvordan Sep 14, 2025

Vi har sett mange nye APIer lagt til på nettet de siste årene som har virkelig gjort det mulig for webinnhold å ha samme type funksjonalitet som mange apper har hatt i noen tid. En relativ..

Hvordan bygge en progressiv web app

hvordan Sep 14, 2025

[1. 3] Mobil står nå for over halvparten av webens trafikk, og webapplikasjoner gjør det mulig for brukere å gjøre ting i net..

Generer endeløse fargepaletter med Khroma

hvordan Sep 14, 2025

[1. 3] Utmerket bruk av fargeteori I design er en av de tingene som skiller det store fra gjennomsnittet. Mens subj..

Hvordan tegne med Affinity Photo for iPad

hvordan Sep 14, 2025

[1. 3] Affinity Foto for iPad er en flott bilderedigeringsprogram , hvordan skjer serifs app når det g..

Simulere en spøkelse rytter transformasjon

hvordan Sep 14, 2025

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Hvordan designe brukervennlige mobilgrensesnitt

hvordan Sep 14, 2025

[1. 3] Noen mobile designene lider av et problem: de kan se bra ut på overflaten, men begynner å bruke dem, og du vil snart finn..

11 tips for å skape et vannaktig landskap i 3D

hvordan Sep 14, 2025

Clarisse. er en relativt ny applikasjon, og det er mer enn bare en gjengemotor, et layout- eller utseendeutviklingsverktøy. Clarisse frigjør artister fra begrensninger av datakr..

Utforsk kreativ kode med p5.js

hvordan Sep 14, 2025

[1. 3] Tilbringe en dag med Brendan Dawes. på Generere London ..

Kategorier