How to Create an Animated GIF with InDesign (& in5)

InDesign to Animated GIF via in5

Animated GIFs are a great way to hand off an animation as a single file that works all over the web (though notably not in a PDF).

A few great use cases for animated GIFs are

  • Email newsletters (which don’t support complex content)
  • Banners & ads (when HTML5 is not needed or supported)
  • Social media images (e.g., for Twitter, Facebook, and Linkedin timelines)

Thus far, the best way for a creative to create an animated GIF was to

  1. Open Adobe Animate
  2. Create animations using tweens
  3. Export as video
  4. Open the video in Photoshop (because Animate doesn’t do a great job with the colors)
  5. Export as a GIF using the Save for Web dialog

That process is okay if you’re fairly comfortable with both Animate and Photoshop, but it’s a bit convoluted even then (created the tweened animations, especially).

I recently opened Adobe Animate, which was formerly Flash Professional, to create an animated GIF. Even though I lived in Flash Pro for years, it still took me a half hour to create a simple 125 x 125 pixel ad.

Don’t get me wrong, Animate is great if you want fine control of your animation, but sometimes that’s overkill.

Why use InDesign?

In comparison, InDesign’s animation tools are superbly easy: simply apply a motion preset (adjust if needed). No keyframes, no timeline.

If you just need some simple fades and fly-ins this InDesign workflow is ideal.

The main limitation: There hadn’t been a way to export InDesign’s animation as animated GIFs, but now there is.

How to Create an Animated GIF using InDesign

Here’s a quick outline of the steps.

  1. Create a new file in InDesign. in5 v3.5.1 comes with a convenient Social Media Image document preset.document preset from File menu
  2. Add a Motion Preset via the Animation panel (Window > Interactive > Animation). Adjust and repeat with other items if desired.
  3. (Optional) Adjust the sequencing of multiple animations using the Timing panel (Window > Interactive > Timing).
  4. Export using in5 (in5 > Easy Export Wizard).
  5. Open the exported content in Google Chrome and use the in5 Animated GIF Maker extension to record and save your GIF.

You can now share the file via email or via social network updates.

Check out the steps in the video below.

You can test this out using a free trial version of in5.

The in5 Animated GIF Maker extension is available for free in the Chrome Extension Store.

Check out the GIF Maker Extension

Get updates from Ajar Productions

Splittext id 400px

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit
Justin | Misc | Friday, October 11th, 2019

4 thoughts on “How to Create an Animated GIF with InDesign (& in5)”

  1. Michael Stopka says:

    It appears that the extension isnt working as followed by this tutorial. The In5 gif maker extension is appearing as grayed-out after I perform the In5 export and open in default Chrome browser. Strange because it becomes active (turns orange) when I flip through my other Chrome tabs. So, its like its not recognizing it as In5. I’m new to In5, so I may be doing something wrong, but I believe I followed the tutorial exactly. I’m on a mac w/ current Indesign, current In5 and current Chrome browser.

    1. Justin says:

      It looks like if you’re running the extension on a local file, you need to go into the Extensions (click on the icon and choose Manage Extensions), then go into the in5 Animated GIF Maker and choose Details, then turn on “Allow Access to File URLs.”

      I’ll see if I can turn this on by default in an upcoming version.

Leave a Reply

Your email address will not be published. Required fields are marked *