Shining Neon Text Effect in PhotoshopListThumbs

Shining Neon Text Effect in Photoshop

June 27, 2008

Since we released Abduzeedo's new design, we've received quite a few emails asking for a tutorial showing how to reproduce the our logo effect. Actually since the first time we used that effect, on the Sparkling Hot Girl in Photoshop tutorial, a lot of people have asked us how to do that effect. So in this very short tutorial we will show you how to do that in Photoshop.

Step 1

Create a new document, use the size you want, it doesn't matter. Then fill the background with a very dark gray, #111111.

Shining Neon Text Effect in Photoshop

Step 2

Now place your logo in the document. Duplicate the layer and hide it, we will need it later on.

Shining Neon Text Effect in Photoshop

Step 3

Now with the visible layer, lets apply a Layer Style. Go to Layer>Layer Style>Gradient Overlay. Then use Normal for the Blend Mode, and 60% Opacity. For the color use a gradient with red, yellow, green, and blue.

Shining Neon Text Effect in Photoshop

Step 4

Now let's add some blur, go to Filter>Blur>Gaussiam Blur. Use 4.0 pixels for the Radius.

Shining Neon Text Effect in Photoshop

Step 5

Make the duplicated layer visible and go to Filter>Blur>Gaussian Blur. Use this time 1 pixel for the Radius.

Shining Neon Text Effect in Photoshop

Step 6

Go to Layer>Layer Style>Blending Options. Change the Fill Opacity to 0% on the Advanced Blending. Then go to Outer Glow. Use Color Dodge for the Blend Mode, 50% Opacity, White for the Color, and 18 pixels for the Size. After that, if your logo is not white, you can go to Color Overlay and use white for the color.

Shining Neon Text Effect in Photoshop

Step 7

Now group this single layer and rename the group to "Over" then change the blend mode to Color Dodge. After that you can group everything again and rename it to "Logo".

Shining Neon Text Effect in Photoshop

Conclusion

With this technique you will be able to create a nice neo effect to pretty much all kinds of backgrounds. The only thing you will have to do is change some opacities depending on the color of the background.

Shining Neon Text Effect in Photoshop

Download the Photoshop File

Click here to download the PSD file used on this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

107 Comments

iheartrendering06/27/2008

Thats awesome.

chico06/27/2008

very nice tut! love the the one with rendered clouds in it..!

Nate06/27/2008

I kinda wondered how you did that effect. Who knew it was so simple.

Grafikamateur06/27/2008

Hi,

Nice tutorial, I've written a Tutorial about this text effect, too but my shows how to do this effect in Adobe Fireworks:

http://madeofwin.de/tutorials/text-effekt-inspiriert-durch-abduzeedocom/

bekkz06/27/2008

really nice effect. unfortunately it doesn't work with the logo i used. the white dominates and the colors disappear.

abduzeedo06/27/2008

@bekkz try to change the opacity of the group with color dodge, that will reduce the white ;)

Thank you all for the comments.

Bob Green06/27/2008

Didn't work for me either...I end up with white as well. Are some steps missing?

abduzeedo06/27/2008

@bob could you send me your psd file? I will take a look to see what's going on.

Thanks ;)

Felipe06/27/2008

É do caralho seu blog! Acesso todos os dias!! PARABÉNS... o mais animal de tudo isso é que é um brasileiro!

Abraços!

Mogios06/27/2008

Great tuts, as usual !

Btw, what's the name of that font ?

Mikel06/27/2008

it doesn't work for me either:-s

BogDinamita06/27/2008

FINALLLYYY <:-p great stuff fabio love your site and your hardwork. you should look into having a break man like laying on the beach or smth:P (i'm just saying cause i couldn't keep up with updating a website or a blog and researching all kinda stuff and doing tutorials and photos and all) tremendous work, and i respect it and apreciate it

http://www.flickr.com/photos/bogdinamita/

Patrick06/27/2008

I will definitely be using this technique sooner or later. Thanks!

Sergio Uribe06/27/2008

I'm a fan of your work!!... is amazing!
Thanks for sharing !!!!
greetings from Colombia

