Home Tutorials Wallpapers Interviews News About Contact/Ads Join Login Twitter Store

Smoke Type in Photoshop in

10 Steps
by abduzeedo | Oct 27, 2008

www.atomiccupcake.com Feedback - Ads by Google

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.

Abduzeedo's Tags
more tags
inspiration daily inspiration tutorial wallpaper photography illustration photoshop
design graphic design web design video of the week sites of the week iphone wallpaper of the
week video best of the week interview giveaway fireworks Typography hdr posters quick tips funny poster motion
graphics T-shirt Design vector t-shirt logo photo manipulation 3d web 2.0 ads illustrator contest abdutees web blog inspirao

Icon Ads Wall

Do you want
Advertise
Advertise toAdvertise
Advertiseadvertise
Advertise here?
Advertise
Advertise Click
Advertise
Advertise Here
Advertise
Advertise
Advertis
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.
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.

Similar Articles:
Tratamentos de Fotos Bizarros no Photoshop

Texto de Carne no Photoshop

Meat Text Effect in Photoshop

Tutorial do Leitor: gua Dark no Photoshop by Julien Brionne

Texto de gua Incrivelmente Realista com Cinema 4D e Photoshop

Reader Tutorial: Dark Water in Photoshop by Julien Brionne

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.

More content from: cs4 photoshop tutorial

69 Comments

nice..!

starlight86
10/27/2008

This is great=)

kelvin Li - Kelvin Li
10/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 ;)
Simon
10/27/2008
 Great Tutorial!

Mazuri210
10/27/2008

leocda
10/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

@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?
abduzeedo
10/27/2008 Thanks for the comments ;)

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
leocda draw the typographical entities by hand if we want, can't we? :)
10/27/2008
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.

Chris
10/27/2008 ---------------------------------------------
http://picturetopeople.blogspot.com
Get Inside Computer Graphics

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

Hi i download PSD I open the file in Photoshop and does not work? what I do ??? :
(:(:(:(
aikonss
10/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??
annie
10/27/2008

Nice work Fabio

HarmonicDesign
10/27/2008
 nice tut!

Sparcy this is what i did with it

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

let me know what you think

great Tutorial as always, I check your page daily. Your work is awesome, keep it
up.
Juan
10/28/2008 Greetings from Panam.

Simple and nice!

Very easy to follow. Thanks ;)
Johnson Koh
10/29/2008

nice

Cris
10/29/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
Anonymous
10/30/2008
 Thanks man. This one...I liiiike!

Daniel
10/30/2008

muy bueno!!!

LP
11/02/2008

Heaps of fun! Thanks mate.

avatar
11/02/2008

http://moukadesign.altervista.org/photoshop-tutorial-leffetto-smoke-con-...

Moukadesign
11/04/2008

Great tutorial, here are the results I came up with

http://truefreestyle.deviantart.com/art/UnderStand-102624011
Ninja Pipes
11/05/2008

what font did you use?:D

very nice work by the way:D
kenzo---
11/06/2008
 I like!!! ALOT!!!

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

nice tuts, your work is amazing!

Great help! Thanks!

poGDI
11/07/2008

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

mishimasan --
11/10/2008 www.easidesigns.co.uk - ignite your brand.

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

Muy Bueno !! Veri Good !!!

Anonymous
11/13/2008

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

Mitico
 11/14/2008
sorprendente.

Saludos

Thanks !!
Pink
11/14/2008

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

Thanks for this was good, heres my results:

kidlizard http://www.flickr.com/photos/29936163@N02/3038599642/
11/17/2008

Thanks so much for this tut :)

It was exactly what I needed & easy to follow when i payed attn lol
PS Rookie
11/19/2008

Wow thanks so much for this, my wepage is called mediasmoke.com, so as you

can see works perfectly as a title!
Tom Lewis
11/21/2008 Ausom.

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
damian what to do? I'd appreciate an answer from anyone on this. I don't understand why
11/22/2008
the choices aren't available.
 damianmann@gmail.com

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

11/24/2008
thank you very mutch

nice effect!! thanks mate !

fab http://www.yaweb.fr
12/01/2008

well the step 4 is-

after u have grouped the layers and renamed it.... change the blend mode to color
nain dodge....now u get the nice light effect !!!
12/04/2008

Please, can you explain Step 4? Please!!

KittenChop
12/11/2008

Step 4 isnt working for me

Caleb Then group the layer and rename the folder's Blend Mode to Color Dodge. You will
12/15/2008 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
mONet
12/16/2008

great tutorial ;) go on like this

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
adc90 blending mode on the text to color dodge, why must you put it in a layer group?
12/23/2008

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
diaz9220 specify or give some tips please. Thanks!
01/09/2009

Show de bola Fabio tomei a libertado de publicar no meu blog com os devidos
creditos parabens pelo seu trabalho.
Mammoth
01/12/2009 Abs

Right. So you don't really teach how to create a smoke affect. Just how to use same
tired clouds with some downloaded brushes.
Melody
01/16/2009 Bummer.
 Awesome tutorial. I love photoshop's brushes capability. I wish they would add that
to Fireworks! Thanks.
Geddesign
01/19/2009

Wow. That's pretty impressive. Nice work!

Timothy
01/21/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
Todd blending options and uncheck "transparency shapes layer" in the advanced
01/22/2009
blending section in the middle of the box.

thanks for the tutorial... :)

