Smoke Type in Photoshop in 10 StepsListThumbs

Smoke Type in Photoshop in 10 Steps

October 27, 2008

Last week I decided to upgrade to the new Adobe CS4 apps, as usual I did my backups and of course I forgot very important things, such as my Photoshop Brushes and Patterns. I hate when that happens, but it does happen all the time. So I had to look for my brushes and I found some really cool new ones and decided to play a bit with them and with the new Adobe Photoshop CS4.

In this tutorial I will show you how to create a smoke typography effect playing with some brushes and adjustment layers. It's a very easy tutorial and you will be able to do the whole process in 5-10 minutes.

Step 1

Open Photoshop and create a new document, I used 1920x1200 pixels. Then apply a gradient, you could fill it with a gradient or apply a Layer Style. I used the layer style, Gradient Overlay. Use Radial for the Style and #07090a - #202b35 for the colors.

Step 2

Add some text in white then go to Filter>Blur>Motion Blur. Use 90º for the Angle, and 40 pixels for the Distance.

Step 3

Now go to Filter>Distort>Wave. use 3 for the Number of Generators, 10 and 346 for the Wavelength, and 5 and 35 for the Amplitude.

Smoke Typography

Step 4

Go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius. Then group the layer and rename the folder's Blend Mode to Color Dodge. You will get a nice light effect.

Step 5

Create a new layer on top of the others and go to Filter>Render>Clouds, make sure you had black and white for the background and foreground colors, then change the Blend Mode to Color Dodge and go to Layer>Layer Mask>Reveal All. With a very soft brush, 0% hardness and black color, hide some areas of the clouds layer. Use the image below for reference.

Step 6

Create a new Folder on the Layers' Palette. Change the folder's Blend Mode to Color Dodge and add a new layer in it. Then use the Smoke Brushes from Qbrushes . Select white for the color and paint over some letters. If you think the brush is not very bright, just click twice.

Step 7

Paint a few more smokes like the image below.

Step 8

Create a new layer beneath the other layers but in front of the Background layer. Fill this layer with black and go to Filter>Texture>Texturizer. Use 100% for the Scaling and 4 for the Relief. For the Texture use Canvas and Light use Top. That will add a nice texture to the image but you will need to change the opacity to 10%.

Step 9

This is a nice new feature in the new Photoshop CS4, actually there's nothing new just the Adjustments palette, but it's very useful because you can edit all the image adjustments like Levels, Hue & Saturation, Curves in that palette. However it just adds a Adjustment Layer, that could be done in the previous versions too.

Anyway, on top of the other layers just add the Invert adjustment. You can go to Layer>New Adjustment Layer>Invert. It will be the same. You will get a very nice effect, like burning paper.

Conclusion

One of the best things in Photoshop is the Brushes Engine and all the things we can create with brushes. With so many excellent sites with Brushes like Brusheezy, Tutorial9, QBrushes, DeviantArt, and PSDTUTS we can find practically all sorts of effects and elements ready to be used in our designs. That means we can focus on ideas rather than figure out ways to recreate things. Also we have 2 very different effects with just one adjustment layer, the Invert. Once again, it's all about playing. I hope you enjoyed this quick tutorial, and let me know if you have any questions.


Click here for full preview of the Dark version and here for the Light version

Download the Photoshop File

Click here to download the Photoshop File used in this tutorial.

About the author

User picture

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!

82 Comments

starlight8610/27/2008

nice..!

kelvin Li10/27/2008

This is great=)

- Kelvin Li

Simon10/27/2008

Dude, you are a rock star! Thanks a lot for the tutorial. I upgraded a few days ago and I am hungry to see what this new baby can do ;)

Mazuri21010/27/2008

Great Tutorial!

leocda10/27/2008

Since the subject is "smoke text", I would like to give a contribution:
http://picturetopeople.blogspot.com/2008/09/smoke-text-rendering.html

---------------------------------------------
http://picturetopeople.blogspot.com
Get Inside Computer Graphics

abduzeedo10/27/2008

@leocda Nice effect man, I think that can be done in photoshop using the liquify filter with a very small brush. How did you do it?

Thanks for the comments ;)

leocda10/27/2008

I'm sure almost every effect can be done using brushes and other mouse tools. We can "draw" everything, despite sometimes it can be hard or boring. We can even draw the typographical entities by hand if we want, can't we? :)

With liquify only the result should be poorer, I guess. Maybe with liquify and working on transparencies in some strategical parts you can get something similar. A kind of conditional "twirl" would help to construct the smoke subtle curves too.

I have made mine with a procedural math model. As a "user" I have just chosen the font.

When I have time, I will improve some of my libraries to be able to make a more "dissipating" smoke with that "escape columns" smoke sometimes have.

Thanks for sharing opinions about getting virtual smoke.

---------------------------------------------
http://picturetopeople.blogspot.com
Get Inside Computer Graphics

Chris10/27/2008

