Plug-in Filters Tutorials

Animated fire creation tutorial

How to create a GIF file with animated fire.

The Fire3 plug-in filter is a great help in the creation of fascinating and realistic burning GIF files. For example, you can make effective fiery banners for your website to capture the surfer's eye. Below you will find the description of steps for the creation of animated fire GIF files. All steps are described for Adobe Photoshop or Image Ready, but you can easily apply the same technique when working with other graphics editors.

Creating a sequence of frames with burning fire.

In order to animate your GIF file you must first create a sequence of frames with burning fire. You can use our Fire3 plug-in in Adobe Photoshop or in any other graphics editor that supports Adobe Photoshop Standard. If you are working with a video editor like Adobe AfterEffect or Adobe Premiere, you'll need to convert the video into sequence of images.

Here's how to make a sequence of firing frames in Adobe Photoshop:

Prepare a mask or object that you wish to burn.
Make several copies of this layer as they will serve as the frames for your animation.
Put a mark in the "Lock transparent pixels" checkbox.
Apply the Fire3 filter to the bottom layer. Adjust the shape and the color of your flame.
Apply the Fire3 plug-in to all layers one after another. NOTE! In the dialog window of the plug-in you'll need to gradually increase the value of the Frames parameter from layer to layer.

For example, set the values of Frames parameter for each layer to 25, 26, 27, 28,… The more you increase the value from frame to frame, the faster your fire will be. Once you learn how to create animated fire, you may make your animation more complex by adding wind, animating the color and the shape of the flame, etc. When you finish working, the Layers window should look something like shown in the picture: …

Photoshop layers window with firing samples

In order to make the procedure more understandable, we have prepared an "Action" for Photoshop. The execution of this "Action" will give you a set of layers with animated fire. Copy the file to your computer. Start Photoshop. In the menu "Windows" select "Show Actions". In the "Actions" window click the arrow in the top right corner, select "Load Actions…". In the dialog window select the file you have just copied to your computer. The execution of the "Action" will give you a set of layers with animated fire. This will appear the folder "Pan Fire 3 Tutorial" in the "Actions" window. The folder contains three actions. If you want to see an example of what can be done with the Fire3 filter you can check out our file with a mask, the action that created the mask and couple of files with the plug-in settings. Your creativity and patience combined with the unlimited possibilities of our plug-in will help you create many interesting and fascinated pictures. Download the tutorial's action: …

Creation of animated GIF files.

Go from Photoshop to Image Ready (Shift+Control+M).
In the menu "Window" choose "Show Animation".
Select "Make Frames From Layers". You should get a picture similar to the one below.

Set the delay for each frame.
Optimize and save your animation.

Once again we would like to emphasize that Fire3 is a very powerful and flexible tool. Using this tool in will help you to create very complex and capturing compositions containing realistic animated fire.

You can download the Photoshop's action of this fire tutorial:

save this file to disk.
in Photoshop choose to load this file in "Actions" bookmark.