Tutorial 2: Creating a simple folio

In this tutorial, you will create a folio and an article, preview it on desktop, and then preview it on an iPad. At the end of this lesson, here’s what your resulting one-page file should look like on the iPad.

Completed folio displayed on the iPad
A.
Landscape (horizontal) view

B.
Portrait (vertical) view

Create a folio and an article

A folio is a collection of articles. Before you begin this tutorial, please watch this video to get an overview of the Digital Publishing Suite tools.

Overview Video

Video Overview of Digital Publishing Suite Workflow

Colin Fleming
Learn all the steps required to successfully design and publish a media-rich interactive document to a range of tablet devices.

In this tutorial, you’ll open separate documents designed for vertical and horizontal layouts. Creating two layouts for each article lets users rotate the iPad to view similar content in a different orientation.

  1. In InDesign, open the Folio Builder panel. For InDesign CS5 or CS5.5, choose Window > Extensions > Folio Builder. For InDesign CS6, choose Window > Folio Builder.

    Signing in to the panel is not required. If you don’t sign in, you can create offline folios and preview them on a connected iPad (Mac OS only). One advantage of signing in is that you can upload folios to an acrobat.com server and download them to an iPad or other device by signing in to the Adobe Content Viewer app. If you’re a Professional or Enterprise subscriber, signing in is also required to create folios for a multi-folio viewer app.

  2. Click Create New Folio to create a new folio, and set the following options: Click OK.

    • Specify a folio name such as “City Guide.”

    • Click the Viewer Version number, and then specify the most recent version.

    • Leave the Orientation set to both portrait and landscape. You will create both horizontal and vertical layouts for all the articles in the folio.

    • For Default Format, choose Automatic instead of PDF. Although PDF is the preferred setting for folios you publish, we’ll choose Automatic so that we can preview the folio using the Desktop Viewer.

    • Click the folder icons in the Cover Preview section and specify the cover_v.jpg and cover_h.jpg images in the TutorialAssets > CityGuide_Folio folder.

    Creating a new folio

    Next, you’ll create an article based on an open InDesign document.

  3. If you have not already done so, unzip the TutorialAssets (.zip) file, and browse to the Meridien_Folio folder. See Tutorial setup.

  4. In InDesign, open the WiFi_h. indd and WiFi_v.indd files located in the WiFi_Article folder. If prompted, update the links and save the files in the appropriate folder.

    These two documents are the source files for the horizontal and vertical layouts of an article you’ll create.

    Note: In InDesign CS6, you can create multiple layouts within the same document, but we’re not going to explore that method in these tutorials.

  5. In the Folio Builder panel, choose New Article from the panel menu to create a new article. For Article Name, type WiFi Ad and click OK.

    Adding an article to a folio

    The article name appears in the Folio Builder panel. The article information is uploaded to the folio workspace on the web.

  6. In the Folio Builder panel, double-click the WiFi Ad article.

    Notice that only one layout appears in the layout view. You need to add the second layout.

  7. Make the other WiFi document active, and then click Add Layout in layout view to add the second layout.

    Both horizontal and vertical documents added as layouts

  8. Close the WiFi files in InDesign.

Change article properties

The Folio Builder panel includes three views: folio view, article view, and layout view.

View full size graphic
Folio view (left), Article view (center), and Layout view (right)

  1. In the Folio Builder panel, experiment with navigating through the three panel views.

    Double-click folio and article names (or click the right arrows) to drill down. Click the upper left arrow to move back up a level.

  2. In the Folio Builder panel, double-click the City Guide folio. Select the WiFi Ad article, and choose Article Properties from the Folio Builder panel menu.

    By changing the article properties, you determine the appearance of the article in the viewer.

    Notice that the Articles Properties dialog box includes a Title field. The article title appears in the viewer. The article name appears in the Folio Builder panel and in the Folio Producer. When you create links to other articles, use the article name, not the article title.

    Article Properties dialog box

  3. For Title, type Meridien Ad, select the Advertisement and Hide From TOC options, specify other metadata, and click OK.

    When you select Hide From TOC, the article does not appear in the viewer’s table of contents.

Preview the article using the Desktop Viewer

You can preview articles and folios using the Adobe Content Viewer for the Desktop (also called the “Desktop Viewer”) or the Adobe Content Viewer on a mobile device.

  1. Select the test article in the Folio Builder panel, and then click Preview.

    Note: The Desktop Viewer cannot preview PDF articles. If you did not select Automatic instead of PDF for the image format, choose File > Folio Preview to preview the layout.

  2. Press Ctrl/Command+R to rotate the orientation.

    Article displayed on Desktop Viewer

  3. Exit the Adobe Content Viewer.

You can also preview the folio on a mobile device such as an iPad by signing in to the Adobe Content Viewer using the same Adobe ID you used to sign in to the Folio Builder panel. You’ll do that in the next lesson.