In graphic design and photography, smoke is capable of producing dramatic and powerful effects. In modern design digital smoke is frequently combined with lighting effects to create stunning work. In this post we'll take a look at more than twenty sources of smoke-related inspiration and resources that can be used in your own design work.
Photoshop Tutorials:
-

Create Smoke Type in Photoshop in 10 Steps
Over at Abduzeedo, Fabio shows us how to transform simple text into something more dramatic by adding a smoke effect. In the tutorial, Fabio applies some effects and works with a set of smoke brushes that are freely available. This technique is fairly simple to replicate for your own work, and by using the brushes you can do this pretty quickly.
-

Smokin' Woman
In this tutorial you'll learn how to take a standard photo of cigarette smoke and blend in another photo of a woman into the smoke. The combination of images along with some Photoshop magic makes for an interesting effect of a smoking woman.
-

Creating Smoke
Creating smoke in Photoshop can also be done from scratch, using no images and no smoke brushes. This is an older tutorial from Abduzeedo, but the approach is quick and straightforward, and the end result is an attractive, realistic smoke effect on a dark background.
-

Create a Stunning Digital Smoke Effect
In this tutorial from PSDTUTS we'll learn a different approach to creating smoke from scratch in Photoshop. The end result is an effect with a bit of a different look than the previous tutorial, but both are excellent ways to create your own smoke in your work.
-

Creating a Smoke Fading Effect
This tutorial from 10 Steps starts with a photo of a woman and transforms it into a dark image of the woman's face fading into smoke. The end result is interesting and unique. Because the tutorial is kept to 10 steps, some of the process isn't described in as much detail as it could have been, but it's still a helpful guide for some experimentation.
Website Designs
-

Noe Design Studio
Noe Design Studios has possibly received the most exposure as a site that features a digital smoke effect after appearing in many web design galleries. The multi-colored smoky header on the dark background gives the site a memorable and impressive look. In this site the smoke is the most prominent graphical feature in the design.
-

Dreamwire
Dreamwire's portfolio site uses a large background image of a rainbow-colored smoke effect. The primary content area of the site is a fairly standard two-column layout, but the colorful, smoky background image gives it a unique look. Unlike most of the other sites that use smoke effects in the design, Dreamwire does so on a light background.
-

Elite by Design
When Elite by Design was re-designed it was given a space-style background with some light and smoke effects. The stars sit on the dark background, and they're surrounded by a cloudy, smoke effect. This effect is fairly subtle in the overall design of the site, and it does not produce a distraction from the content.
-

1 Pixel Brush
1 Pixel Brush uses a dark design with some various lighting effects in the header and as part of the header text. To the side of the light effects a smoke effect is also used. Smoke and light are often used together to compliment each other, and this is just one example.
Photos/Images
-

Dancer
This photo from deviantART user Canadian Rocker was taken in the dark while playing with some fire on a camping trip. According to the description there was some editing, such as the removal of some digital noise. The photo is called dancer because the shape of the smoke resembles a person dancing.
-

Calamari
This is a very interesting image on Flickr of some colorful smoke. Sunlight was used to make the smoke clear and to bring out the colors. If you read through the comments on Flickr you'll be able to read an explanation from the artist about the effect and some advice on duplicating it for yourself.
-

Smoke
This photo on Flickr does a great job of capturing the smoke in the photo. This gives a slightly different example than the more digital and colorful works involving smoke.
-

Vibrant Smoke
If you're looking for some inspiration of what you may be able to do with smoke in Photoshop, this is a great source. The smoke effects and the color are similar to those demonstrated in some of the tutorials featured earlier, and also similar to a few of the real-world examples of smoke in web design that we looked at.
-

Dissolve
This image is a beautiful combination of smoke and typography. The text also falls apart and disintegrates at certain places. We saw a tutorial for working with some and text in Photoshop, and this is an example of what can be created, although it is not completely the same effect as the tutorial.
-

Manhattan Chaos
Manhattan Chaos is an image of smoke billowing into the city sky. This is much more of a traditional smoke rather than a digital smoke effect. Smoke can be very powerful in photography and graphic design in a variety of different ways, as we have seen through the examples featured here.
-

Smoke + Type
This work on The Behance Network is another beautiful example of smoke and typography used together. In fact, the Behance page includes a number of other wonderful examples in this series. The dark background and light text work very well with the smoke effect.
Photoshop Brushes
-

This set of brushes from Qbrushes includes seven brushes, all in high resolution. As you can see in the preview image on Qbrushes, they are excellent for use on a dark background with a variety of different light and bright colors.
-

