February 10, 2011

Want to Publish to the iPad Directly From Adobe InDesign?

It was hard for publishers to predict just how popular Apple's iPad would become. Now with over 14 million iPads sold in the first year and a new version of the iPad on the way, publishers are scrambling trying to develop iPad versions of their content to capitalize on the new wave of consumers.

Even though Adobe may be at odds with Apple regarding Flash on iOS devices, the good news is that Adobe has developed tools sanctioned by Apple to assist publishers in creating iPad versions of their content. Adobe's iPad solution is in beta form and is currently named "Digital Publishing Suite" (DPS), formerly known as the "Digital Magazine Publishing Platform" and is subject to change names many more times before it is officially released.

Adobe's iPad solution mainly consists of two applications and a set of InDesign CS5 plugins. CS4 users aren't completely left out in the cold, though it is a much more complicated process for CS4 users to prepare their layouts. Your best bet is to upgrade to CS5 so that you can take advantage of InDesign's built-in interactivity options.

The process of using Adobe's tools to create content for the iPad consists of 4 steps:

  1. Create iPad specific horizontal and vertical layouts in Adobe InDesign CS5
  2. Use the Interactive Content Overlay AIR app or InDesign CS5 extension to add interactive elements such as hyperlinks, audio, videos or photo galleries (optional)
  3. Use the Bundler AIR app to create your issue
  4. Upload your folio file to your iPad or use Adobe's Content Delivery Network to centralize distribute of content.

 

Creating iPad Specific Layouts

The iPad's resolution is 1024px by 768px. As the iPad can be viewed in either a horizontal or vertical position, layout designs are required for each orientation. The 1024 x 768 resolution is familiar to many Web designers and InDesign CS5's ability to view ruler increments in pixels makes it easier to layout designs taking pixel widths into account. The ability to create different page sizes within the same document is also helpful when creating designs for the iPad. I ended up creating two page size presets (iPad-V and iPad-H) that I could quickly access down at the bottom of the pages pallet.

An important tip to keep in mind is that the Adobe iPad Content Viewer app is design to have users navigate a multi-page InDesign file by swiping up and down on the page. The user would navigate to a different article (InDesign file) by swiping right to left. It may make sense to add small visual cues indicating the direction a user should swipe to continue reading.

Using Interactive Overlay

This next step is optional, but most users will expect some level of interactivity when viewing content on a tablet device. To add hyperlinks you can use InDesign CS5’s native Hyperlink functionality and InDesign’s Multi-State Objects panel can be used to create slideshows. If you are looking to add videos, 360 panoramas or any other advanced interactivity you would use Adobe’s Interactive Overlay AIR application (also available as an InDesign CS5 extension).

Overlay Creator

The Adobe Interactive Overlay Creator Extension in InDesign

Adobe AIR Overlay Creator

The Adobe Interactive Overlay Creator AIR application

Bundle it Up

The Adobe Bundler AIR application is used to organize your different article stacks. You use the Bundler application to add and arrange InDesign files to produce your folio.

The Bundler AIR application also lets you set metadata for each individual article. The Title is what appears in the TOC view, the Kicker would be used to describe the 'section' of the magazine, the description allows you to write a brief sub-title and the tags would be appropriate to list as topical keywords but do not perform any other functions in the viewer application.

Bundler

Adobe Bundler AIR application

Bundler AIR application Folio Stack preview

Loading the Folio File onto the iPad

First make sure that you have downloaded the latest version of Adobe's Viewer application. Note: Once you are ready for primetime and wish to begin selling your content through the iTunes store, Adobe will help you with obtaining a custom application and icon, rather than using their default viewer application.

If you are planning on submitting the Folio file to Adobe's Fulfillment server, you can just use the Bundler application to upload the final Folio file.

For testing and manually loading the Folio file you will follow the steps below:

  1. 1. Launch iTunes
  2. 2. Select the iPad and click on the Apps tab
  3. 3. Scroll down to the File Sharing section and select the Adobe Viewer App
  4. 4. Click the “Add” button to select the folio file that you produced using the Bundler application
  5. 5. Finish the iPad sync.

Loading a Folio file onto an Apple iPad

Using the Adobe Content Viewer iPad Application

Launch the Adobe Content Viewer on your iPad. You will be brought to a home screen that will show all of the available folios (issues) to view. If you recently uploaded a new folio you will first need to “Download” the folio. Once the folio file is unpackaged you can view your publication.

You can navigate between different articles by swiping the stacks to the left or right. You can navigate between pages in an article by swiping up and down.

If you want to quickly navigate between articles you can use the use the table of contents button within the application.

Table of Contents View

You can also navigate articles and see the entire folio by choosing the stack view.

Adobe Content Viewer - Article Stack View

Conclusion

The DPS toolset is still in beta, so it is important to remember that Adobe is continuing to improve on the DPS tools and the workflow process for publishing tablet-based content. Right now the focus is on the Apple iPad, however features are being added to the DPS tools to allow for table publishing to Android devices.

To help in the automation of creating iPad content, vjoon has packaged the DPS bundler tool into the K4 system. Publishers can use K4 metadata and layout variants to manage and build their iPad publications along-side their traditional print and web content.

If you have K4 or you are looking for help in developing a custom solution to automate the publishing of content to the iPad or other tablet devices, drop us a line.

Posted at 04:29 pm by Ivan Mironchuk

How can i customize Adobe Content viewer ?

Adobe has a tool called the Viewer Builder, you'll need to gain access to this tool to customize the Adobe Viewer iPad app. 

What type of project are you working on? 

Drupal Association Organization Member

Case study

Adobe Digital Publishing Suite Consulting for McGraw-Hill Education

DPCI provided Adobe Digital Publishing Suite consulting services to McGraw-Hill Education to help develop an interactive iPad application that showcases digital solutions to collegiate students and educators.

> more

All case studies


Press Release

DPCI Celebrates its 18th anniversary on April 27th, 2017. "I attribute our success to a singular focus on content technologies and on constantly looking to optimize our operations,"; states Joe Bachana, President and founder of the company. more
Alltop, all the top stories