InDesign tutorial: Take a design from print to iPad

Here, we’re going to show you how simple it is to use InDesign CS5.5 to create a range of digital publications.

Intro


Here, we’re going to show you how simple it is to use InDesign CS5.5 and the beta of Adobe’s Digital Publishing Suite (DPS 1.0) to create a range of digital publications. As an example we’re going to use Points West magazine, which began life as a printed publication and then Thinkology adapted the design of the print version to suit the iPad’s relatively low resolution.

The greatest advantage of having an iPad magazine app over a traditional print publication is that you can add lots more interactivity such as videos, slideshows, interviews and music to make the experience far more engaging and exciting for the reader. Download the digital magazine for free from the iTunes App Store, go to bit.ly/eMlLAB.

1. Getting started

STEP 1

Open InDesign CS5.5 and create an interactive document at a resolution of 1,024 x 768 pixels (or 768 x 1,024 for the landscape version). CS5.5 features a new integrated panel called Folio Builder (Window > Extensions > Folio Builder). Log on to your Adobe account or create one at adobe.com.


2. Creating a folio

STEP 2

At the bottom of the Folio Builder panel, click New. The Folio will include all the articles for your app. Leave the default dimensions and hit OK. You can now create articles – each one can have both a portrait and a landscape version. These appear depending on which way the reader holds their iPad.

Advertisement. Article continues below

3. Designing the cover

STEP 3

This is the first step to building the iPad app. For the Points West project, the client wanted to mimic the look and feel of the print version, so the cover had to be adapted the new size. On the iPad, the font sizes need to be bigger; for the titles we chose a 20pt font and 16pt for the inner content. To place an image in your document, go to File > Place.


4. Creating new articles

STEP 4

Inside the Folio, click New at the bottom of the Folio Builder to create a new article. If you have the horizontal cover opened, the active document will automatically be added to the article as one of the layouts. Next, repeat this action for the vertical cover as well. By clicking on the article in the Folio Builder panel, you can see both of these layouts.


5. Adding a panorama effect

STEP 5

The Panorama effect requires a set of six related images, which all need to be in the same folder. From the Toolbar, select the Rectangle tool (F). Draw a placeholder frame. Select this frame, then open the Overlay Creator (Window > Extensions > Overlay Creator) and select Panorama.

Advertisement. Article continues below

6. Scaling the frame and content

STEP 6

In the Overlay Creator panel, click the Assets folder icon, locate the folder containing the six images for your panorama and click Open. You can scale the frame and content to fit in your layout. The Overlay Creator has a few options you can set, like First Image or the Zoom percentage.


7. Bigger and better

STEP 7

In print an article was two pages long, but due to the bigger text, larger images and extra interactive content, the iPad version runs over four pages. This includes a video. You should always save videos in an MP4 format, compatible with the iPad’s video playback system.


8. Linking video content

STEP 8

Make sure your video is in the InDesign document’s Links folder. Select File > Place, then place the movie file in the document. In the Media panel (Window > Interactive > Media), you can now select a poster image to display until the reader clicks on the video to activate it.

Advertisement. Article continues below

9. Full-screen video

STEP 9

Select the video frame and, from the Overlay Creator panel, select Audio & Video. Tick Play Full Screen and Tap To View Controller. This way, your chosen video will be able to play in full-screen mode by default and the video controller will instantly reappear when you tap on the screen.


10. Auto-playing sideshow

STEP 10

Putting an auto-playing slideshow in an advertisement will make it far more engaging. Create a new article and place the images that you want to add to the slideshow using File > Place – we’ve used four. Now select them all and use the Align panel to align them vertically and horizontally.


11. Challenging object states

STEP 11

This is easier than it sounds. Open the Object States panel (Window > Interactive > Object States) and convert the selection to a Multi-State object. In the Object States panel, specify an Object Name. It’s easy to change the slideshow settings. Simply select the Multi-State object, and then open the Overlay Creator panel.

Advertisement. Article continues below

12. On the grid

STEP 12

For another ad, we wanted to build an interactive grid with active thumbnails. To create this, place the main images in the document (File > Place). As in Step 11, open the Object States panel and convert the selection to a Multi-State object. Make sure you specify an Object Name for the thumbnails to work.


13. Click on me

STEP 13

Right-click on each thumbnail. Choose Interactive > Convert To Button. Open the Buttons panel (Window > Interactive > Buttons). Assign a name, then choose On Release. Click on the Action sign and select Go To State. Now select the Object Name from Step 12 and the state you wish to choose.


14. Interactive contents

STEP 14

For extra interactivity, we designed a grid with pictures and then assigned links to the relevant pages to each of them. Go to File > Place, then select the image you wish to use and click Open. From Window > Interactive > Buttons you can assign a link to a specific page of the app to each image.

Advertisement. Article continues below

15. Viewing folio files

STEP 15

Download Adobe Content Viewer from the iTunes App Store (go to bit.ly/lHHSAH) and sync your iPad with your computer, then download the folio. Your app is now ready for proofing. When you’ve finalised it, upload it using the Folio Producer and use DPS 1.0 (digitalpublishing.acrobat.com) to publish it to the App Store.


About the author

STEP 16

Fabio Benedetti is a designer with Thinkology. He moved to the UK in 2007 after studying Language.