GDP215

Best Practices for Creating Overlays

Source files

When creating the source assets for overlays, it helps to understand which overlays are resampled (compressed), and which ones are simply passed through during upload. The source assets of slideshows, scrollable frames, and buttons are resampled as PNG images. You can use any image format for these overlays.
The source assets of panoramas, image sequences, pan and zoom images, and audio skins are not resampled on upload—they’re passed through.
- Use either JPEG or PNG image format for these overlays. To minimize file size, use JPEG images with medium compression (50-80% range) for the source files.
Use PNG images only if the images include transparency.
Compressing overlay images and video can significantly reduce the size of the folio.
If the source article files are the same size as the folio, create the source files for panoramas, image sequences, inline videos, pan and zoom images, or audio controllers using the exact dimensions in pixels and 72 ppi.
If the source files are a different size from the folio, such as 1024x768 articles used in a 2048x1536 folio, consider creating multi-definition PDF articles that target both SD and HD iOS devices. See Creating multi-rendition PDF articles for iOS devices.
In Photoshop and Illustrator, the File > Save for Web & Devices command is especially useful for saving image files with specific pixel dimensions.
If you create memory-intensive overlays, the viewer’s performance can slow down significantly to preload these overlays. If possible, spread out the overlays in your design to avoid multiple overlays from being preloaded simultaneously.
For example, if you have two articles with nested overlays in slideshows, consider putting an ad or basic article between the two articles.
Whenever possible, give real names to your overlays to make it easier to interpret analytics data. For example, use “Twitter Link” instead of “Button 4” and “Cricket Slideshow” instead of “multi-state object 2.”

Setup

For panoramas, image sequences, audio skins, and local web content overlays, create a separate folder for overlay files. Use the Folio Overlays panel to link to this folder. If you want to create a folio that uses different assets for SD and HD iOS devices, create an HD subfolder with files that use the same names as the SD assets. Link to the folder containing the SD assets.
Avoid running interactive objects into the bleed area. Keep interactive objects within the page size area.
Keep a good amount of area in your design clear to make touch scrolling easier.

Tips and guidelines

When working with overlays, choose Window > Workspace > Interactive (InDesign CS5/CS5.5) or Window > Workspaces > Digital Publishing (InDesign CS6) to make interactive panels more accessible.
Use a consistent method to let users know which objects are interactive.
For example, you can create poster images that use icons to indicate different types of overlays.
When you place overlay files in InDesign, the frame size determines where you tap to activate the interactive content.
You can embed overlays within scrollable frames and slideshows. However, you cannot embed a slideshow within other slideshows.
In some cases, you want an image to appear over the overlay, such as a mask for a video. To do this, create a “dummy” overlay. For examples of this trick, see examples in the free DPS Tips app by Bob Bringhurst or Creating Super Overlays by Johannes Henseler.