Shining Neon Text Effect in PhotoshopListThumbs
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.
107 Comments
Thats awesome.
very nice tut! love the the one with rendered clouds in it..!
I kinda wondered how you did that effect. Who knew it was so simple.
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/
really nice effect. unfortunately it doesn't work with the logo i used. the white dominates and the colors disappear.
@bekkz try to change the opacity of the group with color dodge, that will reduce the white ;)
Thank you all for the comments.
Didn't work for me either...I end up with white as well. Are some steps missing?
@bob could you send me your psd file? I will take a look to see what's going on.
Thanks ;)
É do caralho seu blog! Acesso todos os dias!! PARABÉNS... o mais animal de tudo isso é que é um brasileiro!
Abraços!
Great tuts, as usual !
Btw, what's the name of that font ?
it doesn't work for me either:-s
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/
I will definitely be using this technique sooner or later. Thanks!
I'm a fan of your work!!... is amazing!
Thanks for sharing !!!!
greetings from Colombia
Thanks for sharing these techniques Fabio! Pretty surprising to see how easy this actually is! :)
Was the final step to add the typo to "Abduccted"?
:)
Nice effect.
Damn it, sorry for the typo... :)
Thanks a lot for the comments.
yea I keep getting a different outcome, mind checking my psd and telling me what I did wrong Fabio?
http://www.mediafire.com/?iajs8bvxx3d
Nice effect and easy method
THANKS4U
Nice effect and simple method
THANKS4U
Never know it can be this simple :)
Thanks for the tutorial! Enjoyed it so much.
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
Great tutorial, thanks for the info.
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
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.
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
Look at my work!!
http://www.mediafire.com/?mmx0ycf0ywx
What font you are used in this tutorial?:)
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.
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
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.
@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.
i cant understand the last step
i was wondering if you could provide with the font for abduzeedo....
hey you made an awesome tutorial but my result dosn't compare 2 your result. I don't knwo why?!
thanks for sharing this useful tip :)
Well, always tried to do the same like you do but my result is always a piece of poo, I just don't know :(:(
You are full creativity, keep it up.
Your works are very detailed and professional
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
COOL n Elegant + Funky. Like me.. hehehe
what's the font being used?
ola fábio! o meu está saindo como o do caiocardoso, msm colocando a layer style no Background!
can you tell us the font u;ve used? ;p pls
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...
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
dear please i need this font or i need name this font
thanks please tell me thanks
I get nowhere near the same effect, post below sounds like the same to me...
Thank You very nice topic
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
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!
"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!
"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.
I will prepare a video tutorial showing how to do that, I think that will be easier to follow.
Thanks guys ;)
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
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 :)
I give up!
This tutorial doens't work.
Do these methods work on photoshop8 ?
Nice tutorial, had to tweak my version a bit
but it came out nice.
Thanks for making these tutorials and sharing them with us.
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...
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.
PLZ!!!!!!!!! WHAT'S FONT????!!!!!! WHAT FONT DO YOU USED???? `_´
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
No it's not the right font :s i'm searching it too
found:
http://www.dafont.com/font.php?file=violette01&page=1&nb_ppp_old=10&text...
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
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 ;)
Nice work ,great collection. Thanks for the share.
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?????
this is gonna help me out alot!! thanks :D
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.
Thnx man ,, this is really amazing ..
thanks man is great i like it very much
nice and easy! thanks
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]
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!!
:'( nooo, the font isn't important now . . . It's other :'( !!
So . . . Whats the new font of the abduzeedo logo? XD
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.
SO SIMPLE thanks!
Awesome tutorial... I'm lovin this site :D
thanks for this, i've been trying to figure out the best way to do this for a while
same here.. didnt get the same look it turns white.. even after trying what u have recommended
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
Great tutorial, I liked a lot it's simplicity.
Super Coool!!!
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 ! :)
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!
How to mke a rendered clouds in it??
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!
what's the font being used?
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
@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.
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
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.
i cant do it try, try ,try but i can get the shining neon text effect...... Somebody help me
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
i dont get Step 7 how do i group the single layer
I like doing this type of stuff... pretty cool effect and it's quick
------------
-abney317
-My GFX Site: http://infinitystyle.com
Fantastic!! love you! Love it!! XD
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/
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! :-]
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
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...
thanks!!
This is awesome! Thank you for sharing.
I had trouble with it at first, but I finally got it!
Thanks once again!
Cool one!
but i think this effect only works on slim text but not fat one... :)
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
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