Creating Documents and The Folio Builder Panel with The Digital Publishing Suite

• by Mark-Anthony
• in Blog Tutorials
• posted January 24, 2012

Last week, I discussed how to get started with the digital publishing suite and pointed out various tools, plugins and apps that you will need to begin designing and publishing your folios within the DPS. This week, I’ll be covering:

• Creating Web Intent Documents
• Design Considerations
• Page Navigation 
• Folder Structure and
• The Folio Builder Panel 

When planning your DPS document, it is important to understand how the user will be reading your document. You can create both vertical and horizontal layouts in the DPS, which is indicated by a _v for vertical and _h for horizontal. (ie: name_v.indd and name_h.indd) It is customary to save both layouts for the particular article in the same folder. The reason that you may want to create both layout styles is because your device can display publications in both orientations and your user may have a particular preference for a reading orientation as well.

 

Creating a new document:

Let’s begin by launching InDesign.

Go to New > Document

Select Web > 1024px x 768px landscape (for iPad) and set your margins to 0.

You may save this as a preset for future landscape (horizontal) layouts for iPad publications.

­

 

Setting Up Viewer App Guides: 

After creating your document, you may want to set some margins in place. Some bounding areas that are good to know are the areas that within the viewer app of the DPS. These areas are restricted for things like the back button, home button, table of contents (TOC), scroll bars and page navigation. Let’s create these guides before we begin with our layout so that we are aware of the amount of design real estate we have available. *You may place artwork within these areas but it is important to know that these are also hot spot areas, which the user may tab to bring up a navigation tool within the viewer app.

First, let’s make two sets of horizontal guides that are 44px from the top and bottom of the page. The area between the top guide and the top of the page is where the home and back buttons, as well as the TOC are placed in the viewer app. The area between the bottom guide and bottom of the page is where the page navigation is placed.

To create guides, you must first bring up your rulers. View > Show Rulers (CMD + R). Then, place your cursor over top of the horizontal ruler and click + drag a guide on to the page. You will see a position indicator beside your cursor that lets you know the distance of the guide you are creating. If it is a bit off, you can also look to your control panel under the menu bar and type in “44px” in the Y-axis field for a more precise positioning of your guide.

Top and Bottom guide = 44px.

Next, I will create a vertical guide on the far right of the page at 6px. This is where the scroll bar for my viewer app is placed. Drag a guide out from your vertical ruler on to the page. To get an accurate positioning, which is 6px from the far right of the page, in the control panel; type “1024-6px” in the X-axis and InDesign will position your guide at 1018px over to the right of the page.

Create one last horizontal guide using the subtraction method above for the guide at the bottom of the page. Drag a guide from the horizontal ruler, place it on the page and type “768-44px” and hit the TAB key. InDesign will place the bottom guide at 724px for you at the bottom of the page.

*Remember to keep your guide selected or select the guide with your selection arrow in order to reposition it on the page.

 

Navigation:

When you’re designing with the DPS, it is also important to know that your user will be interacting differently with your content as apposed to a traditional print document. The user will be reading the content of an article vertically. Each gap between the pages is considered to be a stopping point, which snaps between pages when viewing in the content viewer. The gaps that you see between the pages in InDesign will go away once you publish the DPS folio so creating a design that flows vertically throughout your article is a good option to consider.

 

Page Flow and Navigating Through a Publication:

When reading a DPS publication, your viewer will be reading individual articles vertically.
*Below is a flow chart that shows how a folio is set up within the DPS. Feature = Feature Article and Advert = Advertisement. 

