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. For passthrough overlays, a common mistake is to create larger images than necessary and then scale down the overlay frame in InDesign.

Note:

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.

Note:

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 > Workspaces > Digital Publishing 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 Learn app by Bob Bringhurst.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy