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

How to Build a Drop Down Menu in Adobe InDesign

An expandable menu is a great way to collapse content that is only needed some of the time. Hiding the navigation helps the user focus on the content.

drop down menu in InDesign

Click to see a larger image.

This sample article from the InDesign UX Design Patterns guide details the steps to creating a drop-down menu.

How to Build an Expandable Menu

  1. On a Master page, create an MSO with an “empty” state (see the Modal Dialog in the full guide for details on this step).
  2. Build the menu background and buttons inside the “active” state of the MSO.
  3. Add Go to Page (or Next/Back, if you prefer) actions to each button. You may also want to add a Go to (empty) State
  4. Add an action to trigger the hiding and showing of the menu. If you have a single “toggle menu” button and a two-state MSO, you can use Go to Next State
  5. Apply the Master page to the pages where you want the menu to appear.

* Yes, a button can have multiple actions. 🙂

The Extra Mile

You can also create a sequenced animation within the menu state of the MSO to visually “build” the menu onto the screen.

Compatibility

in5, FXL ePub, PO.

Interactive PDF cannot be used because it does not support MSOs.

Tip: If you absolutely have to create a PDF-compatible version, you can use hide and show buttons.

The Magic Way to Create a Menu

The Menu Builder Wizard that comes with in5 makes this entire process very easy (it even adds the button actions). Check it out in the video below.

More UX Design Patterns for InDesign

InDesign UX Design Patterns full guide (cover image)Do you want to learn how to create more working User Experience (UX) and User Interface (UI) elements from InDesign without coding?

Check out the complete InDesign UX Design Patterns guide (it’s free with an email sign-up).

Get the guide

in5 v3 is here – CC 2017 compatible, subscription plans, better output

in5 version 3 is here

InDesign CC 2017 compatible

in5 version 3 has a completely re-designed user interface and works seamlessly with InDesign CC 2017.

Better output

Here are some of the new features that are available right away.

  • Live HTML tables and columns (video).
  • Fully-rendered SVG tables, paragraph rules, and paragraph shading.
  • With a Pro subscription, you can now save your export settings as an Export Preset and reuse them (video).
  • Multi-page web output that will create an HTML file for every page in your InDesign document.
svg tables now render cell backgrounds and table strokes

SVG table rendering – Old version vs. New version

Flexible subscription licensing

The new subscription licenses are designed to work with CC subscriptions (so you’ll automatically be activated when you install a newer version of InDesign).

The new in5 subscription plans will let you:

  • Activate all versions of InDesign on your system simultaneously.
  • Easily move from one computer to another.
  • Deactivate one employee and transfer the license to another employee.

You can manage your license remotely from a secure online profile (i.e., deactivate a machine that you’re not using and move to a new one, even if you don’t have access to the old machine).

screenshot of online account user management

Online portal let’s you manage users and remotely deactivate

 

You can choose to be billed monthly, or get a discount to be billed annually.

The subscription plans also offer multiple tiers, so you can get exactly the level of features that suit you. For example,

  • The Starter Plan will come with all the basic features within in5.
  • The Pro plan will give you power features, like the ability to save and reuse export settings across InDesign documents.
  • The Elite plan will give you the ability to script and automate in5.

Migration discounts

You’ll get a big discount off the first year if you have a serial number from a previous version of in5.

Check out the new version of in5