The finest hand-picked InDesign articles

Archive for November, 2010

The ePub format has a number of formatting restrictions. When designing documents that may one day be repurposed for ePub output, it’s in your best interest to follow some InDesign page layout “best practices”.One such “best practice” is in how capitalization is handled. It’s not uncommon for…

The set of tools you use alongside InDesign CS5 to create digital magazines for the iPad and other mobile devices is called the Digital Publishing Suite. While you can use InDesign CS5 to create eBooks and interactive PDF and SWF files, the Digital Publishing Suite requires additional steps and applications to make your digital content commercially available on mobile devices.

Design, bundle, and view.

Designing InDesign Documents

Each issue you publish consists of one or more articles, called stacks. A stack can be an ad or an article.

The iPad screen is 1024 x 768 pixels. For each article, create a horizontal and vertical document. For best results, make the horizontal document 1024×768 pixels and the vertical document 768×1024 pixels.

When you bundle the documents, the non-interactive page items are flattened into a single image file, and interactive items appear on top of the flattened image as overlays.

The Content Bundler exports a .folio file (previously called a .issue file) that can be uploaded to the iPad or, in the future, to another mobile device.

In order to communicate with InDesign, the Content Bundler requires an InDesign plugin file to be installed.

Adobe Content Viewer

The Adobe Content Viewer displays the .folio files on the iPad. Add the Adobe Content Viewer to iTunes, and then add the .folio file you created to the Content Viewer.

Each publication requires its own custom Viewer. Publishers can create single-folio Viewers in which the .folio file and Viewer are combined into a single app or multiple-folio Viewers with a library that allows customers to purchase and download issues as they become available.

Adobe Content Viewer displayed on iPad

Interactive Overlay Types

At this time, the following interactive overlays are available.

360 Viewer – The 360 Viewer displays a sequence of images, allowing you to rotate an object 360 degrees on the mobile device. The image files should have the same root name with ascending suffixes, such as Tower001.jpg, Tower002.jpg, and so on. While the 360 Viewer is designed primarily for rotating objects, you can use it as a way of progressing through any sequence of images.

Hyperlinks – Create hyperlinks that jump to a URL or another article. The URL can be displayed within the Viewer or in Safari. Use http://<URL>, navto://<filename>, or mailto:<address> formats.

Panoramas – A panorama overlay gives the impression that you’re viewing a setting from within a sphere. For example, a courtyard panorama can let you pan left and right a full 360 degrees, tilt up to see the cloudless Seattle sky, and zoom in on autumn trees.

Video – The video must be an MP4 file with h.264 encoding, compatible with Apple iTunes. Use the Play Inline setting to determine whether the video is played within its bounding area on the page or in full-screen mode.

Audio – Place an MP3 file in your document. You can also add a set of images to create a controller skin that acts as a status bar with play and pause controls.

Pan and Zoom – Display a large image in a small area and allow the user to pan and zoom the image within that area. For example, you may want users to be able to pan an 1024-by-1024 pixel image within a 200-by-200 pixel view area.

Slideshows – Combine a collection of slideshow images into a multi-state object. Then create interactive buttons that navigate through the slideshow images. Use thumbnail images to jumping to a specific slide, or use navigation buttons to move forward and backward through the slides.

Web View – Display the contents of a web page within a view area. You can specify a URL or a local HTML file.

Scrollable Frames – Similar to Pan and Zoom, only the intent is to allow only horizontal or vertical scrolling. For example, you may want to display a frame that contains only the first few steps in a set of instructions and let users scroll down to view additional steps.

Additional Features

Single-Orientation Stacks – You can create .folio files that either horizontal- or vertical-only.

InDesign offers powerful features to automate creation of content, where you can bring in data from external files and place them on your layout. For example, your client likes the new business card design and just ordered new business cards for every employee. And as is normal practice, has sent you an XLS with the employee details and an inflexible deadline.

You’ll need to jump right in!

We’ll use the layout as a template and place data from a CSV file into this layout. So save your XLS file as a CSV file.

