PS Animated Fire
1) Assuming you have Photoshop open and running, open a new file Ctrl + N with whatever dimensions you choose. Mine will be 300px by 200px. The background can be whatever color you choose but for the purposes of this tutorial we'll make it black so that the fire will be easy to see. To do this select the paint bucket tool
and fill with #000000.2) Create a new layer on the top of the first by clicking New Layer
at the bottom of the layers palette.3) Now use the rectangular marquee tool
to make a selection at the bottom of the canvas about 1/5th of the size. Fill the selection with white #FFFFFF like this
De-select the selection by pressing Ctrl + D
4) Next we need to add a Blur to this layer so select Filter >> Blur >> Gaussian Blur... set the radius to around 12px
5) Now duplicate Ctrl + J the layer 3 times so that you have a total of 4 blur layers. Hide the top 3 layers by clicking on the eye icon
in the layers palette next to each layer you wish to hide, leaving only the bottom blur layer visible and selected
6) Now select the smudge tool
and set the brush size to 45 px soft round brush, and set the strength to about 70%
7) Now smudge the white blur layer by clicking and dragging from the bottom up. On your way up, curve to the left or right to create the wave effect of the flame. Repeat this until you've smudged the whole way from left to right. In between, you may want to switch to smaller brush sizes to create flames of various sizes.
8) Once you've finished your flames hide this layer and select and show the next blur layer like so..
Repeat Step 7 for this layer and the remaining 2 blur layers. Try and make the flames as similar to the previous as possible. This will create a smoother animation.
9) Next lets add some color to your flames. Select the create new fill or adjustment layer icon
at the bottom of the layers palette and select Color Balance... from the menu. In the color balance settings, set the following:Shadows: [ +100 ] [ 0 ] [ -30 ]
Highlights: [ +50 ] [ 0 ] [ -30 ]
Make sure that this adjustment layer is at the very top on the layers palette, if not, drag it up there.
10) Now we need to transfer this image to ImageReady for animation. ImageReady is an animation program that should have come with your copy of Photoshop. Select Jump to ImageReady
on your tools menu. Once ImageReady opens you should see your image and an animation bar that looks like this
If you do not see the Animation window you may need to click Window >> Animation from the drop down menu.
11) Now we need to animate the image. In the Animation Window you should see your first frame. Set the 0 sec. button below the image to 0.1 by clicking it and selecting 0.1 seconds.
12) In the Layers palette turn off all layers but the main black layer the color balance layer and the first flame layer by clicking on the "eye" icon
like this
13) Now in the Animation Window we need to duplicate the first frame. Find the duplicate frame button
and click it. You should now have a second frame next to the first one.14) Now in the Layers palette turn off all layers but the main black layer the color balance layer and the second flame layer just as you did in Step 12 with the first frame.
15) Repeat this process so that you have 4 frames one for each flame layer.
16) Now in the Animation Window click the Play button
to preview your finished image.17) You should now have animated fire! Under File click Save Optimized As... to save your image. Note these can only be saved as GIF files. Your finished image should look something like this!
