14. Creating a Digital Publication
What You’ll Do
Get Started with Digital Publishing Suite
Import Articles into a Folio Publication
Set Folio and Article Properties
Introduction
In addition to creating print and interactive documents, you can also create a digital publication for use on mobile devices, such as an iPad or iPhone, as well as your desktop.
If you create a document with a primary layout, yet need another unique layout for another orientation or different device class, such as a tablet, you can create an alternate layout to create new linked pages based on an existing layout. This allows you to leverage content on the primary layout to create an alternate one. After you create a document with a primary layout, you can apply Liquid Layout options to allow page content to adapt to different aspect ratios within a device class.
Adobe Digital Publishing Suite (DPS) is a set of tools used by publishers to create, distribute, and sell interactive publications for tablet devices. The DPS fee-based solution is available at www.adobe.com under Products; the Single Edition allows for publishing to iPad. DPS tools are integrated into InDesign by adding the Folio Overlays and Folio Builder panels and Preview commands on the File menu. The Folio Overlays panel allows you to create the interactive content, while the Folio Builder panel assembles (in a container) all of the necessary files into a format compatible with tablets. After you finish a folio publication, you can preview it on a device with the Adobe Content Viewer application (available free from Adobe).
Creating Liquid Layouts
Instead of creating multiple fixed positioned layouts for every possible size and orientation, Liquid Layout allows page layout content to adapt to different page dimensions within the same category of devices, known as a device class, such as smartphones, tablets, laptops, desktops, or televisions. After you create a document with a primary layout (using a specified intent—either print, web, or digital publishing—and page size), you can apply Liquid Layout options to allow page content to adapt to different aspect ratios within a device class. Liquid Layout applies Liquid Page Rules: Off, Scale, Re-center, Object-based, Guide-based and Controlled by Master. Except for the Object-based option, all rules are applied to all elements on a page. If you need a layout for a new device class or another orientation, you need to create an alternate layout to create new pages.
Create a Liquid Layout
Click the Layout menu, and then click Liquid Layout.
♦ You can also click the Window menu, point to Interactive, and then click Liquid Layout.
Display the page you want to specify liquid layout options.
Click the Liquid Page Rule list arrow, and then select from the following options:
♦ Off. Turn off adjustment.
♦ Scale. All objects work as a group and scale proportional. For different aspect ratios, a black band may appear on top and bottom or left and right.
♦ Re-center. Objects are centered no matter the width; not resized.
♦ Object-based. Object edges are defined as fixed or fluid relative to the corresponding page edge. A filled circle pins elements as fixed while an unfilled circle pins as fluid.
♦ Guide-based. Similar to the concept of 3 & 9 slice scaling. Slice guides define a straight line across the page where elements can resize. Anything a guide touches will resize, while anything not touching will not. You add slide guides by dragging from the ruler (dashed lines), like ruler guides.
♦ Controlled by Master. Let the master determine it.
Select the Auto-Fit check box to resize an image when a graphic frame size changes. Deselect to keep the image size the same regardless of the frame change.
With the Liquid Page Rule set to Object-based, select an object (highlighted with blue edge), and then select from the following Object Constraints options:
♦ Resize with Page. Height and Width. Select to resize object’s height or width as the page’s height or width changes.
Inside the object, a spring icon appears in the middle of a dashed line with unfilled circles at each end. Deselect to lock the height or width. The circles appear filled.
Timesaver
You can click pins to toggle height and width between fixed and fluid.
♦ Pin. Top, Bottom, Left and Right. Select to pin an object edge relative to the page edge.
Outside the object, a filled circle appears at the page edge to pin it as fixed. Deselect to unpin an object as fluid. An unfilled circle appears next to the object.
Timesaver
You can click pins to toggle top, bottom, left, and right between fixed and fluid.
Creating Alternate Layouts
If you create a document with a primary layout (using a specified intent—either print, web, or digital publishing—and page size), yet need another unique layout for another orientation or different device class, you can create an alternate layout to create new linked pages based on an existing layout all in the same document. This allows you to leverage content on the primary layout to create an alternate one. When you update the primary layout, you can update the link for the alternate one to keep the content consistent. If you want to adapt the content in the layout for use in the same device class, you can use Liquid Layout options. As you create alternate layouts, it’s important to name them by target device and orientation for easy identification later. For example, iPad-H and iPad-V. InDesign creates new masters for an alternate layout and preserves the use of a primary text frame.
Create an Alternate Layout
Click the Layout menu, and then click Create Alternate Layout.
Enter a name.
The name ends with an H or V to indicate the orientation type of the page, either Horizontal or Vertical.
Click the From Source Pages list arrow, and then select the source page to base the alternate layout.
Specify the following settings:
♦ W and H Values, Preset, or Custom. Specify the Width and Height for the selected page or select a preset from the Page Size list; click Custom to create or delete a custom size.
♦ The available preset page sizes are based on the document intent.
♦ Orientation. Click the Portrait or Landscape button.
Click the Liquid Page Rule list arrow, and then select from the following options:
♦ Off. Turn off adjustment.
♦ Scale. All objects work as a group and scale proportional. For different aspect ratios, a black band may appear on top and bottom or left and right.
♦ Re-center. Objects are centered no matter the width; not resized.
♦ Guide-based. Similar to the concept of 3 & 9 slice scaling. Slice guides define a straight line across the page where elements can resize. You add slide guides by dragging from the ruler (dashed lines), like ruler guides.
♦ Object-based. Object edges are defined as fixed or fluid relative to the corresponding page edge. A filled circle pins elements as fixed while an unfilled circle pins as fluid.
♦ Preserve Existing. Let the liquid layout rules for the existing pages determine it.
Select from the following options:
♦ Link Stories. Select to link each story in the source layout to the copied stories in new layout.
♦ Copy Text Styles to New Style Group. Select to copy text styles in the source layout to a new style folder with custom mapping to new style group. This allows you to modify styles for the needs of the new layout.
♦ Smart Text Reflow. Select to turn on Smart Reflow in Type preferences.
Click OK.
Did You Know?
You can rename alternative layouts. In the Pages panel, double-click the layout name, edit the name, and then press Enter (Win) or Return (Mac).
You can shuffle alternative layout columns. In the Pages panel, drag the layout names.
Working with Alternate Layouts
After you create an alternate layout, you can view pages using the Pages panel. On the Options menu, you can use View Pages to switch between layout views: Horizontally, Vertically, and By Alternate Layout. When you view pages By Alternate Layout, columns appear for each layout with the pages shown vertically. You can use the rename layouts and shuffle columns directly in the Pages panel. Each layout has a Layout Options menu where you can access commands, including Create Alternate Layout, Delete Alternate Layout, Delete Pages, and Split Window to Compare Layouts, which makes it easy to view and compare multiple layouts at the same time in side-by-side windows.
Work with Alternate Layouts
Select the Pages panel.
♦ Click the Window menu, and then click Pages.
Click the Options button, point to View Pages, and then click By Alternate Layout.
Click the Layout Options menu, and then select from the following options:
♦ Create Alternate Layout. Select to creates a new alternate layout.
♦ Delete Alternate Layout. Select to delete the selected alternate layout.
♦ Delete Pages. Select to delete the selected pages in the alternate layout.
♦ Split Window to Compare Layouts or Unsplit Window. Select to display alternate layouts in side-by-side windows.
♦ You can also click the Split Layout View button on the bottom right-corner of the document window to split and unsplit windows.
Adjusting Layouts
If you ever need to change the page size or margins after you have already added a document page or created a master page, you can enable the Layout Adjustment option to have InDesign adjust the layout and position of elements on document and master pages. The Layout Adjustment dialog box allows you to enable the option and set other related adjustment options, such as Allow Graphics and Groups to Resize and Ignore Object and Layer Locks. The Layout Adjustment options are available for backwards compatibility and not compatible with Liquid Layout options. You need to turn off Liquid Layout to use the Layout Adjustment options.
Enable Layout Adjustment and Change Options
Click the Layout menu, and then click Liquid Layout.
Click the Options button, and then click Layout Adjustment.
Select the Enable Layout Adjustment check box.
Select from the following options:
♦ Snap Zone. Enter a distance value for snapping an object to a margin, column guide, or page boundary.
♦ Allow Graphics and Groups to Resize. Select to allow graphics and groups to resize during the adjustment.
♦ Allow Ruler Guides to Move. Select to allow ruler guides to move during the adjustment.
♦ Ignore Ruler Guide Alignments. Select to keep objects from moving along ruler guides during the adjustment.
♦ Ignore Object and Layer Locks. Select to move locked objects and layers during the adjustment.
Click OK.
Getting Started with Digital Publishing Suite
Adobe Digital Publishing Suite (DPS) is a set of tools used by larger publishers to create, distribute, and sell interactive publications for tablet devices. The DPS fee-based solution is available at www.adobe.com under Products; the Single Edition allows for publishing to iPad. DPS tools are integrated into InDesign by adding the Folio Overlays and Folio Builder panels. The Folio Overlays panel allows you to create the interactive content, while the Folio Builder panel assembles (in a container) all of the necessary files into a format compatible with tablets. You can create local or online publications. For online publications, you need an Adobe ID (available free) to access Adobe DPS and the Adobe Cloud, where documents are stored and distributed to tablets. As an InDesign user, you can use DPS to create one free online publication to try it out and share it with as many people as you want. Before you can get started, you need to download Folio Producer tools (Folio Overlays panel, Digital Publishing plug-in, and Content Viewer for Desktop) and the Folio Builder panel update for InDesign CS6 or later, and install them on your computer. When you sign in to DPS with your Adobe ID on a tablet, it allows you to download and view it.
Get Started with DPS
Select the Folio Builder panel.
♦ Click the Window menu, and then click Folio Builder.
On first use, click Download Update.
♦ If prompted to update InDesign, click the Help menu, and then click Updates.
Your browser opens, displaying an Adobe.com page to download the needed software.
Follow the on-screen instructions to download Folio Producer tools and Folio Builder panel update for InDesign CS6 or later.
Quit InDesign.
Start the Setup program for Folio Producer tools and Folio Builder panel, and then follow the on-screen instructions.
Start InDesign.
Select the Folio Builder and Folio Overlays panels to view them.
♦ Click the Window menu, and then click Folio Builder.
To sign in, click the Sign in link to connect to DPS (enter email address and password) or click the Sign up link to create an Adobe ID and DPS account.
A bulls eye appears in a circle in the upper-right corner of the Folio Builder panel.
To sign out, click the Options button, and then click Sign Out.
The bulls eye in a circle is removed in the upper-right corner of the Folio Builder panel.
To access DPS on the web, click the Options button, and then click Folio Producer.
Your browser opens, displaying the Adobe Digital Publishing Suite at Acrobat.com.
♦ To sign in to DPS online, click the Sign in link, enter email address and password, and then click Sign in.
Did You Know?
DPS adds commands to InDesign. Two DPS related menu commands—Folio Preview and Folio Preview Settings—appear on the File menu, which display a folio preview, and two—Folio Builder and Folio Overlays—appear on the Window menu, which open folio related panels.
Creating a Folio Overlay
The Folio Overlays panel allows you to create the interactive content with hyperlinks (links or buttons), slide shows, image sequences (rotating 360 effect with images), audio & video, panoramas (360 views), web content (access URLs or embed HTML), and pan & zoom for display on tablet devices. The interactive content is an overlay on top of all noninteractive elements, which are compressed into a single image in the background. When you create a publication for a tablet, known as a folio, you need to create horizontal and vertical layouts in separate InDesign documents. In a folio, you cannot mix and match orientations; it must be portrait, landscape, or dual (both for when a device rotates).
Use the Folio Overlays Panel
Select the Folio Overlays panel.
♦ Click the Window menu, and then click Folio Overlays.
Add interactivity to your document using the following:
♦ Hyperlink. Create a hyperlink using the Hyperlinks panel (as text) or the Buttons and Forms panel (as a button). In the Buttons and Forms panel, create a Go To URL.
♦ Slideshow. Create a multi-state object using the Object States panel.
♦ Image Sequence. Create a folder that contains the images for the sequence. Name the images using ascending numbers, such as image001.jpg, image002.jpg, and so on. Create a placeholder image frame.
♦ Audio & Video. Place an audio (mp3) or video (mp4 with h.264) file and set options in the Media panel. To display an audio controller, create a folder that contains a set of image buttons for play and pause, named audio_play.png and audio_pause.png.
♦ Panorama. Create a folder containing the six images that represent a cube (four outside images, top and bottom). Create a placeholder image frame.
♦ Web Content. Go to a URL (need Internet access) or embed HTML content (don’t need Internet access); use the home page, such as index.html.
See “Inserting HTML Content,” on page 378 for details.
♦ Pan & Zoom. Place an image and resize the frame to crop the image to the view area in which the content scrolls.
To create a scrolling text frame, create a text frame and a container frame. Cut the text frame and use the Paste Into command on the Edit menu to paste it into the container frame.
Select a media object frame in your document.
If necessary, click the interactivity overlay you want to create for the media object.
Specify the options in the Folio Overlays panel for the selected media object.
Options vary depending on the media object type selected.
To display all the overlays, click the Back arrow.
To display your interactive document on a tablet, select the Folio Builder panel, create a folio publication, and then add articles to it for use with DPS.
♦ See “Creating a Folio Publication,” on pages 392-393 for details.
To preview the publication on your desktop with Adobe Content Viewer, click the Preview button on the Folio Builder panel.
♦ You can also click the File menu, and then click Folio Preview.
Creating a Folio Publication
After you add interactivity to an InDesign document using the Folio Overlays panel and InDesign media tools, you can use the Folio Builder panel to assemble all of the individual InDesign files, called articles, into a format for tablet devices. The Folio Builder panel works in conjunction with Adobe Digital Publishing Suite (DPS) at acrobat.com to create, distribute, and sell interactive publications for tablet devices. You can create local or online publications. For online publications, you need an Adobe ID (available free) to access Adobe DPS and the Adobe Cloud, where documents are stored and distributed to tablets. You can use DPS to create one free online publication to try it out and share it with others. The process is easy: (1) create a new folio publication, (2) add and order articles, and (3) change folio and article properties.
Create a Folio Publication
Select the Folio Builder panel, and then sign in to use online DPS.
♦ Click the Window menu, and then click Folio Builder.
Click New on the Folio Builder panel.
Enter a name for the folio.
Click the Size list arrow, and then select a size, or enter a custom Width and Height.
Click an orientation option: Portrait Only Folio, Landscape Only Folio, or Portrait and Landscape Folio.
Click the Default Format list arrow, and then select a format for any default article, either Liquid or Static. Liquid creates HTML code that reflows in multiple platforms, while Static creates raster (bitmap) images that scale.
Click the Default JPEG Quality list arrow, and then select a quality. Higher the quality, bigger the file.
If you select Liquid, specify a default raster (bitmap) format, default resolution (ppi), and whether to ignore Object Export Settings.
Click OK.
This creates a .folio file with DPS.
♦ Click the Window menu, and then click Folio Builder.
Select the folio publication you want to use, and then click an Expand arrow to open a view.
Open the InDesign file with the article or layout you want to add.
Click Add on the Folio Builder panel to add article or layout.
Enter an article name.
Click the Format list arrow, and then select a format for any default article, either Liquid or Static. Liquid creates HTML code that reflows in multiple platforms, while Static creates raster (bitmap) images that scale.
Click the JPEG Quality list arrow, and then select a quality. Higher the quality, bigger the file.
Specify options:
♦ Liquid. Specify a default raster (bitmap) format, default resolution (ppi), and whether to ignore Object Export Settings.
♦ Static. Use for a long, single-page document (width matches device width) to scroll vertically.
Click OK, and then click Continue (don’t save document) or Save.
This updates/uploads the article to the folio.
To reorder articles, drag an article to another position; the panel list order determines the folio order.
To display all folio publications, click the Back arrow.
Importing Articles into a Folio Publication
Instead of adding one article at a time in the Folio Builder panel, you can import multiple articles all at one time. Before you can import articles, you need to set up the InDesign files (articles) according to a set of folder structure and file naming conventions. In Windows Explorer (Win) or Finder (Mac), create a folder for the folio that consists of individual article folders. Each article folder contains one (single orientation) or two (dual orientation) article documents named with a suffix of “_v” (vertical layout) or “_h” (horizontal layout), such as article_v.indd. You cannot mix and match orientations; it can only be one orientation. Each article folder can also contain a PNG file for table-of-contents thumbnails. If this file is missing, the TOC image is generated automatically. Any files you link to in InDesign do not have to be in the article folder; the links simply need to corrected linked.
Import Articles into a Folio Publication
Create a folio folder that consists of multiple article folders. Name article documents with a “_v” or “_h” suffix, where v is vertical layout and h is horizontal layout, such as article_v.indd.
In InDesign, select the Folio Builder panel.
♦ Click the Window menu, and then click Folio Builder.
Click the Expand arrow for the folio to open Articles view.
Click the Options button, and then click Import.
Click the Import a Single Article or Import Multiple Articles option.
For a single article, enter a name, and then select a Format, JPEG Quality, Raster Format, Resolution, and whether to ignore Object Export Settings.
Click the Folder icon, select the root folder for the folio, and then click OK.
Click OK.
To reorder articles, drag an article to another position; the panel list order determines the folio order.
Setting Folio and Article Properties
After you create a folio publication and add/order articles, you can change folio and article properties. You can set properties in the Folio Builder panel. Properties you can set for a folio include the publication name that appears on the tablet device and a cover image. For an article, you can set properties for the table of contents (TOC).
Set Folio and Article Properties
Select the Folio Builder panel.
♦ Click the Window menu, and then click Folio Builder.
Select the folio publication.
Click the Options button, and then click Properties.
Specify options:
♦ Name. Enter a publication name (appears on the tablet device).
♦ Size. Specify a publication size.
♦ Cover. Click the Browse button to select a Vertical and/or Horizontal image cover file.
Click OK.
Click the folio Expand arrow.
Select a folio article.
Click the Options button, and then click Properties.
Specify options:
♦ Title and Description. Enter or edit an article name for the TOC, and a brief description.
♦ Table of Contents Preview. Select a preview image.
♦ Smooth Scrolling. Use for a long, single-page document (width matches device width) to scroll vertically.
♦ Horizontal Swipe. Select to enable horizontal swipe.
♦ Byline and Kicker. Enter an author name and description.
♦ Advertisement. Select to not have the article in the TOC.
Click OK.
Previewing a Folio Publication
Before you publish a folio publication, it’s important to preview it to make sure your content looks the way you want. To view a folio publication on a desktop, tablet, or other device, you need to have the Adobe Content Viewer application installed (available free from Adobe). When you install Folio Producer tools for InDesign, the Adobe Content Viewer is automatically installed. Two menu commands are also installed for InDesign: Folio Preview and Folio Preview Settings, which you can use to set preview options.
Preview a Folio Publication
Select the Folio Builder panel.
♦ Click the Window menu, and then click Folio Builder.
Click Preview on the Folio Builder panel, and then click Preview on Desktop, if necessary.
Timesaver
Click the File menu, and then click Folio Preview.
Adobe Content Viewer opens, displaying the current folio publication.
To set folio preview settings, continue.
Click the File menu, and then click Folio Preview Settings.
Specify options:
♦ Format. Select Auto to use document setting, Liquid, or Static.
♦ Raster Format. Select Auto to use document setting, or a graphic format.
♦ JPEG Quality. Select a quality; higher the quality, better the display, bigger the file size.
♦ Ignore Object Export Options. Select to ignore option.
♦ Resolution. Select a resolution best for the device: OS & web is 72 or 96, tablets are 150, and iPhone is 300.
♦ Preview Current Layout. Select to preview the current layout.
Click OK.
