Smoke Animation

Design a realistic smoke animation using Adobe Photoshop and ImageReady.

1. First, create a new document in Adobe Photoshop. I will create a 300x300 px document, but you may wish to use a different size. Start off with a white background:

image 1

2. Create a new layer above your white background layer. Grab the Elliptical Marquee tool from the tool bar in Photoshop. Make a medium sized selection in the center of your document. Try holding shift while making the selection (by holding shift, you will constrain your selection to a perfect circle).

image 2

3. Before we go any further, we need to select a good foreground and background color for our smoke. I chose #3C3C3C for my foreground color (A medium gray), and #FFFFFF for my background color (White). Your Foreground and Background colors should look like this after applying these settings:

image 3

4. Now lets edit our selection we previously made. We need to feather our selection (Select > Feather) with a value of 40. This will soften the edges of our selection.

image 4

5. Now its time to start making our smoke. We can use the Render Cloud filter to help us with this process. Be sure that you are in a blank layer above your background layer, and render clouds (Filter > Render > Clouds). The Clouds Filter will use the Foreground and Background colors which you selected in step 3:

image 5

6. This will be our main smoke object. However, to make our animation seem more real, we will need a few smoke objects. You can do this by repeating steps 1-5 on new layers, or you can keep it simple and duplicate your smoke object layer 5-8 times.

image 6

7. Finally, we do not want all of our smoke objects to be the same size. Transform some of your smoke objects so that they appear smaller than others. Try to make a bunch of different sizes. While on each layer, simply click Ctrl+T (Or Edit > Transform > Scale), and then while holding shift, drag one of the square corners inwards to decrease the size of the smoke. Holding shift will constrain the objects proportions. Press Enter to apply your transformation:

image 7

8. Now drag all of your clouds so that they are all in about the same location along the bottom of your canvas:

image 8

9. Save your document, and transfer it over to ImageReady for animation (File > Edit in ImageReady).

10. In ImageReady, be sure that your Animation Palette is visible (Window > Animation):

image 9

11. In your animation palette, duplicate the first frame of your animation 3 times (You should have 4 frames in total). To Duplicate your first frame (The Frame labeled 1 in the top left corner), simply select it, and then press the button that looks like the one shown below:

image 10

image 11

12. Click on frame 2 of your animation. In your layers palette, select the layer with your first smoke object. In your editing window, use the move tool to move this smoke object up and a little to the right:

image 12

13. Select frame 3 from your animation. Move the smoke object straight up a little bit, and use the transform tool to enlarge it. Also turn down the opacity of the smoke object to about 60%:

image 13

14. In frame four of your animation, move your smoke object up and to the left a little. Transform it again and make it larger. Also set down the opacity of the smoke to 0%. These 4 frames will be the four main points in our animation, similar to key frames if you have every used Flash. When you play the animation right now, it will look terrible, but imagine it with frames filling the spaces in between. First your smoke will rise to the right, then up, then sway back to the left, all while expanding and fading out. Of course this is just one of our smoke objects, we still have to do the same thing with our other ones. I could take the time to explain to you a path for each one, but that would take a while. Repeat steps 12-14 with the rest of your smoke objects, except try changing directions a little bit:

image 14

15. Now its time to turn our key frames into a smooth animation. Select Frame 2, and click tween. Set up the tween as shown below:

image 15

16. Repeat this with the rest of your keyframes (they will now be frames 11 and 12 because they increased when you added the 8 frames between 1 and 2):

Smoke Animation

Here is the final animation! I decreased the size so that it would load faster.

Good Luck!

subscribe to newsletter