Connect layout to data

Open the layout in InDesign. The basic layout shows the elements as you’ve designed them.

Choose Windows > Utilities > Datamerge.

From the panel menu choose Select Data Source and browse to the CSV file and click OK.Note that the first row in the CSV file is used as the column header, and they are displayed in the panel.

Now drag and drop the elements from the Data Merge panel to the layout. Or select the text that you want to replace and then double-click on the element in the data merge panel. The result should look something like this.

Save the file.

Preview the layout with actual data

You are now ready to preview the content.

In the Datamerge panel, check Preview.

Use the arrow buttons at the bottom to preview the data.

Make any adjustment that might be required.

Save the file.

Create merged document

After you have previewed all the records you can create the merged document.

To create the merged document and generate the PDF choose Export to PDF from panel menu.

TIP: Choose Create Merged document , to create InDesign document.

Select the options as they suit you. I’ll choose single record per page. After specifying the options click OK.

Specify the PDF settings and click OK.

A PDF is generated that contains the generated records.

Send the PDF for printing

Your printer (or you) should be able to use the generated PDF for printing.

Bonus tip

If required, you can use Acrobat and create a composite PDF that contains multiple business cards on each page. We’ll use Acrobat’s tile printing feature to create a combined PDF.

Open the generated PDF in Acrobat.

Choose File > Print and select the Adobe PDF printer.

Under Page handling specify the following:

Page scaling: select multiple pages

Pages per sheet: specify what suits you

Page order : specify what suits you

If you’re happy with the Preview Composite results, click OK. The PDF is generated.

Conclusion

In this small tutorial you learnt how to:

Use InDesign CS Data merge feature to automate data placement in the layout

There’s no denying that the Apple iPad is a popular and successful product. One of the things I was most intrigued by was the format that Apple chose for their eBooks (iBooks). The good news is that they went with the industry standard EPUB format, and the even better news is that InDesign exports EPUBs natively. I created my first iBook for iPad using InDesign CS5. Let’s take a look at the workflow.

1 CREATE A NEW DOCUMENTAlthough we’re creating an eBook that can be scaled and reflowed to any size the device displays, it’s probably still a good idea to create a document that more closely resembles a book. Therefore, go to File>New>Document to create a new 5.5×8.25″ document. Enable the Facing Pages and Master Text Frame checkboxes in the New Document dialog, and click OK.

2 ENABLE SMART TEXT REFLOWInDesign CS4 introduced Smart Text Reflow, and this is a perfect time to use it. This way as you write your book, InDesign will automatically add new pages as needed. Go to InDesign (PC: Edit)>Preferences>Type and make sure that the Smart Text Reflow and Limit to Master Text Frames checkboxes are enabled. Also check the Delete Empty Pages box, and click OK.

Because we enabled the Master Text Frame checkbox in the previous step, your first page will have a text frame on it, but we don’t need it. Hold down Shift-Command (PC: Shift-Ctrl), click on the page to unlock this frame, and press the Delete (PC: Backspace) key.

3 DESIGN AND PLACE YOUR COVER IMAGEYour first page will actually be your book cover and has to be one piece. That means either you create the entire image in Photoshop or Illustrator, or you create a separate InDesign document for your cover, lay it out, and File>Place it on this first page. After you’ve inserted your cover, insert four new pages after the cover by clicking the Create New Page icon at the bottom of the Pages panel (Window>Pages). Then delete the master text frames on pages 2 through 4. Note: If a warning sign pops up regarding the master text frames, click OK, ignoring this dialog.

4 CREATE HEADLINE PARAGRAPH STYLEThe creation of a headline paragraph style will be used to identify new chapters or sections in your Table of Contents (ToC), and it will also be used to dictate the beginning of a new page in the book. Hold down Shift-Command (PC: Shift-Ctrl) and double-click to insert your cursor on page 5. Create the headline the way you want it to look and then add it as a style in the Paragraph Styles panel (Window>Styles>Paragraph Styles) by Option-clicking (PC: Alt-clicking) the New Style icon, naming your style “Headline,” and clicking OK. You should also create a paragraph style for your body text.

