Shining Neon Text Effect in Photoshop
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.
Step 2
Now place your logo in the document. Duplicate the layer and hide it, we will need it later on.
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.
Step 4
Now let's add some blur, go to Filter>Blur>Gaussiam Blur. Use 4.0 pixels for the Radius.
Step 5
Make the duplicated layer visible and go to Filter>Blur>Gaussian Blur. Use this time 1 pixel for the Radius.
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.
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".
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.
Download the Photoshop File
Click here to download the PSD file used on this tutorial
About 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.
You are full creativity, keep it up.
Your works are very detailed and professional
Well, always tried to do the same like you do but my result is always a piece of poo, I just don't know :(:(
thanks for sharing this useful tip :)
hey you made an awesome tutorial but my result dosn't compare 2 your result. I don't knwo why?!
i was wondering if you could provide with the font for abduzeedo....
i cant understand the last step
@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.
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.
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
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.
What font you are used in this tutorial?:)
Look at my work!!
http://www.mediafire.com/?mmx0ycf0ywx
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
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.
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
Great tutorial, thanks for the info.
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
Never know it can be this simple :)
Thanks for the tutorial! Enjoyed it so much.
Nice effect and simple method
THANKS4U
Nice effect and easy method
THANKS4U
yea I keep getting a different outcome, mind checking my psd and telling me what I did wrong Fabio?
http://www.mediafire.com/?iajs8bvxx3d
Damn it, sorry for the typo... :)
Thanks a lot for the comments.
Was the final step to add the typo to "Abduccted"?
:)
Nice effect.
Thanks for sharing these techniques Fabio! Pretty surprising to see how easy this actually is! :)
I'm a fan of your work!!... is amazing!
Thanks for sharing !!!!
greetings from Colombia
I will definitely be using this technique sooner or later. Thanks!
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/
it doesn't work for me either:-s
Great tuts, as usual !
Btw, what's the name of that font ?
É do caralho seu blog! Acesso todos os dias!! PARABÉNS... o mais animal de tudo isso é que é um brasileiro!
Abraços!
@bob could you send me your psd file? I will take a look to see what's going on.
Thanks ;)
Didn't work for me either...I end up with white as well. Are some steps missing?
@bekkz try to change the opacity of the group with color dodge, that will reduce the white ;)
Thank you all for the comments.
really nice effect. unfortunately it doesn't work with the logo i used. the white dominates and the colors disappear.
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/
I kinda wondered how you did that effect. Who knew it was so simple.
very nice tut! love the the one with rendered clouds in it..!
Thats awesome.
Post new comment