The above image is the result of practicing and lengthening this fire-making technique after a while. However, this tutorial will cover the creation and animation of a more simple fire animation.
This tutorial was made using the GIMP, although its principals may be applied to other digital drawing applications.
Step 1: Create a new image. Set the dimensions to be however large you want one frame of your animation. Create a new, transparent layer.
Step 2: Use the lasso-select tool to select a rough circle, or trace out a simple flame shape. Set your color to a brown or dark red, and the opacity to about 50%. Use the bucket fill to fill in the selection. Shrink the selection by a fair amount (approximately 4-6 pixels for a 256x256 image), change the color to FF0000 at 50% opacity and fill again. Shrink the selection slightly more this time, set your opacity to 100% and fill again. Continue shrinking by the first amount and gradually move from red, to orange, to yellow and eventually to white (although I would suggest just a very light yellow). About eight to ten colors should be enough.
Step 3: Use a gaussian blur on the fire to smooth it out (8-10 pixel radius for a 256x256 image; RLE compression). Now make a new layer underneath it. Hide the fire layer for now. On this new layer, render some not-too-rough-not-too-smooth clouds. Not small either, keep them comfortably large.
Step 4: Decide how many frames you want in your animation. I would suggest 32 frames, but any other number with even factors will work fine; both factors do not need to be the same, just even. Keeping the fire layer hidden, make as many copies of that layer as frames there will be. Usually all copies will also be hidden.
Step 5: Get a calculator and compute ImageSize/Frames. This is the number of pixels by which you must scroll your cloud layer upward. Using (Frames/2) instead of just Frames means that you'll loop through the clouds twice after all frames are done. You'll do this later. For now, just use ImageSize/Frames. Unhide the bottom-most fire layer, and do a displacement map filter on it by the cloud layer (20x 25y works well for 256x256). You'll end up with something like the below image.
Hide the current layer and make visible the one above it. This way you can easily keep track of which one you're doing next. Now, translate the cloud layer upward by the amount of pixels you calculated earlier. Make sure it wraps. In the GIMP, this can be done by selecting the cloud layer and pressing CTRL+SHIFT+O. Simply place the negative number of pixels in the Y-coordinate box and check "wrap". Select the next-in-line fire layer and apply the displacement filter with the same settings. It should displace by the cloud layer. Hide this layer and make visible the one above, translate the cloud layer upward again, and apply the displacement filter to the fire layer once more. Continue until you've displacement-mapped all your layers.
Step 6: Once you've displacement-mapped all your fire layers by the cloud layer, delete the current cloud layer. Go through all the fire layers and apply a gaussian blur (a radius of about 5 works well for 256x256). Now it is time to make a new cloud layer. This time, make sure there are at least twice as many clouds as the previous one, and twice as much detail and roughness. You may want to edit the value, contrast and brightness levels of this layer.
Step 7: Now, take your calculator again and compute ImageSize/(Frames/2). This will give you the number of pixels that will make sure your cloud layer wraps all the way around twice, making it scroll twice as fast as before. Get the first fire layer visible and do another displacement map filter on it. This time, set negative values so that it displaces in the other direction—this is assuming you set positive values before. Also, try to set the X-displacement larger than the Y-displacement (-25x -15y works well for 256x256). Translate and wrap your new cloud layer up by the new value you calculated, and perform the displacement map filter on the next fire layer. Continue until all layers have been displaced. They should each look something like this:
Step 8: Now that you've done that, delete your cloud layer. Make all layers visible and save it as a .GIF animation if you wish. Set the canvas size (canvas size; don't scale the image) to make it so that you have room to tile every frame, and also so that every row will have the maximum number of frames and each column will have its maximum number of frames; e.g., a 16-frame image will be 4x4, if it's a 256x256 large image it should be 1024x1024. Now set guides to divide the frames evenly; you want to make guides so your frames can be placed exactly where they should be. It's best to use percentages when setting the guides, if you can. In a 16-frame image, you'd have both vertical and horizontal guides at 0%, 25%, 50%, 75% and 100%.
Step 9: Put all your frames in order on the graph of guides you've just created. If the first fire frame is on the bottom, then put the bottom-most layer in the upper-left corner; select the next layer up, and move it to a space adjacent to the first. You can either go sideways or vertical, but as long as you keep that direction for the rest of the frames, moving to the next row or column when necessary.
Step 10: Save it as a 32-bit image; if you made a .gif animation, as was mentioned before, you can show it off to everyone.