Hey,
This is pretty cool, I made a similiar type of piece with type and smoke a couple weeks ago:
http://www.flickr.com/photos/estheticcore/2932813983/

Can I write a tut for it and send it to your site? I remember you saying that you can now? Readers tut? Do we get paid? lol

aikonss10/27/2008

Hi i download PSD I open the file in Photoshop and does not work? what I do ??? :(:(:(:(

annie10/27/2008

ey, do you know where can i find more tutorials about CS4? not just PS, but AI or someone else. are you going to update some others by here??

HarmonicDesign10/27/2008

Nice work Fabio

Sparcy10/28/2008

nice tut!

this is what i did with it

http://img100.imageshack.us/my.php?image=sparcysmokeyo4.jpg

let me know what you think

Juan10/28/2008

great Tutorial as always, I check your page daily. Your work is awesome, keep it up.

Greetings from Panamá.

Johnson Koh10/29/2008

Simple and nice!
Very easy to follow. Thanks ;)

Cris10/29/2008

nice

Anonymous10/30/2008

i'm having difficult with step 4,I changed the 10 pixels for the Radius in step 4, but how do I change the colour to the blue effect in 4

Daniel10/30/2008

Thanks man. This one...I liiiike!

LP11/02/2008

muy bueno!!!

avatar11/02/2008

Heaps of fun! Thanks mate.

Ninja Pipes11/05/2008

Great tutorial, here are the results I came up with http://truefreestyle.deviantart.com/art/UnderStand-102624011

kenzo---11/06/2008

what font did you use?:D
very nice work by the way:D

Anonymous11/06/2008

I like!!! ALOT!!!

although i don't quite understand the step four, putting both the layers in a folder and color dodging it isn't giving me the desired effect. maybe i'm going about it wrong?

nice tuts, your work is amazing!

poGDI11/07/2008

Great help! Thanks!

mishimasan11/10/2008

Thanks a lot for this tutorial m8, very nice :)

--
www.easidesigns.co.uk - ignite your brand.

Heal the world, empower people to be all they can be and spread joy and happiness throughout.

Anonymous11/13/2008

Muy Bueno !! Veri Good !!!

Mitico11/14/2008

Hola, Gracias por ese muy buen Post. Está sencillo de seguir pero con un efecto sorprendente.

Saludos

Thanks !!

Pink11/14/2008

That is so cool. Before the fire comes the smoke.

kidlizard11/17/2008

Thanks for this was good, heres my results:

http://www.flickr.com/photos/29936163@N02/3038599642/

PS Rookie11/19/2008

Thanks so much for this tut :)
It was exactly what I needed & easy to follow when i payed attn lol

Tom Lewis11/21/2008

Wow thanks so much for this, my wepage is called mediasmoke.com, so as you can see works perfectly as a title!

Ausom.

damian11/22/2008

I'm using CS2. the problem I get confronted with right away is that when I get to the point of wanting to do Distort>wave, the wave selection isnt' available. It's grey. So what to do? I'd appreciate an answer from anyone on this. I don't understand why the choices aren't available.

damianmann@gmail.com

boter11/24/2008

i don't understand step 4 can anyone explain fore me

thank you very mutch

fab12/01/2008

nice effect!! thanks mate !

http://www.yaweb.fr

nain12/04/2008

well the step 4 is-
after u have grouped the layers and renamed it.... change the blend mode to color dodge....now u get the nice light effect !!!

KittenChop12/11/2008

Please, can you explain Step 4? Please!!

Caleb12/15/2008

Step 4 isnt working for me

Then group the layer and rename the folder's Blend Mode to Color Dodge. You will get a nice light effect.
How many layers are we supposed to have for the text layer or which layers are being grouped??

could someone tell me / send me screen shot

Cabe_is_here@hotmail.com

all other tutorials no worries at all and thanks abduzeedo :P you rock

mONet12/16/2008

great tutorial ;) go on like this

adc9012/23/2008

I just put the text one text layer in a new layer group and set the blending mode to color dodge and it worked. I'm curious as to why it doesn't work when you set the blending mode on the text to color dodge, why must you put it in a layer group?

diaz922001/09/2009

Hey i wanted to know, which brush did you use from the fallen smoke brushes? there are alot and seem quite hard to achieve the smoke lines you did. Can you specify or give some tips please. Thanks!

Mammoth01/12/2009

Show de bola Fabio tomei a libertado de publicar no meu blog com os devidos creditos parabens pelo seu trabalho.

Abs

Melody01/16/2009

Right. So you don't really teach how to create a smoke affect. Just how to use same tired clouds with some downloaded brushes.

Bummer.

Geddesign01/19/2009

Awesome tutorial. I love photoshop's brushes capability. I wish they would add that to Fireworks! Thanks.

Timothy01/21/2009

Wow. That's pretty impressive. Nice work!

Todd01/22/2009

Just a note for step four. I had the same trouble as some others here in getting the blue color to show through until I did this, on your text layer, right click, choose blending options and uncheck "transparency shapes layer" in the advanced blending section in the middle of the box.

