A Slick Supernatural Text Effect
Nov 23rd in Text Effects by CollisStep 1
The first thing we need for our image is a background. We're going to use a quick star-sky background. There are lots of tutorials around for this effect, and it's actually a simple two-step process: clouds + noise.
So on a new blank canvas, start by choosing a dark blue color - #18323a - and black and then go to Filter > Render > Clouds.

Step 2
Now create a new layer, fill it with black, and go to Filter > Noise > Add Noise and use values roughly as shown below.

Step 3
Now that is way too much noise, so go to Image > Adjustment > Levels (or Ctrl+L) and bring those sliders together until you see most of the 'stars' vanish as shown.

Step 4
Now set the stars layer's blending mode to Screen so that the black vanishes and just the stars remain. It's still a bit too even though, so add a Layer Mask to the layer, and with a large fat brush just mask out blobs so that it seems a little less even. See the screenshot below to see the layer mask I added...

Step 5
In this step, I added a radial gradient layer going from the white in the center to black at the edges and set the layer to Overlay and 45% Opacity. The effect is just to darken the edges and it's not an essential step. In any case you should have something like this image shown below.

Step 6
Now we add our text. I've used a font called Cuez_Ver6 which looks suitably strange. If you go to a free font site and look under sci-fi or the like, you'll doubtless find something similar. Actually it's quite unreadable really (especially the r), but who cares, it looks cool!

Step 7
Next we're going to add some layer styles. You can get a sample PSD file at the end of this tutorial, but because we're switching to a pay system for the samples, I'll go through the settings in case you don't want to buy the file.
First I've given the text a Color Overlay of straight black (#000000). Then because the basis of this text effect is a creepy light, I added inner glows. First an Inner Glow as shown below, and then an Inner Shadow with color #54a4ff, blend mode Screen, distance 1, size 2, angle -90', and everything else default.

Step 8
Next we use a textured Bevel and Emboss to give the style some unevenness. You can see the Bevel settings below. The Texture I added is just one of the standard ones that comes with Photoshop that looks like bubbles. And I set the Depth to -79.
As you can see below, this makes the inner glow look a lot more uneven.

Step 9
Finally I added a Drop Shadow and Outer Glow, both set using Screen and the color #008ac5. I used both so that I could make one of them a small glow and one a really spread out glow, so the distances were 10px and 100px.

Step 10
Ok, so here's our text with the Layer Style applied. It's off to a good start, but you can only do so much with Layer Styles, so now we do some good ol' manual effects.

