Twirling smoke effect in Expression Design

For a long time I’ve been wondering how to create a smoke effect like used in the Silverlight Logo for example. There are some techniques to render smoke by using 3D modeling software. But creating this effect in a tool like Expression Design is easier than it looks. Below is an example of what the end result might look like.

endresult

After opening expression Design start by creating a new document.The size of the document isn’t very important as long as you have a bit of space to play with some paths, so at least 1024 x 786 is recommended.

pentoolSelect the Pen tool  from the toolbar and draw a curvy path. Try giving it some space, but don’t be scared to try out different variations with wide curves and even small loops. You’ll probably end up drawing these curves a couple of times. After you’ve learned this little trick, you’ll quickly learn to what works and what doesn’t.

Remove the fill of the path. Give the stroke a light blue color like #74C4FC. and a width of 3. Change the opacity to 25.

 

RedCurve

Now draw a second curvy path approximately the same as the first, but don’t follow it exactly. Add some different twists and turns. This will cause the smoke effect to twirl and get a smooth feel. Remove the filling for this path also. Change the stroke to the same light blue as the first. Give it a width of 3 also, but set its opacity to 0.

 

BlueCurve  Select both paths.

bothPathsWith both paths selected, go to Object menu and select Blend Paths…

BlendPaths

Set the Steps value to 1. This will create a new path, that’s drawn between both paths.

BlendPaths1

Add this new path to the selection to get all three paths selected. And go to Object, Blend Paths.. again.

This time, set the Steps value to 100. This will create a smooth transaction between the three paths.

BlendPaths100

Et voila, “Smoke”. endresultinDesign

Where to go from here? Experiment! Play with different colors, try gradients and see where different curves may lead you. And, for a funny twist, try dashing the curves.

 

You can download the .design file here.

 

Shout it
Tags van Technorati:
dotNed blogger
kick it on DotNetKicks.com

Leave a Reply