5 PLACE YOUR FIRST INLINE GRAPHICAlthough InDesign allows you to place things anywhere you want, you need to keep everything inline after the ToC for your EPUB to work. Now, on page 5, place your cursor after the headline and go to Object>Anchored Object>Insert. From the Content drop-down menu, choose Graphic and specify a Height and Width in which you want your graphic to abide by. From the Position drop-down menu, choose Inline or Above Line and click OK. Then you can place your graphic (File>Place), or you can wait to place all your images at once—it doesn’t really matter.

6 START TYPING OR PLACING TEXTNow comes the part where you actually write your book. Click below the frame you created in the last step, press Return (PC: Enter), and select your body text paragraph style in the Paragraph Styles panel (if you don’t type a return, your headline at the top of the page will switch to your body text paragraph style, as well). You can either start typing, or you can paste text you’ve already written. If you get to the end of the page and need another page, InDesign will add more pages for you.

7 ADD HYPERLINKSTo give people a way to find out more about the things you’re writing, use hyperlinks. This support will vary by device, but the iPad can use mobile Safari to go to those links. Highlight the text in your document that you want to create a hyperlink for, and then go to the Hyperlinks panel (Window>Interactive>Hyperlinks). Click in the URL field, type your URL, and press Enter. If you see a black rectangle around the text in your InDesign document, you can make this invisible by going to Hyperlink Options in the Hyperlinks’ flyout menu, but it doesn’t show in the EPUB, so you can leave it as is.

8 CAN I INCLUDE MULTIMEDIA CONTENT?This isn’t really a step, but it’s probably one of the top five questions I get, and that is, “Can you include multimedia content in your EPUB, such as movies and animations?” The technical answer is yes; however, the problem is that you’re at the mercy of the device your EPUB will be seen on and what it supports. Although InDesign supports placing video and Flash content, the iPad isn’t currently capable of playing back this content in the iBooks app. The same goes for fonts. Although you can style your EPUB with CSS, it’s up to the device to support it.

9 GENERATE YOUR TABLE OF CONTENTSWith your text and images laid out as one continuous document, it’s time to generate the ToC. Although the ToC will be a page in your InDesign document, it won’t actually be a page in your EPUB—it will become the EPUB navigation. Choose Layout>Table of Contents, select your headline paragraph style in the Other Styles list, and click the Add button to move it into the Include Paragraph Styles list. Select a paragraph style for the title of your contents as well as the Entry Style, and click OK. Now click-and-drag your ToC on page 3. (Note: It doesn’t have to be inline and you can make the text as small as you want.)

10 EXPORT YOUR EPUBNow we’re ready to export the EPUB. First, you need to add the Author to the InDesign metadata. Do so by going to File>File Info and using the Description tab. Click OK. Next, go to File>Export For>EPUB. Choose a location for your EPUB file and click Save. You’ll see a Digital Editions Export Options dialog. In the Images category, choose High for Image Quality in the JPEG Options section. In the Contents category, enable the Include InDesign TOC Entries, Suppress Automatic Entries for Documents, and Use First Level Entries as Chapter Breaks (new in CS5) checkboxes in the Table of Contents section. Then click Export. Watch out, it’s fast!

11 TEST IT IN ADOBE DIGITAL EDITIONSOne of the things you can do to save yourself some time is to download the free Adobe Digital Editions player (www.adobe.com/products/digitaleditions/?promoid=DNRHY). This will allow you to test the look and feel of your EPUB, as well as the navigation, to make sure it does all that you want it to do before you put it on your device.

12 DRAG IT INTO ITUNESIf your EPUB is destined to go on your iPad, currently the only way to get it there manually is to sync it via iTunes. Open iTunes (Mac or PC) and then drag your exported EPUB into the Books section in the Library area on the left side.