Step 11
First of all, duplicate the text, right-click the layer, and remove the layer styles. Then change the color of the text to a fluorescent blue (#5cdbff). Then press the up arrow once to move it one pixel up. This will give a sort of glow effect as shown below.

Step 12
Ok, this next step is the key step in this tutorial.
Duplicate the text layer with the fluoro blue color. Then go to Filter > Distort > Wave. You can use mostly the default settings, except where it has Scale. I've set this to just 10% and 10%. This will distort the text, but only a little bit. If you leave it at 100% the effect is pretty full-on!
(Note: In the image below, I moved the text down so that it would be clear that I was applying the wave filter to it.)

Step 13
After you have distorted text, go to Filter > Blur > Gaussian Blur and use a value of 4px. Then set the Opacity to 20%.
In the screenshot below, I've switched off the main text so that you can see the distorted text.

Step 14
Now hold down Ctrl and click on that text layer to select it's pixels and then go to Select > Modify > Contract and use a value of 5px. Then press Shift+Ctrl+I to invert the selection and hit Delete. This should leave a thin wispy looking remnant of your text.
Now switch on the main text layer, and it should look like a tiny bit of smoke coming off the letters.

Step 15
Now duplicate that layer and go to Filter > Distort > Wave and distort this copy even more.
Now repeat this step a couple of times and vary what you do with the wave. So you might want to press Randomize sometimes, or sometimes distort the copy a few times. Also I used a mix of blending modes on the different copies of the smoke. Two of them I had no blending mode set, two of them I used Overlay, and for another two I used Hard Light.
Also it's a good idea to mix up whether they are behind or in front of the text. Remember you want the effect to look like wisps of smoke coming off the letters.

Step 16
Now that we have our small smoke sorted out, it's time to add some bigger wisps.
So again duplicate the fluoro blue text layer.

Step 17
We now apply another Wave distortion, but this time where it has Scale, set the horizontal to 5% and the vertical to 100%. This will make the shapes become very elongated as shown. Once you've applied the wave, just repeatedly hit Ctrl+F to keep doing it over and over again until the text has been completely distorted into long wispy shapes.

Step 18
Once you have a good smoky-looking effect, set the layer blending mode to Hard Light and you should have something similar to the image shown below.

Step 19
Now duplicate that last layer and run a Gaussian Blur by going to Filter > Render > Gaussian Blur with a value of 4px. This will make our layer look a little softer.
After that, get a large soft eraser brush and just brush away some of the bits at the bottom and top so that it fades off as it approaches the edges.
You may also want to repeat these last couple of steps to add more wisps.

Step 20
Here I've removed the bottom of those wisps and added a few more subtle copies. Also I added some extra type above the main text just to make it look a bit cooler.

Step 21
Next I moved one or two of the wispy layers in front of the text so that it looks like the smoke is trailing over the letters. In particular look at the E in super to see what I mean.

Step 22
Finally, to give it a more eerie feel I added a layer above all the others and with a large brush painted some green on top, then set the layer blending mode to Color to make it so that the image is a blue-green coloring. And we're done! One slick, smoky effect!











User Comments
( ADD YOURS )Elliott Cost November 23rd
Interesting design. I’ll have to read this more in depth, when I have some free time.
Collis November 23rd
Hooray! First new tutorial since the redesign. And the first one with the new paid system, which I hope works well
Meanwhiles if anyone is a Digger, and enjoyed the tutorial, don’t forget to Digg it: http://digg.com/design/A_Slick_Supernatural_Text_Effect_in_Photoshop
Brian Purkiss November 23rd
That’s incredible!
totally awesome!
thanks!
Jeii November 23rd
wahooooooo…..
GREAT!
Jeffrey November 23rd
preetty cool man, i like the background. The type ewww
Zee November 23rd
That’s really cool….
salman November 23rd
i loved the way u made the sky….
should have used a better font…
Defectiv November 23rd
Another great tut. I’ve only recently discovered this site but what I’ve seen so far looks great!
Nice way to make stars, I can use that for sure
Umberto - Italy November 23rd
diggi’n it!!
Agree with the font choice. Could be better….
Loving the style of the following image: http://www.flickr.com/photos/kailoon/2052149762/in/pool-psdtuts/ any ideas for a TUT?
Ciao
Joefrey Mahusay November 23rd
I really love this designed…I’m gonna try this…
Joefrey:)
srinoo November 23rd
WOW what a great tut…..
Tom Sieron November 23rd
Lovely very nice. Keep ‘em coming!
Victor November 23rd
Hi! Really cool tut… This site really has the greatest tuts for PS around the web… and, Umberto… That image is really simple to make… just make a new layer, fill it with a 3-4 colour gradient and change it’s blending mode to soft light or color or whatever looks good… play around with the opacity too
…
Keep up the good work!
BogDinamita November 23rd
yeah I agree could’ve chosen a better font. other than that, the way you explain all ‘o them tuts is awesome. thanks for all!!
Thom November 23rd
I’m not at all keen on this tutorial, it just lacks the class and professional feel most other tutorials on this site seem to have.
I like the colours, but otherwise it’s a bit Trekky for me.
handx November 23rd
please make video tutorials..i’m willing to pay $8 per month.
Michael Castilla November 23rd
Pretty sweet tutorial! Has some interesting techniques
@Collis: Ever looked into that Digg Button plugin for WordPress?
Umberto - Italy November 23rd
I’ve been trying it but encountered the following problems:
1. if you work with a large image, the clouds are always too small making it unreal (maybe I’m missing something)
2. adding noise on a big image and then increasing contrast to get rid of some “stars” still leaves you with too many (size of the noise should vary)
again, maybe it’s my fault!
danielMitD November 23rd
I tried to make this tut and it worked very well.
nice work
b00m November 23rd
Nice, but bad font choice
xp1 November 23rd
Hi Coliss,
This is my first comment on your site and content. I would like to say how impressive the content and quality of the tutorials are (no wonder membership is growing fast). This tutorial covers a number of subjects if readers really look into it. The obvious extra being the starfield.
I have only given the tutorial the once over so far but I know I will learn something new. I just had to place a comment somewhere on your site as I think it has the potential to be head and shoulders ahead of the rest that are out there.
Good luck and thanks.
XP1
Jared November 24th
Cool text effect - I like the font, with the exception of the “r”.
Also, a suggestion - I’ve subscribed to the “User+ Community Feed links” via RSS, but I noticed this morning that the feeds don’t have the link in them. So, to get to a user-submitted link, I have to click on “original article” in my reader, come to PSDTuts, then click on the link that I want to see. Is it possible to make the text linked in the rss feed?
trendsettr November 24th
That’s an awesome effect. Thanks!
Zeb November 24th
I digg it ! never mind bad font, people chosen the font who love ! humpf
Dale November 24th
Hi guys great design but i have got stuck a stage 1 lol. I cannot get my clouds to look like the one here mine is very compact in CS3 any ideas guys please??
Lee November 24th
I’ll try and do this on a video tutorial over the weekend ( using iShowU on the Mac ) , but can’t promise anything. I’m nothing to do with PSDTuts except a user and a fan. Will try to give something back
Iñigo Beitia November 24th
Good tutorial!
But strangely looks like http://www.artofadambetts.com/weblog/?p=212 ….
um…
Kika November 24th
I love this tutorial. Could you please put a “print” botton so I can follow it off-line?
Thank you!
Pieter-Jan November 24th
OOh my god, a great tutorial again. You rock man!
JK November 24th
Hi, i have a problem, when i’m gonna aply the wave efect in the text, when i select filter, the distor option is lock, what i need to do.
Ollie November 24th
Using the “Add Noise” and then “Levels” does not reduce the noise to anything that looks like stars - in fact it seems to have very little effect even when on the exact same setings as those you are using. Likewise, the clouds are way too small, much smaller and more numerous than yours.
Chip November 24th
Indeed, great tutorial. Great looking space backdrop, also the font is weird, in a nice way. You’re already featured on my blog, http://blog.butterflymedia.ro/, keep up the greatest tutorials on the web.
I really like your Photoshop drawing and FX styles, like smoke, glows, light, gradients, and everything. No detail is left out.
Collis November 24th
Hey All! Thanks for all the comments…
@Kika: There is actually a “print this post” button at the bottom, it’s nestled in with the digg/delicious etc. But I’ll redesign this section soon to make it a bit clearer
@Umberto: If you are working large, try running the cloud filter once and then press CTRL-ALT-F which gives a slightly different version of the cloud effect and should work slightly better. Other than that, you might need to paint some of the cloud sections with a large, soft brush. With the stars, you should follow the same steps but get rid of more of the noise, then duplicate the layer and press the down arrow once so that the ’stars’ are a little bigger (i.e. 2px instead of 1px). You could try duplicating again and running a Gaussian Blur of 1px as well. Anyhow something along those lines will probably help.
@Ollie: I think the reason the noise isn’t changing is to do with the settings when you apply it. Actually I’m not sure, but I know the problem you’re talking about because it happened to me once too, it was like when I adjusted levels either everything disappeared or nothing disappeared. Hmm, i’ll have a think!
And for everyone who hates the font, you’re probably right, it is a bit of a weird font, my wife walked past when I was making the tutorial and said the same thing, but I still think its kinda cool
Michael November 24th
again.
you’ve done it yet again.
you’re ability to ‘create an environment where learning can occur’ gets better with every tut.
eL November 24th
I had the same problem as Umberto - Italy with a 1920×1200 background
Collis November 24th
Meanwhiles I’m glad the site is coming up again, for a while the digg load was unbearable. I guess I’m going to have upgrade the server … again
angry mango November 24th
$2.50 is too much in my opinion. Make it a buck, just like an iTunes song and I’d buy it in an instant.
kemic November 24th
you guys are missing the point about the font choice. who cares. its a tutorial. a very nice one at that. thanks!
PixlNinja November 24th
Nice one I really like that fog/smoke like effect in the text’s background.
Thanks psdTuts
Jason November 24th
I actually like the font. But I can’t seem to find it anywhere I go. I would like to use it on a project that I’m working on.
Any thoughts or suggestions?
Pristine November 24th
Collis, this is completely OT, but I’m wondering what plugin you use for internat site searching. Cheers!
Siddhartha November 24th
I simply love your site. Its absolutely amazing because u guys really maintain the level of all tutorials unlike most other tutorial websites. Great going !!!
Zach November 24th
Methinks readers do not car for your font. I guess that haven’t heard that we have the ability to change fonts with a few clicks of the button. Oh well. Another great tutorial.
Zach November 24th
Jason,
Try http://www.dafont.com They have a lot of really great fonts.
j-man November 24th
I gotta say I don’t care for the pay for source thing. I think there are probably other good ways you could offer up the content cheaply (bittorrent perhaps) at least at first until traffic begins to die down.
As for the tutorial itself, I found the star field part to be much more useful than the text itself.
Garrett Leyenaar November 24th
Another great tutorial…Dude, PSDTuts is the best I’ve ever seen around.
Jason November 24th
Thanks Zach. For some reason I forgot about dafont. I found a great alternative for my project.
Stefan Poulos November 24th
Nice tutorial. This was one of those happy mistakes where I was just turning layers/masking on and off. Instead of the flourescent blue text, I had white text with a gradient mask. Here’s what happened when I simply turned off the entire black text layer (with all the layer effects)….
http://poulosdesign.com/transit/supertheo.jpg
robert November 25th
Hey great tutorial, have to say I really liked the darker design, this one is cool but the other one was amazing
Adi November 25th
Hi,
Please looking on image in this tutorial:
http://www.computerarts.co.uk/tutorials/2d__and__photoshop/make_the_most_of_opentype
Please writing tutorial: 3d logo create only photoshop and this logo perspective.
D McMehan November 25th
I feel like an absolute idiot, but I can’t get the first step to work. The clouds come out whitish.
Help would be great.
-nOOb
D McMehan November 25th
Nevermind.
: D
sturdy November 25th
Fantastic effect! Very simple and beautiful! Congratz!
Dennis Plucinik November 25th
Collis you’re a genius.
bLuefRogX November 25th
If you’re looking for integrating a premium section, I could probably help you implement that. Just drop me an email sometime
Erin November 25th
I got all the way through, but couldn’t get my wave-distorted words to smokify properly. I guess practice will make perfect! I’ve been using photoshop for about 4 years by the way and never thought to do some of the things you’ve done in this tutorial with setting layers to ’screen’. Nice!
Thanks!
Nawabz November 25th
Hay are you guys kidding, the font falls in when you see the image as a whole. tried it. i liked it and the end result.
Gery November 25th
Very very great tutorial!
cool
lg>Gery
Tama November 26th
Awesome tut, thank you! might be helpful!
mohamed November 26th
Fantastic man
moosa November 26th
عمل ÙÙŠ غاية الروعة
mohamed November 26th
cooooooooooooool
Umberto - Italy November 26th
@Collis!
Thanks man!! I’ve been experimenting a bit and for far more realistic clouds I used some brushes insted of the cloud effect, then, for the stars usually I choose a round soft brush changing constantly size according to the pen pressure, then add a glow (usually light gray) and the stars ROCK! Also great to create SNOW!!! Try it!
Thanks again.
JK November 26th
Hi, i have a problem, when i’m gonna aply the wave efect in the text, when i select filter, the distor option is lock, what i need to do.
mr_semsim November 26th
Very cool effect
Sajay November 27th
Hi this one is really awesome and pretty easy too,, great work…
Holiday Rentals November 27th
Very nice effect, Can use this for sure. I have dugg it as cannot afford 2.50
Muphin Man November 28th
This is very hard to follow due to the fact that the pictures do not show all the Layer Styles that he applied to the text, but other than that I have to say it was a very good tutorial.
krazy3 November 28th
Awesome effect. As usual, mine don’t turn out as nice as yours, but it still looks good
There’s also a really good tutorial on starfields here: http://gallery.artofgregmartin.com/tuts_arts/making_a_star_field.html
–Not sure if I can post this, but feel free to edit if I can’t
Mark Abucayon November 28th
Wow two thumbs up for this tutorial- great work done.
Thanks for this.
JN November 28th
Great tutorial, thanks again!
Matthew November 29th
Brillian Tutorial! Thanks for all the work you put into this!
mauricio November 30th
Great tut !!! i did it yesterday and i really liked it, here is the link to mine, i didnt put the last text, and i used a different font.
http://img505.imageshack.us/img505/9406/texteffectgu4.jpg
Jenny November 30th
That is an awesome tutorial. When I get my new photoshop I’m gonna try it with a layout idea I have.
SirJuish November 30th
Excellent tutorial, but i’m not so sure of the font choice.
Thanks for the tut. it’s appreciated!
Nate Spees November 30th
great! loved it
Kevin H November 30th
I love this site, and I think the tutorials are top-knotch, but I have one suggestion.
Could you maybe include the pixel size of the document or at the least the point size on the type. The noise filter at 26% looks a bit different on a letter sized document at 300 ppi that it does at 72 dpi. An inner shadow with a distance of 1 pt. on 36 pt. type isn’t the same as it is on 150 pt. type, or 12 pt. type.
Gabriel December 1st
Hi Collis,
Thanks for this awesome tutorial.
I could make it better but I’m still 13 years old and a Newbie in PS.
When I increase my skill I will try it again.
Sheryl December 1st
Just like everyone else, I love this tutorial and the site in general! I couldn’t get the text to “smokify” either, at first. However, if I did Step 14, and then Steps 12 and 13, I was fine. I believe it went like this:
Duplicate the text layer with the fluoro blue colour.
Change the color back to white (I had created the blue color via the Color Overlay option, so I right clicked on this latest layer to bring up the context menu and then clicked on Clear Layer Style.)
Click on the shift key and with the magic wand tool select each letter (you’ll get marching ants around each one).
Go to Select > Modify > Contract and use a value of 5px. (I think it’s here that you’re told you have to rasterize. Do so - go to the main menu and click Layer>Rasterize. If you’re not told to do it right here, do it when the message box comes up.)
On the menu bar, click on Layer>Inverse to invert the selection, and hit DELETE.
Then change the color back to the neon blue. (Double click on the layer - being sure you’re not clicking on the name of the layer - to bring up the Layer Style dialog box, go to Color Overlay, and put the color in again.) Click Ok.
On the main menu bar, click on Filter > Distort > Wave. Set the scale settings to 10% and 10%, per the tutorial.
Go through Step 13.
Go on to Step 15 and continue on from there.
By the way, I’m working in Photoshop CS2.
Diego December 1st
Great Job!! In spanish and with other font: http://www.diegomattei.com.ar/2007/11/26/efecto-de-texto-supernatural/
Zach December 2nd
Sweet. I added some lens flares to make it look even better as per the artogregmartin tutorial. It looks really awesome:
supernatural
Matt Mills December 2nd
Works perfect, love it! followed it straight through in order, worked a charm, nice one, keep them coming.
Shystie December 3rd
Very nice tut, thanks. Any chance of posting a download link to the Cuez_Ver6 font, I can’t find it anywhere.
capsz December 3rd
Nice Tutorial!
I combined this tutorials with the one of the meteor.
This is what i came with.
http://img232.imageshack.us/img232/6244/meteorcopyih6.jpg
god056 December 4th
Looks like there’s another Greg fan in here
Actually, I stumbled on this site just yesterday and I’m loving every moment I’m in here. This tut gave me a fresh idea on making spiffy smokes in a jiffy
I’m loving each and every tuts here.
Only thing is, I’m only using PS7 :p So I do most of the ps’ing manually
Elo December 5th
I went to the dafont site can’t find the curez font, any ideas?
Mary Ann December 5th
I love your tutorials! But.. I agree that you should make them $1 instead of $2.50. I think more people would be interested that way.
Shana December 7th
Where can we get this font? It isn’t even showing up on Google or Yahoo searches.. and no .. it isn’t on dafont!
Someon December 8th
hi,
that is an amazing design, would you please give me a link for the font please.
Thank you
AJ December 8th
I just found out about this site, this tutorial and the one with the shield helped me a lot. I really would like to know how can I help support the site.
KEEP UP THE GOOD WORK!!!!!!
Therseus December 10th
Great tutorials… better then most tutorial sites i’ve seen so far.
Keep em coming!!!
Uremine December 11th
it’s very fantasy. I do not understand most of steps, but the image has been shown it all.
-PSBeginner-
Marc December 11th
Great Job! Your Tutorial Inspired Me To Do So Much!
za December 11th
That’s great….
i wanna try this tutorial
thx ^_^
Bobby Sal December 15th
These tutorials are so so so money. Thanks again for conveying the knowledge
naa December 17th
Hmm not all the style settings are shown. sad
Salech December 18th
Great tutorial!
I downloaded the tutorial as it was free and now i can’t find it any more - Damn!
Can you please explain Step 9 with more screenshots or more data.
Thanks
ReCoiL December 19th
Very nice!
Good instructions.
Risk December 21st
Everytime i even attempt to make the coulds, it will not go that colour, even though i enter that coulor before i do the clouds, and if i make the clouds (any crappy colour) the ’stars’ are always there, and theres too many of em.
Jon December 21st
good stuff
Bouwer December 22nd
Wow! Absolut awesome! Nice colors!
Agus Latu December 25th
Awesome trick, Well Done…….
Web 97 December 31st
Wow, that a cool effect.
Its the first time I’ve been to your site. It looks cool
Will be scouting around
Thx
Mendybing Art January 3rd
Hey interesting Turtorial it actually rocks! But i will say no one should stick with the exact rules of some ot the smoke effects. I found it easier to use the paint brush to make sploches than use the unpredictable wave tool…seems eaiser to control. Overall it was my first experience with a tutorial from this site and it taought me some very great info! you can view my take on this at myspace.com/mendybing as well as other pieces ive done. Thanks again These tutorials are taking me into the realm of realizm and away from the enclosed box of photoshop effects.
Fiona January 5th
Fantastic! I’ve just made this into a birthday ecard for a friend.
Your tutorials are a step above anything else out there.
telas January 5th
i liked the smoke effect alot, well done! ill give it a try when i have time
Jan Polzer January 6th
Incredible tutorial, thanks.
CreeWay January 7th
Great !
TheOther January 7th
I just have to say thank you for this wonderfull tutorial!!!
It was insane looking, and i combined it with a phoenix hair tut i found…
So my girlfriend now have phoenix hair, dreamy looking eyes with sparkles, a dreamy environment (supplied by you) and her name written with cool cloudy steamy gassy looking effect!!!
She went crazy!! and all thanks to you
*bows down*
Many thanks from TheOther and his girlfriend =)
oliver January 10th
i tried it effect is really great …..why don u give us some tuts on how to improve an architectural elevation done in max or maya
bunsann kim January 15th
Fantastic deign.
bunsann kim January 15th
It is hilarious. Thanks
smain January 16th
Astonishing… Thanks a lot…
Yamaniac January 18th
Thats the best effect and it was so easy to do…. You rock dude!! Lookin forward for more from you
Anthony January 20th
Every time I get to step 17 it keeps asking me to rasterize and then after I rasterize it tells me the area is empty, what am I doing wrong? =/
ame January 20th