K3v06/27/2008

Thanks for sharing these techniques Fabio! Pretty surprising to see how easy this actually is! :)

Jeremy06/27/2008

Was the final step to add the typo to "Abduccted"?

:)

Nice effect.

abduzeedo06/27/2008

Damn it, sorry for the typo... :)

Thanks a lot for the comments.

ghost06/28/2008

yea I keep getting a different outcome, mind checking my psd and telling me what I did wrong Fabio?

http://www.mediafire.com/?iajs8bvxx3d

Thanks4u06/28/2008

Nice effect and easy method

THANKS4U

Thanks4u06/28/2008

Nice effect and simple method

THANKS4U

Felix06/28/2008

Never know it can be this simple :)
Thanks for the tutorial! Enjoyed it so much.

Silver-Solutions06/29/2008

I've been intrigued to learn how to do this effect and I didn't think it would have been so easy to do. Thanks fabio!!! :)
___________________________________________________________________________
www.Silver-Solutions.co.uk - Award Winning Portfolio and Blog of Web Developer Anthony Woods

Stuart Rutter06/29/2008

Great tutorial, thanks for the info.

Caio Cardoso06/29/2008

Fabio, se puder veja meu psd..

http://www.mediafire.com/?caxym4bfyn7

não sei o que fiz de errado.
haha

abraços!
se puder responde no meu e-mail:
caio_designcardoso@hotmail.com

nate1707/02/2008

works better with thin fonts. try setting up the layer styles and applying the blurs after to see how they effect the glow to work with thicker stuff. Thanks for your hard work, love your site.

basem_kh07/02/2008

hey guys its a first time for me here

i loved that website so much its best i ever seen

fabio i love ur work sooooo very much

i have one question , how i can upload my work here? i want ur opinion

abnerjdg07/05/2008

Look at my work!!

http://www.mediafire.com/?mmx0ycf0ywx

godzio8907/06/2008

What font you are used in this tutorial?:)

I tryed!07/07/2008

Well you did good job but only problem here you not telling us more info on which layer you working on and which layer is in front/top. effect is not same after I done this couple times and each time I was confused when it comes on which layer you working. thanks anyway.

cihad07/14/2008

selamun aleykum hac? abducum video deersi istemiyoruz... fotolarla devam et video anla??lm?yor.. yani senin anlayaca??n ?ekilde abducum..

No video !

Photos tutorial good tutorial :)

hadi Allaha emanetsin iyi çal??malar yap?yon müslüman olsayd?n iyi sevaba geçmi?tin ?imdiye ama hay?rl?s? art?k ne diyelim

Isabelle07/22/2008

Olá Fábio, meu inglês não é dos bons, e estou com dificuldade no passo 7.
Poderia explicar no português ?
Muuito Obrigada, e realmente muito bom seus tutoriais !
Grande Abraço.

abduzeedo07/22/2008

@Isabelle - agrupa o layer do logo que 'e branco e troca o blend mode do grupo para Color Dodge, renomeia esse grupo para over. Depois agrupa o layer com o gradient overlay com o outro grupo "over". Esse grupo vai ser o logo.

A ideia 'e um layer com o texto em blur com gradient e em cima de layer um grupo como text branco e o grupo com color dodge.

Espero ter ajudado.

Just to explain a bit, in order to make the glowing effect you will need a layer with the text with blur and gradient overlay on it. Then a group with the same text but in white. Then use Color Dodge for the group where this white text is...

Thanks a lot for the comments.

MixOughT07/24/2008

i cant understand the last step

wyldfyer07/29/2008

i was wondering if you could provide with the font for abduzeedo....

monet08/08/2008

hey you made an awesome tutorial but my result dosn't compare 2 your result. I don't knwo why?!

7aji8808/17/2008

thanks for sharing this useful tip :)

Hiperkarma08/21/2008

Well, always tried to do the same like you do but my result is always a piece of poo, I just don't know :(:(

Major08/22/2008

You are full creativity, keep it up.
Your works are very detailed and professional

Mark09/11/2008

Hi Fabio!

