Get your animated email signature!
Your email signature is your new age business card. We developed an engine that can create a calligraphic signature with your name on it really fast. Get yours now!
Free Animated Signature Template for After Effects
Get rid of those boring email signatures with an animated update.
So I had this idea to make myself an animated email signature as .gif is suported by most browsers and email clients... and so I did. I animated a signature type font in After Effects into a really cool .gif, added some line icons around the contact details and after a week or so of sending emails back and forth I realized that my animated email signature was a breakthrough and all my clients and friends who saw my email signature wanted one. And here comes the fun part:
Initially, I've spent like an hour making my email signature but now I was facing like 20 orders, all kinds of names with different characters and I needed to somehow simplify, maybe automate the process. After some trial end error (I was trying to mask and reveal text from an image, duh!) I decided that I was going to pen tool all the letters so you don't have to... and so i did. It was a tedious process but my pen tool skills are pretty on point so it was all done in about 2hours. Below you can see the final project file where the magic takes place.
Play Video
The usage of this is pretty straight forward:
- you just drag the first letter into the viewport, move the timeline where the animation of the first letter stops and drag and place the next letter.
- all the letters are placed in a separate composition and every letter animates individually.
- as long as the compositions are aligned horizontally the letters should work perfectly, no needing for vertical adjustment for individual letters. As you can see in the example above all the compositions are aligned except for the one who has the coma for the t.
- when animating you would like to keep in mind that if you have two words it would be nice to have a larger animation brake between the words to give it a natural feel.
- when exporting for email I use After Effects frame by frame export, open all frames in Photoshop as a sequence (it’s only a checkbox) and save as a .gif with the option to play only once so when you open the mail, the signature plays until the end and it stops at the last frame.
More Examples
In the top example a lottie .json file is used. I use lootie for web development often because I have more control over the animations, they are vectors, and they are verry small in size.
In the top example there is a .gif file and this is what I finally used for the clients email signature because it could render in all browsers and it can play only one loop when it loads.
With this beeing said, you can download the source file below and have fun with it. If you have trouble setting up this project you can contact us at hello@pixelo.ro
