Fire Text Animation

In this tutorial, I'm going to explain you how to create this fire text effect you can see below using Motion Tweens and a Mask.

At first when I planned to write this tutorial I wanted to just put some animation of fire inside a Mask. But, since I couldn't find a single fire animation that I thought was good enough, I did it another way - I googled a nice picture of a flame and animated it using only the Free Transform Tool. Well, to be quite frank, I was amazed to find out that the masked tweened picture looked much like a real fire animation!



Anyway, let's start!

i. We're first going to get an image of fire. This is the image I found:

ii. Now, we need to create a mask. The mask can be anything, but in this tutorial it is a text. So, grab your Text Tool (T) and write something on a new layer ( click on the to create a new Layer).

You should now have to layers: one with a Mask, the other with a picture on it.

iii. Once we've got the mask and picture,  right-click on the layer we've got the text-shaped mask on and go to Mask. This will, of course, create the mask.


Animation Part

 And here comes the animation part. As promised, we will confine ourselves to only using the Free Transform Tool (Q) to animate the picture. So, here we go.

i. Set the fps to 30 - this will be the right frame-rate for this project, I think.

At this point, it's up to you how you will animate the image of fire. Anyway, if you're curious, here is how I did it:

ii. Place the picture below the Mask so that it's no touching it. Then, select the image and, using the Free Transform Tool, squashed it a lot. You can see how to do that in the below picture. Note that the red "fire" text is our Mask.

iii.  Select the 15-th frame and press F6 to create a keyframe there. Once you got it, select the picture, press Q to activate the Free Transform Tool and make it 2 times wider like shown below.



iv. The next step will be creating yet another Keyframe, this time on the 25-th frame. So select the frame and press F6 to create a Keyframe there. On this keyframe the picture will get much bigger. 

To receive the above effect we can either use:

a) the Free Transform Tool 

b) The Scale and Rotate window you will activate by going to Modify >Transform > Scale and Rotate.


v.  Now, select the image and go to Modify > Transform > Flip Vertical. What this function will do is, of course, flip our picture vertically.  We did that because we want the picture to go up now so that the effect is complete.

vi. So we're going to create a Motion Tween so that the fire picture goes up. Just create a Keyframe on, say, the 45-th frame, move the "fire" image all the way up so that it's above the mask and, lastly, create a Motion Tween.

This is how my Timeline looks like when I'm finished with animating.





And this is how the animation of the Motion Tweened imagine will look if you follow my instructions.

Note: The path I took while animating is not the only possible way of creating this effect. It's possible that the transformation that you applied to your image yield an even better over-all result. I hope they do!


So, anyway, hope this was of some help. Below you can download the source file of what we've created in this tutorial.

Thanks for reading and have a nice day.