My Animated GIF Workflow: How to Build GIFs Like a Pro and Ensure Revisions Are Easy-Peasy.

A little GIF history

The animated GIF: Thrust into common lexicon with the dancing baby in the 1990s, but with a lifespan now approaching its mid-30s, its surprising staying power has been further fueled by its use on social media, Slack, Discord, and texting.

The format also remains a very common form of advertising, though often plagued by silly limitations of 60K or smaller file sizes, 15 seconds in length, and no more than 3x loops. 

Smartphones were the stuff of sci-fi thrillers when the GIF came to be, and GIFs just seemed to stumble bass-ackwards into being a very compatible and portable format for mobile advertising. It’s the most fortunate file format of all times, quite possibly, aside from the never-ending argument of how it should be pronounced. (Team hard-G here – ”jiff” is just ridiculous, despite what the guy who invented the format says about it.)

What is an animated GIF?

An animated GIF is similar to a cartoon. It’s made up of a series of images (as few as two, or many more) with each single image timed in a sequence to create the illusion of motion, or simply a change of scenery. The multi-scene GIF is therefore a great fit for digital advertising, providing the ability to cram it full of messaging, creative use of animation, or both. 

A designer’s dilemma

Digital banner ads often allow for a static-image JPEG or an animated GIF. It’s obvious that an ad with some type of animation is going to be more engaging, so the animated GIF is the typical choice. Banner ads are usually available/required in the following pixel dimensions:

• 728x90 (“leaderboard”)
• 160x600 (“skyscraper”)
• 300x600
• 300x250
• 320x50 (mobile)
• 300x50 (mobile)

While those six sizes are very common, what’s far less commonplace is the method by which a designer creates an animated GIF. Despite the file format’s longevity, there’s no one piece of go-to software that I’ve found that does the job of creating and optimizing animated GIFs well on its own. So, I’m happy to share my workflow for creating animated GIFs quickly and with the flexibility to edit content and animation timing during the review and approval process.

My workflow

After years of experimenting, I’ve narrowed down my workflow to two pieces of software, each of which does different jobs in better ways, and a combination of which makes the animated GIF building process as seamless and as flexible as possible, providing that you link elements correctly. For the sake of this walkthrough, let’s focus on building a 728x90 pixel animated gif ad. 

1. Design in InDesign
   For most animated GIF projects, I’ve found that most assets I need likely already exist in InDesign or have been placed into InDesign documents for other projects (images, logos, background elements). So, starting in InDesign makes sense in that regard. InDesign also handles text beautifully, so formatting copy, adjusting leading, and fine-tuning letterspacing are far easier in InDesign than any other design software.

   Simply create a new 728x90 pixel InDesign document with as many pages as you want “frames” of animation. In this example, I’m building a four-frame animated gif starting with a four-page InDesign document.

2. Export PNGs
   After I’ve designed the four animation frames, I export each page as a 72dpi PNG file and save them to a folder named “PNG exports.”

3. Off to Photoshop
   Create a new 728x90, 72dpi Photoshop document. From the File menu, select “Place Linked…” and then select each of the four PNG files that you previously exported from InDesign. Delete the white “Background” layer. That should leave you with four layers in your Photoshop document: One for each PNG file that you placed. A link icon on each layer in the Layers panel indicates that the layer is linked to and dependent on a file on your computer.
   
   Open the Timeline by selecting Window > Timeline. In the Timeline panel, click the “Create Frame Animation” button.

   Click the “+” button in the Timeline panel to add three more frames to the frame animation. Then, select each of the four timeline frames individually in the Timeline panel, and use the Layers panel to make the desired layers visible on each frame. For example, on frame one in the timeline, you’ll want the bottom layer on, and all other layers off.

In the timeline panel, click under each animation frame to select the duration for each frame. There are preset options between 0.1 and 10 seconds, and an “Other” option to enter your own value.

On the bottom of the Timeline panel, select the looping duration. There are presets for once, three times, and “forever,” and an “other” option to enter your own value.

From the File menu, select Export > Save For Web (Legacy). In the window that appears next, you can optimize the file size of your animated gif by choosing how many colors to include, the level of lossy, or even “Optimize to file size” if you’re shooting for a maximum file size and just want to start there and optimize further. Click “Save”, then select the location to save your animated gif in the next window, and finally, click “Save” once more.

4. Revisions and adjustments
   Here’s the part where all the work you put into the three steps above will pay off with some efficiency.

   When the inevitable revisions come back for your work, updating the GIF is simple. Make the required changes to each animation frame in your InDesign document (you saved a copy first, and put it in a “buildups” folder, of course, so that you have a history of your work and revisions, right??). In this example, let’s say I’ve been asked to change the color of frame 3 from blue to green, and put the words NEW FRAME 3 in the 728x90 rectangle. Export PNGs again, this time writing over your first set of PNGs with the same filenames.

Open your PSD file, and in the Layers panel, you’ll notice alerts in the form of yellow triangles that indicate your placed images have been modified. In the Layers panel, select all layers, right-click or control click, and select “Update all Modified Content” from the menu. All your placed PNG files on all four layers will update. In this example, you can see that layer 3 updated with my new, green background.

From the File menu, select Export > Save For Web (Legacy). All your previous optimization settings will be saved, so just save the GIF again and you’ve got a revised animated GIF to send back for approval. Final approval. No more changes, thankyouverymuch.

But, when the changes do come again, making them quickly will be a breeze.

Have any workflow tips you’d like to share? Leave a comment below.