emrah
01/25/2009

great stuff, many thanks :)

shedders
01/29/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
 Seth
02/11/2009 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

@Todd
02/15/2009
Tanks for the comment. I get it now.

very good. thanks

sivas
02/20/2009

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

Yes! I figured out the step 4 issue!

Amory I was having the problem where after i put the wavy text layer into a group, and
02/28/2009 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.

Luftherz I followed Todd's advice about unchecking the "transparency shapes layer" and it
03/12/2009 worked perfectly!

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

Please teach me

warrengrafx
03/17/2009

Exelente tutorial, gracias fabio.

Sam85
03/31/2009

Excellent tutorial! Amazing effect, and in such quick and simple steps. That's really
impressive, thanks for sharing this!
Business Card
Printing
04/07/2009

Nice tutorial, but i can't get step 4 done, can you explain the grouping thing a little
more clearly?
Hennessy
04/08/2009
 yes i also do not get the grouping part in part 4..

Anonymous
04/10/2009

If someone steps in the fourth encounter difficulties please contact my mail?

113982892@qq.com
Wokao Because I come from China. English is not very good. So I can only use images for
04/20/2009
you to explain

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

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

photo
retouching
05/10/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
christopher
05/20/2009

i am coollllllllllllllllllllllllllllllllllllllllllllll.

sandeep
 kothiyal
05/28/2009 you can see :http://www.flickr.com/photos/28900704@N06/3572836896/

Awesome and real effect.

Dario
Gutierrez
06/03/2009

the font he uses i think its...

'Alte Haas Grotesk'
Matty
06/04/2009 great tut btw

This is a nice tutorial.. i'm slightly bummed that a major part of this effect was
created using a brush.
Anonymous
06/05/2009 It just makes it more difficult to create a unique effect every time you do this.

Really really awesome man, thanks a lot.

Essam
06/07/2009

wow, amazing effect

I Love My thanks for the tut

Work
06/09/2009
Anonymous
06/12/2009

Post New Comment

Your name: * Anonymous

E-mail: *
The content of this field is kept private and will not be shown publicly.

Homepage:

Comment: *
SAVE PREVIEW
Advertise Here
TUTORIALS
Reader Tutorial: Illustrating a
Camaro 2010 by Julio Leite

Reader Tutorial: Aurora

Borealis Wallpaper in
Photoshop

Video Tutorial: The No BS

Retouching

Photoshop Quick Tips #11:

Creating Glow Lines

Photoshop Quick Tips #10:

Using Pattern Overlay

Creating an amazing Palm

Pre icon on Fireworks

Sparkling Hot Girl in

Pixelmator

Meat Text Effect in

Photoshop
more

www.LifetoneSafety.com Ads by Google

WALLPAPERS
FLICKR GROUP

Participate! Join the Abduzeedos' flickr

group.

FOLLOW US
Twitter

Full post

Short Version

Email

Tutorials
HOSTED BY
Home Interviews Tutorials Wallpapers About Us Contact Us Blog Flux Directory Back
and BlogCatalog
to the Top