cloneroner10/16/2009

thanx man!

emrah01/25/2009

thanks for the tutorial... :)

shedders01/29/2009

great stuff, many thanks :)

Seth02/11/2009

It is indeed a great tutorial - there are a few excellent ones on this site, but for the effect you achieve, and the simplicity with which you talk us through the process then this one takes the biscuit!

I've added it to my Top 10 Photoshop Tutorials of 2008 list here: http://www.kinocreative.co.uk/blog/?p=5

@Todd02/15/2009

Tanks for the comment. I get it now.

sivas02/20/2009

very good. thanks

Tom Lewis02/23/2009

Ausom, amazing, i have used this for a splash screen for my homepage.
http://www.mediasmoke.com

Amory02/28/2009

Yes! I figured out the step 4 issue!

I was having the problem where after i put the wavy text layer into a group, and then set the group's blend mode to dodge, the wavy text turned a bright blue, not smoky looking at all.

Here is what I did.

As said, put the wavy blurry text into a group/folder in the bottom right layers box. the text should be above the backround black blue radial gradient. Now, the secret bit. Go into blend options, gradient overlay, and switch the center color (blue in this tutorial) to something grayer, ie move your color selection to the left.
You will notice the blurry text look more and more like the turorial here as you make the blue grayer.

Luftherz03/12/2009

I followed Todd's advice about unchecking the "transparency shapes layer" and it worked perfectly!

Next time maybe mention this as some people (like me) are still learning Photoshop! But otherwise great tutorial! :D

warrengrafx03/17/2009

Please teach me

Sam8503/31/2009

Exelente tutorial, gracias fabio.

Business Card Printing04/07/2009

Excellent tutorial! Amazing effect, and in such quick and simple steps. That's really impressive, thanks for sharing this!

Hennessy04/08/2009

Nice tutorial, but i can't get step 4 done, can you explain the grouping thing a little more clearly?

Anonymous04/10/2009

yes i also do not get the grouping part in part 4..

Wokao04/20/2009

If someone steps in the fourth encounter difficulties please contact my mail?113982892@qq.com
Because I come from China. English is not very good. So I can only use images for you to explain

Lateralus13804/23/2009

Awesome, good tut to add to my collection. I was looking for just smoke brushes whe I came across this page.

photo retouching05/10/2009

really great tips in this tut. Please keep posting this quality stuff!

christopher05/20/2009

this was the best tutorial i've done.... i think mine came out even beter because i put in a few of my own changes

sandeep kothiyal05/28/2009

i am coollllllllllllllllllllllllllllllllllllllllllllll.

you can see :http://www.flickr.com/photos/28900704@N06/3572836896/

Dario Gutierrez06/03/2009

Awesome and real effect.

Matty06/04/2009

the font he uses i think its...
'Alte Haas Grotesk'

great tut btw

Anonymous06/05/2009

This is a nice tutorial.. i'm slightly bummed that a major part of this effect was created using a brush.

It just makes it more difficult to create a unique effect every time you do this.

Essam06/07/2009

Really really awesome man, thanks a lot.

I Love My Work06/09/2009

wow, amazing effect

thanks for the tut

Anonymous06/12/2009

I dont get part 4

akkis06/20/2009

Much real smoke effect tut :) Thank you!

tfw06/28/2009

its awesome, thank you!
used it here: http://tfw92.deviantart.com/art/Colored-Smoke-127531573

Al3x07/04/2009

Awesome, but what is the font please ?

LuisWatson07/12/2009

Can't really work it up on the step number 4 , I did what Todd said but that light that comes out of the letters just won't go when I do what Todd says

n0thing07/26/2009

epic !!
looking forward to read ur other tuts as well

Sunil Jain08/13/2009

Thank you very much for the tutorial :)
Cheers :)

KillaOfDawn08/25/2009

Thanks for the tutorial but im stuck when u group the layers and do the color dodge my text just dissapears...

Anonymous09/02/2009

I had trouble for step 4 too....but i figured it out, you ONLY put the TEXT layer in the group, no other layers. Change the groups blending mode to color dodge and it should work...but for me it still didn't come out as bright as it did here..

lujova09/08/2009

I CAN'T GET TO THE STEP 3 I CANT GET DISTORT ON IN THE FILTER MENU PLS HELP

abney31709/08/2009

cool effect :) nice tutorial
------
-abney317
-My GFX Site: http://InfinityStyle.com

Stefano09/20/2009

I believe that each of your individual tutorials is exceptional and very stimulating to my creativity ..
I think that I would love to become your pupil
Stefano

jonathan10/31/2009

Awesome technique. There is no way I could ever even replicate this. Is there any chance you could create a light version of the technique that spells out:-

Food Smoking Questions

That would be awesome and I would send you a 100,000 karma points.

It would mean so much

Thanks

jonathan.lyon@gmail.com

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?