Create Your First Digital Publication Using Adobe Digital Publishing Suite

A Overview for Designers

Tutorials Comments (1)

In today’s multiscreen world, it’s clear having the ability to create apps that wow people is a must. Many training resources and solutions are obviously available for developers that they can utilize when learning to create apps. For designers, there are less resources and tools to produce engaging, immersive mobile experiences. Training and tutorials on how to build for mobile that don’t rely on a lot of prerequisite coding knowledge are even more slim.  In my opinion, the best solution, is to simply jump into the process of creating for mobile, and Adobe’s design products help a designer do just that.

I wanted to share with you some important features and an overview of Adobe’s Digital Publishing products – Adobe InDesign and Adobe Digital Publishing Suite – that designers might find interesting and need to know when starting out creating digital publications for mobile devices.

Adobe Digital Publishing Suite Overview

Adobe’s Digital Publishing Suite is a full solution. There is tooling to create the products, a service for distribution, and subscription and analytics and measurement tools. These features vary on which version of the suite you pick up. The Single solution is most appropriate for small to medium sized business and one-off publications (this version is compatible with iOS only – no Android support is offered for this version of the suite). If you are looking to move a lot of training material over to iPad other other tablet devices, you’l need to look at the more pricey and feature-packed versions of the suite, Professional and Enterprise.

There are several things that you may not realize when first consider creating an digital publication with Adobe InDesign and Digital Publishing Suite. The first is that you have to have an Adobe account (which most designers have already, but just in case, you will have to register). You also need a Creative Cloud subscription to get access to the full tool suite from Adobe. On top of that, an Apple Developer account is also required in order for the app to be submitted to the store for public distribution.

That said, clients, coworkers, and customers can view the app without it having to be downloaded from the App Store. The distribution for testing and review is pretty simple. The beauty is that you can share the working files you are creating with others to look at with Adobe Content Viewer through email. The final application file that is submitted to the store is created with the App Builder is called a folio file created with InDesign. Below is a diagram explaining the process and all of the applications utilized when creating the application with InDesign.

DPS-workflow

Source: http://www.adobe.com/products/digital-publishing-suite-family/visual-overview.html

The overall tooling to create these publications is really advancing quickly. A few years ago, you had to do the time-consuming task of creating both the vertical and horizontal design layouts in separate InDesign files. However, with InDesign CS6, you can now create one InDesign document that has the vertical and horizontal layouts within the same file. In addition, the linking of text in the horizontal and vertical format becomes much easier with CS6 than with CS5.5.

pages-panel

Pages panel in CS6 within InDesign

So what are the basics of what you need to know? In InDesign, the final file format you create is called the folio. When working in InDesign, there is a folio panel you work with before the final folio file is exported and created. The folio panel window lists folios that have been created. When you click on the name of the folio, the view shows InDesign files that are the articles within that folio. Each of these articles is a separate InDesign file. For example: the cover page, the table of contents, and main content area all exist as separate linked files. This seems complicated at first, but the panel does a good job of letting you see what has been produced, helping you move through the process.

Within each InDesign file is a landscape mode and a portrait mode. When using CS6, there is one file per article. When using CS5.5, you have to create two InDesign files: one for vertical and one for horizontal layouts, unless you lock one orientation for the app.

It should be noted that there are quite a few programs and add-ons you have to download when creating an app with InDesign: Digital Publishing Suite, Adobe Content Viewer (desktop and on mobile device), InDesign Updates, Folio Panel and Folio Producer Tools. In addition to the tooling when creating an app, you have to use a standard folder structure, with a folder called folio and folders within that file for each InDesign file or article. It pays to be organized, becuase these types of publications can rely on a lot of assets and media.

folder-structure

Folder structure when creating a Folio. This example is when creating for CS5.5. CS6 would only have one Cover.indd file.

A benefit of using Digital Publishing Suite is that you can test the app you create on an iPhone and an iPad pretty easily. In order to do so, you need Adobe Content Viewer installed on the device. The app can be pushed from InDesign to the device in Adobe Content Viewer through the Folio Builder panel with the folio selected. To do this, just click on the Preview arrow and select iPhone from the folio panel. It then opens in Adobe Content Viewer. It’s easy!

Adobe Digital Publishing Technical Considerations

When creating apps for standard or retina displays, several basic technical details are important to keep in mind.

The page size that is utilized within InDesign is 1024×768 pixels. Even though the retina display of the iPad 3 is twice that resolution, you still only create layouts at 1024×768 within InDesign. When you create the folio using PDF, the 1024×768 content is simply scaled in the retina display. The creation process seems to interpolate text, raster, and vector images so the scaling looks much better than you would think possible. Even with that, though, images within overlays or panoramas will look poor if you don’t supply an HD version of them.

adobe-content-viewer