When a user reads your publication, they will be navigating through different articles by swiping horizontally while reading the content of a specific article vertically. In the above flow chart you will notice how a user will browse your publication. (ie: Horizontal swipe = Cover > Article #1 > Article #2 >Article #3 > Advertisement etc…) Once the user views and stops on an article of interest, they will begin to swipe vertically to read the accompanying pages of the selected article.

 

Folder Structure:

When preparing your folders and files for your DPS publication, it is good practice to organize your files, links and extensions in an orderly fashion. This will, not only help you locate your files easily but it will ensure that all your files are properly linked and in the proper structure, once it is time to publish your document.

First, create a folder for the Publication. Within that folder, you can create separate folders for each issue of the publication. (ie: Publication Folder = DPS Magazine. Issue Folder(s) = January, February, March etc…) Within each issue folder will also be individual folders for each article of the folio/issue. (ie: January Folder > Article #1, 2, 3 etc…) and finally, within each article folder will be the appropriate horizontal and vertical InDesign file layout(s) and a “Links” folder for all your images, audio, video and any other interactive elements pertaining to that article.

 

Folio Builder:

Once you have created your article file(s) you will now begin to add each article of your folio through the Folio Builder Panel. You can find the folio builder under  Window > Extensions > Folio Builder.

Once you open up the folio builder, you will be asked to sign in with your Adobe ID that you received last week. Once you sign in, you will be able to create your folio.

*Note: with an unprovisioned account (non subscription), you will only be allowed to create one folio at a time. If you have a provisioned account (subscription), you will be able to upload multiple folios at a time.

At the bottom of the folio builder panel you can click on the “new” button to create a new folio aka publication issue. You may also create a new folio from the fly out menu located at the top right corner of the folio builder panel.

Once you click “new”, you can enter information pertaining to the folio such as, the issue name, size (based on device resolution), image format, and image quality.

 

Adding Articles to the Folio Builder:

Before you begin adding articles to the folio builder, you must consider the structure of your layout and how you are going to organize the articles of the issue within the publication. I always recommend sketching out your ideas and creating a flow chart to make things easier. If you are using the basic Adobe ID account, there is no way for you to reorder the articles within the folio panel, other than removing the articles and importing them again in the correct order. However, if you have a paid subscription, there are methods for organizing your articles online before you publish your folio.

To add a new article to the folio builder, you can do so in one of two ways.

1) You can have a document open within InDesign, click inside of the folio issue via the folio builder and click “add.”

 

Or, you may also:

2) Import an article into the folio builder via the fly out menu.

Once you click “import” you can choose whether you’d like to import single articles or multiple articles. You can give the article a name and search for the location of the article, which you would like to import.

Click the folder icon beside “location” to browse your HDD for the imported article.

*Note: depending on how complex the article or size, adding articles may take a few minutes to upload, also depending on your Internets connection speed.

 

Previewing Your Folio:

Let’s preview how a folio will flow and navigate through the content viewer after it is published. To preview your DPS publication through the content viewer, go to:

Window > Extensions > Overlay Creator.

In the Overlay Creator, go to the bottom of the panel, you can click on the “preview” button.

You may also select the folio within the Folio Builder Panel and select “preview” at the bottom of the panel.

 

Play the video and see how my DPS folio flows.

 

Setting Folio Options:

There are several features of a folio that you can configure from the folio panel. Select the issue folio in the folio builder panel until it highlights in blue and then click on the fly out menu and select “properties.”

Once you select properties, you can give the publication a name, and add poster art for the vertical and horizontal cover of the issue’s for the viewer app.

*You can create these thumbnails by exporting your cover page document as a .jpg with InDesign or create a custom thumbnail in Photoshop or Illustrator.

When you have finished adding the cover art thumbnails, click “ok” and preview your folio on your device via the content viewer app. You will now see a preview thumbnail of the publication on the home screen.

 

Sharing your Folio(s):

If you want to share your folio(s) with another person who has a tablet with the content viewer app installed and an Adobe ID, you can also do this from the folio panel.

Click on the fly out menu of the folio builder panel and select “share”.

You can now enter the email (Adobe ID) of the user you wish to share your folio with and add a brief message if you like.

The share option is a great way for working with your clients. You can also show your coworkers and collaborators of the publication your progress and receive feedback. They can download the publication and view it on their device as if they had purchased the publication and interact with it.

When you have finished filling out the share data, you will now see a share icon visible on the right of the folio publication tab in the folio builder panel.

 

Article Properties:

Article properties are meta data that must be filled out before publishing your folio. Some of the information is similar to the publication properties while some are much different.

Click inside the publication folio in the folio panel, select an article and choose “properties” from the fly out menu.

You will need to provide meta data for all of your articles within your publication.
Begin by entering a title, description, and choose an image thumbnail. You can also adjust whether you’d like smooth scrolling or the default, snap to page. You can initialize horizontal scrolling only, which prevents vertical scrolling throughout the article. You may also enter byline information for the author of the article, a “kicker” which relates to the section or category of the publication that the article is associated with and you may choose if the article selected is an advertisement.

The above information is necessary for the table of contents that will be automatically generated for the folio. Advertisements will not have a table of content page listing in the folio.

You may also commit a few other options through the fly out menu such as updating articles, renaming articles, deleting and importing articles.

 

Conclusion:

So, we’ve created a web intent document suitable for our intended tablet device (iPad), covered some design considerations regarding layout and user navigation as well as explored the folio builder panel and some of the various options and functions that it provides. Next week, I will take a look at the Overlay Creator and apply various forms interactivity within a document, such as in-app and external hyperlinks, buttons, scrollable content, slideshows, and more!

M.