13 ADD A COVER IMAGE AND METADATAAt this point your EPUB will work on your iPad, however, you probably want to dress it up a bit. Unfortunately, you have to do this part in iTunes. Select your EPUB and go to File>Get Info. Here you can add your cover image in the Artwork section (use the Add button) and you can add a better Title than the filename in the Info section. Also, iTunes should have picked up the Author from the InDesign document. Feel free to add any other info in the Info section and click OK.

14 DISTRIBUTE AND SYNC TO YOUR IPADYour iBook (EPUB) is now ready for the world. You can, of course, sync your new iBook to your iPad and it will appear in the iBooks app. You can also go to File>Show in Finder to go to the folder containing your updated iBook (EPUB). This is the file that you can distribute to others or submit to your publisher to be included in the iBookstore or other electronic bookstores. You can download my 25 iPad Tips iBook for free at http://terrywhite.com/techblog/archives/5179.

We’re pleased to announce a new ebook: The InDesignSecrets Guide to What’s New in InDesign CS5! With contributions by Pariah S. Burke, David Blatner, and Anne-Marie Concepcion, edited by the inimitable Terri Stone, this compendium of knowledge covers everything you need to know about how to use InDesign CS5 new features.
If you have recently upgraded […]

Writing about the new Digital Publishing Suite has been keeping me so busy that I haven’t been updating this blog with juicy InDesign tips. If you’re interested in creating books or magazines for the iPad or other devices, go to the Adobe Labs site. You can download the necessary tools, as well as the user guide and the tutorial assets. To see what kinds of questions people are asking, go to the user forum.

If you’re interested in submitting an app you create to the Apple Store, you’ll want to join the prerelease site. Go to the Adobe prerelease page and choose Digital Magazine Publishing for product. The tools on the prerelease site are updated more frequently than on the Labs site. Also, the prerelease Downloads site includes a document called “iPad Publishing Process Overview.pdf” that helps you get started with the submission process.

If you have an iPad, check out some of these apps that were created using early versions of the Digital Publishing Suite tools.

Mobile touch devices can provide a reading experience that’s better in some ways than websites or printed magazines. But the apps have to be done correctly. The “Take Color for a Spin” article in this issue takes advantage of this new format. Unfortunately, some of the other articles use a basic, flat structure when slideshows, videos, and other interactive designs would have improved the viewing experience. Then again, it’s free. Let’s hope future versions of this great magazine take better advantage of the format. (Download in iTunes)

WIRED was the first magazine to use our tools to build an iPad app. There are six issues you can buy, including the newest one with a racy cover, “100% Natural.” In all their issues, they create amazing effects. My favorite article shows 360 panoramas from within various cockpits, allowing you to zoom in on controls. After viewing that article, I firmly believe that I learned enough to fly a small plane. Don’t try to tell me otherwise. (Download in iTunes)

Cool app for photographers. Here’s the description: “DI magazine is the new interactive publication for all Photoshop, Photoshop Elements and Lightroom users. Built from the ground up specifically for the iPad, the magazine provides essential step-by-step techniques, not-to-be-missed insights into the inner workings of your editing software and inspirational folios and is designed for image makers of all skill levels and interests . . . And for a limited time, your first issue is free.” So grab it now. (Download in iTunes)

This is an application from Chile based on the print edition of Sabado magazine. This magazine has great interactive effects, but the type is a little too small to read comfortably on the iPad. (Download in iTunes)

Here, I’ll let iTunes explain it: “Download iGIZMO to get the latest in gadgets and consumer tech direct to your iPad. It’s like a magazine, website and TV show wrapped up in one, with HD video reviews and features, unbiased verdicts on all the latest kit, plus amazing 360-degree product shots and bags of interactivity. It’s your one stop shop for the tech that matters.” (Download in iTunes)

Last but not least, this one is my personal favorite. The free viewer has a quirky video from Jason Schwartzman (Bored to Death, Rushmore) that describes how to use the New Yorker app on the iPad. I love viewing this magazine on my iPad. (Download in iTunes)