This is a huge set of brushes from deviantART user photoshop-stock. The set includes nearly 40 different smoke brushes for your own work. All of the brushes are high resolution, and most are around 2500 pixels.
-

DeviantART user photoshop-stock gives us another set of smoke brushes. This set includes 12 brushes, most are around 700 - 800 pixels in size.
-

This set of brushes is available for download at Brusheezy and it contains six different smoke brushes. This set was created in Photoshop CS3, so some users may not be able to take advantage of them on older versions.
-

Mellyana's smoke brushes set includes six different brushes for creating your own smoke effects. The brushes are compatible with Photoshop CS and above. These brushes are a bit different than some of the others, with more of a misty appearance.
Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.



























User Comments
( ADD YOURS )Tom Ross January 11th
Very inspiring stuff!
( )Zee January 11th
Whoa awesome… i’ve been looking for this tutorial for a long time thank you very much, how about the water,fire and earth??? can’t wait to see these too.
( )Germansn January 11th
thk u very useful
( )JeremyOLED January 11th
Working with smoke always seems like such a daunting task, but I guess as with everything else there’s certain techniques that will make it easier.
( )Max January 11th
Nice collection steven , smoke can add alot of mystery and atmosphere to a piece of work.
I thought these were great smoke textures by Caleb from lostandtaken http://www.lostandtaken.com/2008/11/four-silky-smooth-smoke-textures.html
( )Nikola January 11th
excellent roundup! thank you
( )KAC Art January 11th
Other similar post :
( )http://abduzeedo.com/web-picks-1-smoke-0
xQlusive January 11th
Smoking article
( )codie January 11th
very nice
( )Aabid January 11th
great job done.
( )minisite design January 11th
very good resources
( )ArtBox7 January 11th
Good article, but I didn’t see listed here this great smoke brush
( )Farid Hadi January 11th
Nice list of resources. Thanks.
( )Stefan Matei January 11th
Smoking causes fatal stuff!
( )afrix January 11th
nice stuff out here : )
http://afrix99.deviantart.com/
( )Lawrence77 January 11th
A question to all of the PSDTUTS board members, where is FABIO???
LawrencE
( )John January 11th
Another Smokey image:
http://ronadish.deviantart.com/art/Smoking-Mosh-106132191
( )philippe January 11th
very very nice stuff, thanks, that stuff gives me lots and lots of inspiration,
( )thanks mate
Grant Friedman January 12th
Nice round up Steven!
http://twitter.com/colorburned
( )Frog January 12th
Some great links there Steven, I’m really liking your input here on PSDtuts
( )Jhay January 12th
Great post! You might also want to check out my friend’s work http://www.flickr.com/photos/parc/sets/72157604656271947/
( )Fabio Sasso January 12th
Great list and thank you very much for including my tuts
I really like trying to create smoke in Photoshop.
@LawrencE I was quite busy last year but this year I’ll write more tutorials for sure
( )DKumar M. January 12th
Nice inspirational article.
( )DKumar M. January 12th
Nice collection for beginners… Thanks for sharing
( )insic January 12th
smoking hot! lol, thanks for the nice article.
( )Ariful Alam Khan January 12th
Nice collection
( )Dan January 13th
Thanks for the feature and the brush resources always nice to have
( )Chris January 12th
Wow,
( )hey thanks for featuring my work in their as inspiration.
Rachelle January 13th
I love the “Create A Smoke Fading Effect” tut, but they are all beautifully done. Thanks for this post, it’s really gets the wheels turning for different ways to incorporate in my own design.
( )Johnson Koh January 13th
Thanks for the feature too, Steven!
( )See you around
Carlos Hermoso January 13th
Fantastic list of sources of dynamic smoke inspiration. Thanks
( )Lawrence77 January 13th
@Fabio: Hey Fabio Thanks, I am a great Fan of you!
( )Come on! this year, i want to see your great works…..
Lawrence77 January 13th
Thanks Fabio!
I am a great Fan of you!
Come on! this year i want to see your great works!
GOD bless you!
LawrencE
( )johannes linus james January 15th
well hi everyone i like the effects with the smoke it gave me some new ideas to play with gee thanks
( )chekmate January 17th
If I was a master at photoshop I would have created this image….http://www.timeberly.com/Idaho/North/CoeurDAlene/TimothyEberly/detail.asp?id=16&2id=24
( )but luckily I didn’t need photoshop, just a great deal of luck.