Geeks With Blogs

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

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
Posted on Friday, October 16, 2009 11:45 PM Expression Design , dotnetmag | Back to top


Comments on this post: Twirling smoke effect in Expression Design

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Thanks for the how to, been wondering how to do that myself.
Left by Coal on Oct 17, 2009 2:13 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Thanks .. It seems quite simple and its very effective too.

Raghuraman
Left by Raghuraman on Oct 17, 2009 2:25 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Nice article, Timmy. Keep up the good work, didn't know Expression Design could make our work less difficult.
Left by Mark Monster on Oct 17, 2009 9:34 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Hi,

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

Regards,
Arpit Gupta,Pune
Left by Arpit Gupta on Oct 23, 2009 9:07 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
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...
Left by edu on Oct 23, 2009 5:50 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
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!
Left by MHoward on Nov 03, 2009 9:04 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Excellent article, thanks Timmy!
Left by Craig Gilchrist on Jan 26, 2010 11:23 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
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?
Left by andy on Jan 29, 2010 7:49 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Sorry im dumb, got it working now, thanks for the tutorial!
Left by ANDY on Jan 29, 2010 7:53 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
I'm not able to find "Blend Paths" in the "Object Menu".
I'm using Blend 3, any ideas?
Left by Kranthi on Mar 18, 2010 11:51 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Hi Kranthi,

This tutorial is for Expression Design, which is a different application from the Expression Suite.
Left by Timmy Kokke on Mar 18, 2010 11:57 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
This is so cool! You made it so simple!
Left by Anqi on Mar 26, 2010 3:26 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
This is really useful and helpful specially for blogspot blogger. Thank you so much for creating this nifty and easy-to-understand tutorial...
Left by giocare ai casinò virtuali on Mar 31, 2010 12:16 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Absolutley wonderful. Thank you.
Left by technette on Jul 11, 2010 5:31 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
anyone knows how to do a 'bloat' effect in Expression Design, like the 'bloat' effect in Illustrator?
Left by Amjad on Aug 11, 2010 7:26 AM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
now, how can I animate theses paths, just to look like a real smoke ?
Left by Paulo Quicoli on Jan 19, 2011 8:20 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
Nice, thanks a lot for sharing...
Left by Paulo R. Pereira de Souza on Jul 19, 2011 9:10 PM

# re: Twirling smoke effect in Expression Design
Requesting Gravatar...
hello, dude... i tried to draw a path using a pen in blend 4. but i stuck and i couldn't find "Blend Paths" in Object Menu ... there's no Blend Paths in the Object menu in my expression blend 4 trial.. can u help me ?.. what's the problem?.. is there something wrong with my expression blend 4 trial?...Thanks for your helps before. I'm waiting for your reply soon..
Left by Joshua chen on Feb 14, 2012 5:51 PM

Your comment:
 (will show your gravatar)


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net