I tried here your steps and works well, but I'd like to make with that font. By chance could you tell me what kind of font you used?
Thanks a lot, and congratulations for your knowledge about photoshop...
Mark

sandi09/14/2008

COOL n Elegant + Funky. Like me.. hehehe

Anonymouse09/14/2008

what's the font being used?

camila09/15/2008

ola fábio! o meu está saindo como o do caiocardoso, msm colocando a layer style no Background!

nnen09/22/2008

can you tell us the font u;ve used? ;p pls

Talisrander09/27/2008

Cara, parabéns pelo seu trabalho, é incrívelmente incrível... ^^
To fazendo um outro blog e vou usar suas dicas para fazer meu template, sou iniciante no photoshop mais com suas dicas, acho que farei tudo certo...

É o brasileiro mostrando que também tem capacidade...

pau pau10/06/2008

hy
tryed this over and over again and still don't get the same effect. read the comments and still no help. mine is not as colorfull as yours, an white is predominant. i'm runing out of ideas

nunoismaz8310/07/2008

dear please i need this font or i need name this font
thanks please tell me thanks

TfcIan10/11/2008

I get nowhere near the same effect, post below sounds like the same to me...

freshmn_adjus-tee10/18/2008

ey man...
sorry 2 say, but how come my results aren't the same as yours, i think i followed d steps, but its like more of a white and just a tiny bit of d colour, sorry 2 ask im only new usin photoshop ( like 3 days ) but pls sum1 help... can i send u the file and plz help us out

Anonymous10/20/2008

This tutorial isn't explained very well at all, hence all the different outcomes people are having. I suggest the creator cleans up on their explanation skills and tries again!

twoshoes10/27/2008

"This tutorial isn't explained very well at all, hence all the different outcomes people are having. I suggest the creator cleans up on their explanation skills and tries again!"

How about you try again and next time try not to be such a jerk!!

Do you pay these people to create these tutorials?

Didn't think so!

So you need to just STFU!

Do I need to explain to you what that means? Dumb Ass!

jedimy10/28/2008

"How about you try again and next time try not to be such a jerk!!
Do you pay these people to create these tutorials?
Didn't think so!
So you need to just STFU!
Do I need to explain to you what that means? Dumb Ass!"

No need to get insulting. Abduzeedo puts out amazing tutorials, but I kinda have to agree with "Anonymous" even though he/she could've said it in a nicer way and shouldn't get personal.
I would love to see somekind of a 'fix' to this otherwise great tutorial, because it's not working for some people (including me; I even copied the layer styles from the sample.psd).
It just would be nice if Abduzeedo could test it out.

abduzeedo10/28/2008

I will prepare a video tutorial showing how to do that, I think that will be easier to follow.

Thanks guys ;)

Legend-uk11/11/2008

Did any one manage to get the technique correct..? if so please could you let the rest of us know how & also could some1 post a link to the psd file to this tutorial.. thnx in advance... p.s. great tutorial by the way

microcreature11/11/2008

Man nice one altough the tutorial is a bit short and a bit unclear about something but i tried alot of things copied layer effects etc to my own stuff bla bla (wich doesnt turned out nice) but i just give the gradient layer opacity of my own from you in ur tut 60% to 100% to reduce the white a lil bit wich looks nice i have it all fixed now but with a few other settings :)

for the rest keep going i love this site :)

Pablo11/14/2008

I give up!
This tutorial doens't work.

Anonymous11/23/2008

Do these methods work on photoshop8 ?

Filmon11/26/2008

Nice tutorial, had to tweak my version a bit
but it came out nice.

Thanks for making these tutorials and sharing them with us.

marsbars12/01/2008

reading through the comments trying to find out what font was used but not there. the question has been asked over 4 times but no answer. again could you please let me know what font was used for this tutorial...

marsbars12/01/2008

i commented before not sure why it didnt come up. anyways going through the post looking for the font but not specified, over 4 people have asked so please could you let me know what font you used for the main text.

guitarsami12/05/2008

PLZ!!!!!!!!! WHAT'S FONT????!!!!!! WHAT FONT DO YOU USED???? `_´

Yopladas12/12/2008

