How To Create An Ad In Indesign

The banner above this text was made with Adobe InDesign.

Yes, InDesign. The page layout tool.

InDesign Hidden Gems

While InDesign is known forprint layout, it also has extensive interactive capabilities, including:

An Easy-to-use Animation Panel
A Timing Panel to create sequenced animation
The ability to create different Object States that change with interaction
Interactive actions for Buttons and Form Elements

Just because InDesign was originally conceived as a page layout tool, doesn't mean you have to create things that look like books.

In this article, I'll show you how use InDesign's interactive features and the in5 HTML5 export to create a web banner.

Note that you can also use these techniques to create an animated GIF.

Building the Animation in InDesign

Creating animation with InDesign is easy.

Lay out the elements as you would normally.
Open theAnimation panel (Window > Interactive > Animation).
Select an element and apply a preset.

animation panel preset

In the image above, thePreset is set toFade in.

That's all you have to do to create an animation.

In this case, I applied an animation preset to each element on the page and changed the duration of each to 0.5 seconds.

Creating an animated sequence

Then I used the Timing panel (Window > Interactive > Timing) to arrange the animation in the desired order.

animated elements arranged in the Timing panel

The two rectangles come in together (linked using the button at the bottom of the panel), then the text builds one line at a time.

Making it Responsive (optional)

While InDesign doesn't have fully responsive capabilities built in, it does have the Liquid Layout panel.

The Liquid Layout panel isn't sophisticated enough to build entire, responsive web sites (at least not easily).

However, it's powerful enough to create a responsive web banner, and it's supported by in5!

You can find the Liquid Layout panel underWindow > Interactive > Liquid Layout.

pin settings in Liquid Layout panel

Here are the Liquid Layout settings for the same Text Frame that we looked at above.

Note that it's pinned to the bottom and the right.

The elements in the top left are pinned to the top and the left.

The big text ("web banner") in the middle is set to scale with both the height and the width.

So when this browser window is scaled down to a narrow width, the elementsrespond and look like this:

responsive version

If you add Liquid Layout settings, just make sure you choose theLiquid Page Format when exporting with in5.

Also note that I usedSVG as the Text Rendering option to have text that scales with no degradation.

Update: You can also create Responsive Layouts.

Creating a Borderless Experience

There two steps to making a banner that blends seamlessly with the page.

Use a transparent background for the banner.
Ensure that no border appears around the content frame.

To create the transparent background, I selectedNone for both theBackgroundandPage colors in the in5 dialog (File > Export HTML5 with in5…).

transparent background options

The border will be handled in the next step…

Publishing an HTML5 ad to Google Ads

Updated 10/2018: in5 can now directly export to a Google Ad (formerly Adwords) package.

Check out the video below.

Embedding Content in the Page

In the example at the top of the page, I used the in5 Embed Plugin for WordPress to put the banner into the top of this post.

I set the width to 100% (so that the content would scale with the post) and selectedDisable Scrolling andHide border so that no edges would appear around the frame.

in5 embed WordPress plugin content settings

This created the borderless banner at the top of this page that blends seamlessly into the rest of the post design.

Looping the Animations

Update 5/2018: You no longer need code to loop your content. You can now use Presentation Mode to auto play and loop. As shown in the short video below.

Alternative looping methods

This isn't the only way to create looping with in5. I detailed another method in this post on creating a looping slideshow.

You can also create user-based looping with a button and that can be done completely from InDesign (no extra code).

To do so, use the Buttons and Forms panel (Window > Interactive > Buttons and Forms) to add aGo To Page action.

go to page button action

Since there's only one page in this document and the animations are set to playOn Page Load, clicking this button will cause the animations to play again.

You can test it in the live example below.

As you can see, the possibilities are endless and fairly easy to create!

Would you like to see all the source files for this web banner?
Sign up for my email list and I'll send them to you immediately.

Join the newsletter and get the source files

Success! Now check your email to confirm your subscription and get the source files for the in5 web banner.