Non-square, high-res DPS Table of Contents icons

When you use Adobe Digital Publishing Suite to create a tablet app, a table of contents is automatically built for the app, with one entry in the table of contents for each "article", or InDesign file, in the folio.

An icon image for each entry in the table of contents is automatically created by DPS. This automatic icon is just a shrunk-down version of a square region of the first screen of the article…usually not attractive and what you want. You can customize this icon by creating a 70 x 70 pixel PNG image. Then select the article in the Folio Builder panel and choose Article Properties. In the dialog box that appears, click the folder icon under Table of Contents Preview, and navigate to the PNG image that you saved. 

Here are 2 cool tips:

1. The PNG image can include a transparent background. This allows you to create thumbnails that appear in the table of contents as non-square icons. Be sure to save the icon as a PNG-24 image. Here are a couple examples of this:

 

2. A 70 x 70 pixel image looks fine on non-retina displays. But to make the icon look even better on high-resolution displays such as the iPad 3 and 4, create a 140 x 140 pixel image. This is particularly useful if the icon includes type or line art. When you include an icon higher than 70 pixel resolution, you'll receive the error message pictured below, but it still works. Proceed with caution and test your app to make sure performance is acceptable.