im not sure if its correct, but i think it's
http://www.greyscale.net/basic/
a german font that looks similar
i used it with good results

Elensar12/23/2008

No it's not the right font :s i'm searching it too

Yopladas12/23/2008

Heh that's not it.
I'm not sure if I'm supposed to say what font, as I think Fabio dosent want people just copying him and wants people to think for themselves.

But a hint, its like $50 and you can find at at t26 fonts
and another hint, what do you call the little rocks people put in their driveway instead of concrete?

Lol sorry fabio

Elensar12/23/2008

If he uses a free font, what's the problem we use it too? And i'm persuaded it's the right font i found, if you don't think so, your problem ;)

guitarsami01/01/2009

ey KIWI, i have the answer.

1 hint: www.t26.com
2 hint: Gravel

You say the font is GRAVEL, but NO, you want persuade us. Gravel font is very very similar, but letters "Z" and "U" are a little different.

I WANT KNOW WAHTS FONT!!!!!!! IT'S GRAVEL?????

phoenix2301/05/2009

this is gonna help me out alot!! thanks :D

berky9301/09/2009

wow great tutorial! thanks for this, it looks awesome. I just used it to add some great looking text to a space-themed birthday card, it fades in and out with the nebulae and looks fantastic.

Dawoodbotai01/12/2009

Thnx man ,, this is really amazing ..

JJ_2501/16/2009

thanks man is great i like it very much

colaja01/25/2009

nice and easy! thanks

imKIWIyournot01/28/2009

Hmm this is my outcome... I didnt tweak anything.. Used my own font.. yep :}
Eh.. only changed the background. but didnt change anything from tutorial

http://i217.photobucket.com/albums/cc301/kopllk/WallPapers/imKIWIyournot...

or..

[IMG]http://i217.photobucket.com/albums/cc301/kopllk/WallPapers/imKIWIyournotwallpaperstyles.jpg[/IMG]

alexosh123401/29/2009

Awesome tutorial!! Some "trouble" but I got it!

The graphic looks like it, but with some tweeks and add ons. I am an amateur! ahaha

Link: http://alexosh1234.deviantart.com/art/My-quot-LOGO-quot-111154402

Comment on it if you like it/ suggestions!!

Thanks!!

guitarsami01/31/2009

:'( nooo, the font isn't important now . . . It's other :'( !!

So . . . Whats the new font of the abduzeedo logo? XD

Anonymous02/14/2009

I certainly didn't get the same result and I'm certainly not new to photoshop. I must say it was a little confusing at times trying to understand which layer you were talking about.

DHarma02/25/2009

SO SIMPLE thanks!

dogBat03/19/2009

Awesome tutorial... I'm lovin this site :D

Anonymous04/09/2009

thanks for this, i've been trying to figure out the best way to do this for a while

Anonymous04/30/2009

same here.. didnt get the same look it turns white.. even after trying what u have recommended

HuSKuMs_NuT05/05/2009

hey for all of you looking for the font, i don't believe you will find it. He made that if im not mistaken with the rectangle tool and he rounded the corners...don't ask me how i just know i saw a tutorial on it somewhere about 4 months ago.

Also i was wondering if you could point me in the direction of any eally cool broken fonts that look like "Birth of a Hero"...I really like that font but i want it a lil' different

cicicocuk05/20/2009

Great tutorial, I liked a lot it's simplicity.

Ayetler

Oyunlar
- Oyun oynarken zevk alaca??n?z Türkiye'nin en h?zl? bedava flash oyun sitesi.
Radyo
- Radyo dinle, Radyo, Radyolar, Müzik dinle, Canli radyo dinleme portali.
Tv Channels
- Bedava Tv izleme sitesi Worldchannels.net
Güvenlik sistemleri
- ArslanGuvenlik Kamera ,Alarm,CCTV,Guvenlik Sistemleri
Knight Online
- Knight Online Pvp Server
Evden Eve Nakliyat
- Evden eve nakliyatta tek adres.
Acil Evden Eve Nakliyat
- Acil Evden Eve Nakliyat En H?zl? Nakliyat







Balazs05/20/2009

Super Coool!!!

.LuiGi05/28/2009

Hi nice tutorial.. can you tell me the font who you used? tnx.. if you can write the site where i can get it.. Tnx ! :)

