This tutorial is for anyone who wants to animate a Signature with Adobe After Effects. This tutorial is intended for anyone who is not familiar with AE. I will show you how animate a signature and finally convert that to a GIF image, so that you can use it even in your website. So let's begin.
1. Create a new project.
2.Import the image of the signature you are going to animate. Here I'm using just an image I Googled.
3. Drag and drop the image to Composition
4. Select Pen Tool and start drawing using the pen tool on the image. If you haven't used pen tool before, just don't worry within a few minutes you'll get used to it. So just give a try.
5. Change the mask color if you want. You can do that by clicking on the drop down of the 'Masks' and on the required mask click on the color.
6. When you want to start with a new mask just click on the mask tab and again start drawing using a new mask. You will see a new mask will be created under the Masks. You can change the color of that if you want.
7. Create a new composition. You can change the settings as you want in this window.
8. Right click on the new composition and click on new solid and create a white solid background using the window.
9.Copy all the masks from previous composition. You can do this by clicking on one mask, then shift+Click on the last mask. Then go to Edit-> Copy.
10. Click on the White Solid and Paste the copied Masks there.
11. Now we can select all masks and resize them to fit the window (First select all masks. Then pressing Ctrl+Click will make a free transform selection. Then resize using Ctrl+Alt+Shift and drag to your size)
12. Lock all masks by clicking on the small box in the right side of each mask. As you have selected all masks, clicking one mask will allow you to lock everyone.
13. Then go to Menu---Layer--- Masks---Hide Locked Masks
This will disappear the masks from your composition
14. Then Menu---Effect --- Generate ---- Stroke
15. In the Stroke Tab make the Color to Black and you will see the first mask appear in black. Then Check All masks and Stroke Sequentially. This will make all your masks appear again.
16. Bring the time line cursor to 0 secs and make the click the small stopwatch in end time and set 0% in end time. Also you can reduce the work area by dragging the Work Area End to left side in the timeline. This will reduce the time that your animation will work.
17. Bring the time-line cursor to some seconds and make the stopwatch 100% in the end time
18. Make the paint style to On transparent + toggle transparency grid and Click on the Toggle Transparency Grid Button so that your animation will work on a transparent background.
19. You can also add effects to roughen the edges and changing the settings as you want there. (You can do that by with the white background selected Effect-> Stylize -> Roughen the edges)
21. Click on the Output Module and give the Format to Quick Time and Channels to RGB+Alpha.(This will help to create your animation in a transparent background)
22. You can give a new name by clicking on Output To and browsing a location and a file name. Then Click on Render.
23. Import your .mov file to Photoshop (File-- Import-- Video Frames to Layers). This will import all the layers to photoshop.
24. Then click on File--- Save for Web and Devices, Change the settings you want and Save it. It will output a .GIF file with animated signature.
So that's it. Hope that was helpful.
Thank You.
