Animated Gifs often receive a similar reaction to that of Marmite, you either love them or hate them! Personally, I love them. They are easy to make, you can pop them in an email campaign or use them to add some interest to static images on a webpage. They do not require any plugins or code to run either, just upload them to your website like any other image and hey presto they work.
They do have some drawbacks though, using too many can slow down your webpages, they only have a maximum colour depth of 256 bit (much lower in comparison too other animation formats) and they can seem jittery and pixelated if you’re not careful in the optimisation and exportation process.
Overall though I think they are a great tool for designers and email marketers everywhere. You can use them to add extra sparkle to your monthly newsletters, and their biggest plus is that they’re super-easy to create, as I will demonstrate below.
In this tutorial I am going to animate a monster so that it will pop it’s head out above the email sign up form. I am going to be using Adobe Fireworks CS6, so this tutorial you will need to install this on your computer. It has been a while now since Adobe discontinued the Fireworks software. The CS6 version was the last released. Despite this I don’t think there is a better or more simple programme out there for creating animated gifs (or perhaps I need I’m just stuck in my ways).
Alright, let’s start animating our Animated Monster Gifs.
Step 1: Create your frame in Fireworks
Right so first let’s open up Adobe Fireworks.
Click Ctrl + N or select NEW and create a document of 220px x 220px.
(You can do your frame larger if you like but I am going to keep my frame size small to try and keep the file size low.)
Change the background colour to match the colour of the webpage your gif will sit in. In this instance I am going to change it to #D0DD3C.
Step 2: Create your artwork in Illustrator
I used Adobe Illustrator to create some monstrous characters to use in this tutorial. Each character has nine different frames, which I will use for the animation of the smile and the eyes opening. You can either make a custom animation yourself or in the words of every Blue Peter presenter that ever lived, here are a few I made earlier. You can download the artwork below.