So the process is first ensuring that your design idea (header graphic) can work as an animated loop and be also rendered as a flat graphic, the issue is that not all email clients render animated gifs and can be flattened through the email collection process by servers.
The start of ‘our’ process for creating complex animations is to use Adobe Illustrator, this allows us to create any object at any size which is NOT pixel based. The benefits of Illustrator is that we can resize, colour, manipulate and retain the objects clarity throughout the design journey. Some considerations whilst designing is to be clear on the colours we use as an animated gif will only hold 256 colours, this isn’t a lot and will only really work well with flat colour and not photos which could contain over 300,000. GIF optimisation can create some real nasty colour decisions if not considered upfront. Once the header graphic is designed all objects that need to be animated should be placed on separate layers for importing in to Adobe After Effects.
After Effects is a timeline based animation tool that allows us to manipulate the objects that we have created in our Illustrator file. Some of the basic options that we can change on our objects are the opacity, size, rotation and position. One way to explain After Effects is that you are the director and you have a cast which are the illustrator objects, you then want to create a movie by telling your cast where to be and where to go during the movie timeline, the start and end points are called keyframes and the journey between the keyframes are called tweens. We can also smooth out the start and end movement of any object on the stage, this is called ease and can be used effectively if the object needs to have a latency feel like a ball bouncing. If the animation is to loop we need to consider how the end frame can tie in with the start frame as the objects will have a nasty position jump if not executed correctly, an example is the effect we have used in our header animations which is a rotating world, this is basically a flat map wrapped around a sphere. The properties are then told to rotate the map around the sphere from 0 through to 359 degrees this is important as setting it to 360 will create a double frame and would look like the world paused for a frame.
Some technical considerations whilst creating animation is the FPS (Frames Per Second), smoother animation can run @ 24fps but will create larger files but 15fps will keep the file size down while retaining a level of smooth movement. Length of animation is a big factor as if it too short the animation will look very repetitive, too long and the file size will be huge and email download times will increase. There is no hard rule here as all animations are different but we tend to keep below 10 seconds.
Now that your animation is complete, its 10 seconds long @ 15fps we need to export all the frames to create our animated gif, (thats 150 separate files). Unfortunately After Effects doesn’t export directly to GIF so the work around is to create sequenced png files for importing in to Adobe Photoshop e.g. animation1.png, animation2.png and so on, Photoshop is clever enough to see there is a rolling sequence of numbered files and then reassembles the animation based on the exported 150 files. Now we can export our animation as a GIF, where we have options to run the animation once, a set number of times or on an infinite loop. We also need to optimise the file with colour, the more colour we put in the larger the file size, so here we need to balance what looks good to how big is the file size (download times).
The creation of animation is fun and can evoke great emotion in your audience, is should be used sparingly and not overwhelm the communication. Tips are to keep it simple and clean, use minimal colour to keep the file size down, think about how the email header would work if the animation was rendered flat (first scene), how long does this animation need to be before it repeats, how to create the loop of objects without jumping, trial one scene in photoshop for colour testing and see how it optimises, all these things should be considered before starting, but mainly have fun!
