Macworld Masterclass: Take a design from print to iPad

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.

By

  • 1 02Screen 1. Getting started
  • 2 Screen 2. Creating a folio
  • 3 Screen 3. Designing the cover
  • 4 01Screen 4. Creating new articles
  • 5 01Screen 5. Adding a panorama effect
  • 6 02Screen 6. Scaling the frame and content
  • 7 Screen 7. Bigger and better
  • 9 Screen 8. Linking video content
  • 10 Screen 9. Full-screen video
  • 11 Screen 10. Auto-playing sideshow
  • 12 Screen 11. Challenging object states
  • 13 Screen 12. On the grid
  • 14 Screen 13. Click on me
  • 15 Screen 14. Interactive contents
  • 16 Screen 15. Viewing folio files
  • More stories
Next Prev

1. Getting started

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.

Next »

Next Prev 1 02Screen

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.

 

Step 2 of 15: 2. Creating a folio

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.

 

Step 3 of 15: 3. Designing the cover

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.

 

Step 4 of 15: 4. Creating new articles

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.

 

Step 5 of 15: 5. Adding a panorama effect

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.

 

Step 6 of 15: 6. Scaling the frame and content

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.

 

Step 7 of 15: 7. Bigger and better

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.

 

Step 8 of 15: 8. Linking video content

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.

 

Step 9 of 15: 9. Full-screen video

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.

 

Step 10 of 15: 10. Auto-playing sideshow

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.

 

Step 11 of 15: 11. Challenging object states

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.

 

Step 12 of 15: 12. On the grid

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.

 

Step 13 of 15: 13. Click on me

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.

 

Step 14 of 15: 14. Interactive contents

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.

 

Step 15 of 15: 15. Viewing folio files

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.

Elsewhere on IDG sites
HP Envy x2 review: Hands-on

HP Envy x2 review: Hands-on

How Sketch and InVision have revolutionised our design workflow

How Sketch and InVision have revolutionised our design workflow

The best tech gifts for Christmas 2017

The best tech gifts for Christmas 2017

Les meilleurs jeux de société (2017)

Les meilleurs jeux de société (2017)