Previewing app in Adobe Content Viewer

Some more details to consider… All bitmap assets should be PNG or JPEG files using RGB color mode. All vector assets, such as .ai files, should be RGB, as well. Video can be imported and used in the project, but it has to be an MP4 file using an H.264 codec. Also, when creating your design, remember that a 6-pixel scroll bar crops the right edge of the article layout.

Another useful feature for your publications is that you can link to YouTube videos and Google Maps by importing HTML5 content into them. A small caveat: users must be connected to the Internet when viewing any HTML5 from the Web on their tablet.

Adobe Digital Publishing Interactive Features

Adobe Digital Publishing Suite offers a variety of features for creating interactive content. You can create hyperlinks with URLs, page links, or email links with buttons or text. Scrolling text/content panes can also be created. When creating scrolling text panes, the text box must be larger than the empty frame that was created. Some other neat things like slideshows, panoramas, and zooming within images can be created through the Object States panel. This panel contains interactivity options and you’ll use the Folio Overlays to decide interaction.

overlay-creator

The Overlay Creator settings panel for a slideshow is on the left and the Object States panel used for the slideshow on the right

Adobe Digital Publishing Sharing

Let’s say that you are done and ready to move on to creating the app with App Builder and DPS Folio Producer. You can create the folio and share it with others to view within Adobe Content Viewer online rather than using App Builder to put the app on the store.

Below is a visual overview of how you can share the folio file with others without having the app on the store.

dps-production-workflow

Source: http://www.adobe.com/products/digital-publishing-suite-family/visual-overview.html

Once you send a folio to the Cloud, you have to update an article in Folio Builder if changes are made on your hard drive in your folio panel window. When using App Builder, various icon sizes and splash screens need to be created and uploaded for the final delivery.

dps-app-builder-404x300

The last step before the app goes to the store is creating certificates, which can be tricky, time-consuming and pretty technical. You may need a developer colleague to help you out here, especially the first time or two. These publications are in reality apps, and as such, have the same sort of submission process as traditional iOS apps. Once the app is provided to Apple, Apple must approve the app before it can be found in the App store. If you need to make updates, you will have to reupload the folio and submit an update to the app.

Comparing Adobe DPS to iBooks Author and a little on the Kindle/Android Process

After working in Digital Publishing Suite, I spent some time in iBooks Author to see how the tools compare. If you are familiar with Keynote or iMovie, it is very easy to use iBooks Author.

Of course, since it is an Apple product, you are limited to the methods of distribution. If the clients have iOS devices, they can easily download the published file in their email and open it in GoodReader or iBooks.

I found that the widget components in iBooks Author are somewhat limited in styling and functionality, but very easy to implement, create and use in the final product. Much like InDesign, font and paragraph styling is available along with master slides. The layouts only have to be built once and they link together very easily. However, the vertical and horizontal layouts pages are limited in how they are able to change how they link to each other.

iBooks Author is obviously cost-effective since it is free. For Digital Publishing Suite with InDesign, one can purchase a single edition for one app purchase or the enterprise purchase for more than one app-to-app store. Designers can also use analytics software (not available to single-edition user) to track downloads and user interaction within the app.

Designers can create Kindle Fire apps with Adobe Digital Publishing suite to sell on Amazon. You still use App Builder and InDesign when creating the app. The difference is that you have to create a custom multi-folio viewer application (.apk) to submit to Amazon. Currently, Amazon does not support single-folio apps. The APK can also be utilized to submit to the Google Play Store. Once that is done, the rest is like riding a bike for a designer.

DPS-apk

App Builder for an APK document. Source: http://www.adobe.com/devnet/digitalpublishingsuite/articles/targeting-amazon-kindle-fire.html#articlecontentAdobe_numberedheader

It’s true that creating digital publications can be a difficult process. There are many steps, applications, and platforms that need to be considered.

I’ve found that since I have a strong understanding of design and layout, it has always been learning the technical side of the applications that I have struggled a bit with. Adobe’s design products are helping designers to create apps that have a high level of polish but don’t require a lot of programming chops. Sure, there are some limits as I have outlined here, but overall the possibilities down the road sure look good.

If you are interested in developing a digital publication for your company’s mobile learning effort, feel free to contact us.









Follow Float
The following two tabs change content below.
Heather is a UI/UX specialist for Float. Heather takes the lead on all aspects of the user interface process including design and testing. She is responsible for providing the data layer design, resources and alternative paths in order to accomplish objectives using in-depth Web and application design and development experience.

» Tutorials » Create Your First Digital Publication...
On March 2, 2013
By
, , , , , , , , , ,

One Response to Create Your First Digital Publication Using Adobe Digital Publishing Suite

  1. […] Click here 0r contact us for more information on incorporating mobile learning into your next digital publication. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

« »