All steps of this tutorial are written in Photoshop action scrip what you can download here
. You can install and play this action script and the result of this tutorial should be automatically reproduced in your Photoshop. Download action script for this tutorial
Lets begin...- Make a new composition 1000x1000.
For reproduce all pictures exactly as presented in this tutorial I recommend to repeat all steps quite as described here. And composition size is also important, because final fire effect depend on size of picture.- Type a symbol "4" in composition
with using Photoshop's tool "Text"
. (For example, I used the font "Lucida Grande"
, about 500px size). But in your follow experiments you can use any fonts, with arbitrary sizes and type any texts which you need.- Choose the "selection" tool
of Photoshop and select the red symbol "4"
. You should have a selection mask in shape of symbol "4"- Create a new Layer.- Go to Photoshop menu "Filter->AlphaPlugins->FireFor...".
(Its supposed what this plug-in is already installed on
your computer. If now yet then here is a short instruction how to install it
Now you should see a dialog window of the plug-in.- To burn a fire along of your selection area
you should choose the radio button "Selection or Contours"
. This option lets to choose your selection mask as a source of fire.
To see the fire result on a black background you should choose the radio button "Fill Black"(Put your attention, what on the preview window you can see the contour of "4" symbol outlined with thin red lines. It is because the checkbox "Show Emitter" is On and the source of fire is shown in preview area. This red lines are visible only in preview. These will not be drawn in final result.)
In this tutorial we will not detailed explain how to adjust fire's parameters. (see the basic tutorial
devoted the theme of fire's parameter adjusting). For this tutorial
you can just apply a preset of parameters. In the list of factory presets click on the item "tutorial02"
for reproduce a fire as in this tutorial. But for your future experiments you can apply any presets
which are fit to your tastes. For any case, the follow screen shows used values of fire's parameters for this tutorial.
For make a sequence of fire frames we will increase in each step a phase of flame. The parameter "Random Seed"
responses for fire's phase. If you will increase this parameter on a big value then fire is changed frequently and flame waved speedily. If you will increase this parameter on a small value then fire's changes are small and flame's movement is slowly.- For the first frame set the value of "Random Seed" as 0.- Press "OK" and apply the filter on your layer
. Now you have a first frame of flameNow we will make a next frame.
It is quite simple.- Create a new Layer.- Go to Photoshop's menu "Filter->AlphaPlugins->FireFor..."
You will see the known FireFor dialog again.- Just setup the "Random Seed" paramerer as 0.1
(for future experiments you can change it with any speed).
And press "OK"
. Now you have the second fire's layer.- Repeat this sequence of steps (New Layer + FireFor + increase Random Seed)
such many times as you want. For this example I made 5 frames. It is enough to make a dynamical animated fire what can be used for i.e. web page decoration.
Well, now you have 5 layers with sequence of animated fire frames. (Of course, The more frames you use then smoother is flame's movement, but then file size is bigger).But how to make an animation from these layers?
Easily.- Open "Animation" Photohsop window.
Launch a popup menu by a small button in right top corner of this window. In the popup menu choose the item "Make Frames From Layers"
(dont forget to delete the text layer with "4" symbol, if havent yet done)
All what you need now - just setup the repeat option as "Forever"
and setup a delay for each frame (i.e. 0.1
And so, you have an animation with a living fire. How to use it on a web page?
Just save it in a GIF file by clicking Photohsop's menu "Save For Web and Devices..."
We showed you simple tricks how to make animated GIF with realistic fire and smoke effects. This tutorial has becomes possible and easily because
there is an incredible and handy plug-in the AlphaPlugins FireFor
what is a power and unique tool for creation in the