Eder Lima05/30/2009

Técnica sensacional!

Realmente fica excelente com fontes 'lite', muito bom mesmo!!!

Com fontes mais densas tb fica bom, porém o charme é o lite.

Valeu a dica!

Qayz Ramora06/01/2009

How to mke a rendered clouds in it??

Lenkrad06/03/2009

I GOT THE FONT! Its actually a font which is a bit modified.
The font is called "Querround"
It is for free. Just type abduzeedo and transform the font a bit to get the same, like Fabio did!

abd3d06/03/2009

what's the font being used?

quiZz_06/22/2009

I don't get it...everything i do it's still doesn't look like in the image...please can you look over my psd ?
Regards

http://rapidshare.com/files/247340660/quizz2.psd.html

the_marsupial06/23/2009

@quiZz_ : just opened your file...swap the order of your groups (ex. move Group 1 above Group 2), set your background color to a really dark grey vs. black (#000000) and you're good.

Ejaz Ahmad06/27/2009

Thanks ... very nice tutorial

font you can get from here

font which is using name is Violette01 and you can get from dafont dot com

haha07/05/2009

Alright i found what went wrong.
For those that could not get it right is because
On step 2

the font we see was in white color but it should be in black
because the background was in a dark gray so if you have your font in black you can still see it

so try again and this time make your font black and you can get the result.

DjVago Design07/30/2009

i cant do it try, try ,try but i can get the shining neon text effect...... Somebody help me

Zander08/25/2009

Ok, i have been trying and trying but i can't get it. Here's my PSD, anyone wanna tell me whats wrong?

http://rapidshare.com/files/271359198/neon.psd.html

djvic08/29/2009

i dont get Step 7 how do i group the single layer

abney31709/08/2009

I like doing this type of stuff... pretty cool effect and it's quick
------------
-abney317
-My GFX Site: http://infinitystyle.com

maRCus09/09/2009

Fantastic!! love you! Love it!! XD

sir_tisma09/30/2009

hello, this is my first tutorial i'd tried!
nice and simple tutorial, keep up the good work!
here is my result with a little bit of imagination:
http://www.flickr.com/photos/41217476@N02/3968281837/

Andrew K.11/12/2009

Very nice tutorial!

I used it to enhance my facebook image!

http://www.facebook.com/photo.php?pid=132887

And it worked like a charm on Phtoshop CS4 Extended...

Thanks again! :-]

OyunCambazi11/12/2009

I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.

peynir
- peynir yap?m? ve hakk?nda di?er her?ey.
kulevinç Kulevinç hakk?nda arad???n?z her?ey.

Jordan11/18/2009

Guys, calm down.

This is the font: http://www.ascenderfonts.com/font/vagebond-c-light-roman.aspx It's Vagebond C Light Roman.

Or at least I think.

Anyway the best free alternative is Violette01 http://www.dafont.com/font.php?file=violette01&page=1&nb_ppp_old=10&text...

caro12/09/2009

thanks!!

NMIS12/19/2009

This is awesome! Thank you for sharing.
I had trouble with it at first, but I finally got it!

Thanks once again!

ooikiki12/29/2009

Cool one!
but i think this effect only works on slim text but not fat one... :)

Anonymous01/07/2010

Good tutorial thanks, but what is really annoying is that you don't state what layer you are currently applying the effects to, so a quick tutorial ends up being hours due to us having to re-read and guess what layer you are referring to as you jump back and forth.

This is a very common problem with a majority of tutorials.

To help, I would suggest you name each layer straight away and then refer to that layer by name everytime. Never use 'top layer' or 'this layer' or as you wrote 'now group this single layer' ?? what is a single layer when they are both single layers.

Anyway, hope this helps.

Thanks

A

buzbomb302/01/2010

I have followed your tutorial and the end result is great. However, how can I put the image / text on a transparent background?

When removing the dark background and saving, the image looses the effect. Any help is much appreciated.

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?