Home Contact

Timmy Kokke

…just sorting my bubbles…

News



Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged

Twitter












Tag Cloud


Archives

Post Categories

Image Galleries

Silverlight

Syndication:

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

Feedback

# re: Twirling smoke effect in Expression Design

Thanks for the how to, been wondering how to do that myself. 10/17/2009 2:13 AM | Coal

# re: Twirling smoke effect in Expression Design

Thanks .. It seems quite simple and its very effective too.

Raghuraman 10/17/2009 2:25 AM | Raghuraman

# re: Twirling smoke effect in Expression Design

Nice article, Timmy. Keep up the good work, didn't know Expression Design could make our work less difficult. 10/17/2009 9:34 PM | Mark Monster

# re: Twirling smoke effect in Expression Design

Hi,

This is good thing in terms of designing the logos and giving the effect to the already created design.

Regards,
Arpit Gupta,Pune 10/23/2009 9:07 AM | Arpit Gupta

# re: Twirling smoke effect in Expression Design

Ha, ha, ha!... nice and efective! It proves that with basic tools and lots of creativity, we can get what we want. Anyway... It would be possible to animate it?. I can't imagine how to do that with blend, nor with code... although I suppose it can be done in some criptycal way, maybe using Silver 3.0 rendering elements to bitmaps... 10/23/2009 5:50 PM | edu

# re: Twirling smoke effect in Expression Design

Wow! You made this so simple, I've been wanting to do this for months now. I'm a developer and finding myself having to do my own graphics.

I really appreciate this post! 11/3/2009 9:04 PM | MHoward

# re: Twirling smoke effect in Expression Design

Excellent article, thanks Timmy! 1/26/2010 11:23 AM | Craig Gilchrist

# re: Twirling smoke effect in Expression Design

It looks cool, except I get a grey fill on mine between each part of the smoke? The blue parts work fine though
Any ideas? 1/29/2010 7:49 PM | andy

# re: Twirling smoke effect in Expression Design

Sorry im dumb, got it working now, thanks for the tutorial! 1/29/2010 7:53 PM | ANDY

Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: