(video instructions – how to embed)
Animated email signatures are typically found in GIF format. These animations loop seamlessly and can either be a logo animation or your actual signature. The great thing about installing these is that if you don’t need clickable buttons within your animation you can most likely just drag and drop to install.
Animated email signatures are great for adding into the footer of your email client of choice. The most popular type of animated email signature is a GIF format. These loop seamlessly and can be resized to match the rest of your email signature. Keep in mind also
Here’s what to expect on this page:
Corporate email signatures can either be a static image, (perhaps JPG or PNG) but also and incorporate animated logo styles. These go leaps and bounds beyond the “average” email footer. Even a simple bounce or fade effect can be eye catching for any type of business.
Typically, what I’ve seen is a minimal logo animation or branded GIF colors to match that of the company brand guide. These can even be created into logo animations such as this one here.
Here’s an example logo signature GIF and associated instructions on how to embed within your GMAIL. If you don’t have gmail, the process is relatively the same for most email clients but I would recommend double checking to ensure they do support GIF format.
(video instructions – how to embed)
A written signature can be great for both personal and professional email accounts. These are typically a replica of your exact signature that appears to be drawn on by an imaginary hand. These can also be created to match a preferred font or cursive format.
Here’s an example of my signature in a GIF animation below. It takes about 7 seconds to animate in and then becomes static for a second before repeating itself in typical GIF format.
Let’s start with a Gmail animation as this is one of the email clients that is most popular (and free). I’m not going to get too far into the design aspect but you can certainly use these steps to insert your own dynamic signature.
In a nutshell, I created this animation (bouncing circles) specifically for my updated email signature. The animation was then converted to a GIF with a transparent background. I do not however, recommend using transparent background for GIFs as they will render the edges poorly and appear pixelated. GIFs do not do a great job with transparent format but you can get away with it if you are using simple shapes, motion and solid colors (no gradients near the edges).
This was created using Adobe After Effects and three simple shape layers. Again, won’t get into the details inside After Effects as those who already know how to use this software will be familiar with the process, this is mainly a post on how to insert your animation to your email provider.
Navigate to the top right section of your gmail (when opened to the default page). Click on the gears icon. Then navigate within the dropdown to settings.
By default the settings screen brings you to the ‘General Tab’ – this is exactly where you want to be. Next add in your signature text (if applicable), such as name and email.
With the settings general tab (opened by default when you click on the Gmail Settings gear), Scroll down until you see the “signature section” (seen in the screenshot below).
Next, click the icon of the mountain picture, media upload. From here a popup will appear on your computer and you will be able to select the GIF animation that you’ve created or already have. Click upload and ‘ok’ once you’ve found the file on your local hard drive.
Voila! You’ve now inserted your GIF animation. Now let’s resize it to fit with the rest of your text.
Once uploaded, you’ll also be able to drag and reorder the GIF animation either below, above or to the side of the text that you already have. You also have the option to resize the GIF if needed. Personally, I like to use the small size as I don’t want it to be overwhelming in the signature. Just a minimal movement that catches the eye. Make sure to save your settings (save’ button found at the bottom of the page) and you’re good to go!
Here’s a list of some of the top factors to consider when embedding and preparing your email signature.
When creating your animated signature, most likely you will want a smaller size. GIFs and other animations that have a larger file size will not load quickly and could even stall out and you’ll be left with a blank space. The bouncing circles GIF from above was created in a rectangular format, 200 x 100 pixels (length x height). I even scaled it down a bit smaller when importing into my email signature.
Remember, a GIF is just a memory card so the more colors, action and animation steps you add into the file the larger the file size will grow. That being said, you don’t need to limit yourself to one color. I would recommend somewhere between 3-5 colors to keep things simple. You’ll also need to take into account the background color, typically white or black is a good fit.
A common misconception is that GIFs can support transparent backgrounds. While GIFs can be exported with a transparent background, they do a terrible job with this, especially when used with animation. The edges of your colors will actually start to blend together with the “transparency” layer and the output will look sloppy.
This is why I recommend choosing one solid color for your background color, typically white or black to match email inboxes. BUT of course you can utilize brand colors if you’re using a logo or business email.
There’s not much to be said about the speed of a GIF, rather how fast is your animation looping. Your entire GIF should be created to loop seamlessly without the “skips.”
Typically, 3-5 seconds of animation before looping with ensure both a small file size and allow for distraction free email signatures (i.e. not too many bells and whistles, it’s just an email signature of course).
An external link to a website, video, or anywhere else can also be embedded in your animated GIF. This could be useful if you’re creating a call to action button at the bottom of your email and want to send people over to your landing page. You could even get fancy and create a link tracker, something like “bitly” for example, to track what’s coming from where.
It’s your email signature so make it what you like! The other consideration here is whether or not you have corporate guidelines to follow. Typically, personal emails can allow for an extra “flair” or splash of animation whereas corporate signatures are a bit more formal by nature.
Already know where your animation or signature will go but not sure of the format? Get in touch using the form here and I’d be glad to assist.
Submit Your Project Info
Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.