Adobe Digital Publishing Suite - Manual (Page 82)

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. For best results, use at least 108 effective ppi for images that are compressed during upload.
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. Using Save for Web in Photoshop is a great way to reduce file size and
strip unnecessary metadata that bloats the file size.
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.
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. A common mistake is to create larger images than necessary and then scale down the overlay frame in
InDesign.
For iPad viewers, create 1024x768 source files and folios. You can minimize folio size and production work by creating multi-rendition 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 command is especially useful for saving image files with specific pixel dimensions. When
you save images, choose None for metadata. For image sequence files in particular, metadata can increase file size unnecessarily.
In Lightroom, reduce image size by choosing File > Export, and then choose a compressed JPEG format using sRGB color space. Minimize
metadata to reduce file size. For best results, create a preset.
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 scrollable frames, consider putting an ad or basic article between the two articles. Transparency in overlays or PDF
articles can increase page load times.
For image sequences, find the right balance between the number of images and the amount of smoothness. Using too few images reduces
smoothness. Using too many images increases the folio size and increases memory usage. Avoid unnecessary images in your set of image
sequence files.
If you place PDF files in your slideshow state or scrollable frame content, use non-flattened PDF 1.4 or later to avoid white lines.
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.
Avoid running interactive objects into the bleed area. Keep interactive objects within the page size area.
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.”
Tips and guidelines
When working with overlays, choose Window > Workspace > Interactive (InDesign CS5/CS5.5) or Window > Workspaces > Digital Publishing
(InDesign CS6 or later) 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 interactivity.
When you place overlay files in InDesign, the frame size determines where you tap to activate the interactive content.
In interactive content, only basic transparency effects such as opacity and multiply are supported. Blending modes are not supported.
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.
79