InDesign tutorial: Create an interactive magazine for the iPad

Fredrik Oinonen explains how to create an InDesign layout for use in iPad apps built with the innovative Mag+ platform

Intro


Experience of publishing to tablet devices is increasingly in demand, so this tutorial aims to get you up to speed. The workflow here uses the Mag+ platform (magplus.com), which boasts a free plug-in for InDesign CS5 that converts layouts for use with an iPad-only app, built with other Mag+ tools.

One publication based on Mag+ is C Mode, an English-language iPad fashion magazine that grew out of the blog carolinesmode.com. It’s published in Stockholm by Boom, a new digital imprint of major Swedish magazine house Bonnier (bonniermagazines.se).

It was also Bonnier that developed Mag+ in collaboration with London-based design studio Berg. Though Mag+ was originally designed to produce digital versions of print magazines, Fredrik Oinonen of Bonnier says it’s also great for creating iPad-only publications.

Mag+ has now been spun off into a separate company, which you pay to publish each issue of your magazine and your app. Like Quark’s App Studio and the Single Edition version of Adobe’s Digital Publishing Solution, Mag+ doesn’t charge a per-download fee, making it suitable for free titles.

Time to Complete

2 hours

Software

InDesign CS5 or later, Photoshop, Mag+ plug-in

Step 1

STEP 1

In this tutorial (complete with screenshots in Swedish), Fredrik will start off by showing how the team at Bonnier designed the ‘Fall Colors’ editorial for C Mode issue 2. To try the tutorial with your own content, install Mag+ and open the Mag+ InDesign template from the Mag+ Essentials folder. Create your layout in InDesign as you would for a paper product, though using images and type sizes suitable for viewing on the iPad’s 1024 x 768-pixel display.

One key thing to note is that the template has an ‘A’ set of layers for scrolling content and a ‘B’ set of layers for more static content that can function like a slide. This editorial will not use scrolling, so the A-layers won’t come into play. Instead the content will appear on two ‘pages’, with the reader swiping to get from the first to the second. (Throughout, we’ll use ‘page’ in quotation marks to mean something that fills the iPad’s screen; without quotation marks, it means a page in InDesign.)


Step 2

STEP 2

All static background images go in the ‘B – Slides – main content’ layer. This layer exports everything to JPEGs, so it’s great for high-quality static background images.

Advertisement. Article continues below

Step 3

STEP 3

Small blocks of text – such as headlines, standfirsts, folios and captions – and other elements go in the ‘B – Slides – pinned blocks’ layer. This layer exports everything into PNGs, and is suitable for what Mag+ calls ‘pinned’ objects. They float into different positions when the reader rotates between landscape and portrait modes, letting you swiftly create portrait and landscape versions of layouts without designing the whole thing twice. While this pinning process does speed things up, the layouts still need to be tweaked to work in both orientations, which would require more time than we have – so we designed C Mode for portrait-mode use only.

Group your text and design elements together within the same layer to make sure the PNG looks and functions the way you want it to. You should make grouping a normal part of your design process, even if you only design for one orientation. Not grouping objects might lead to the text appearing in the wrong order.

The template also has a layer called ‘A – Main Tower – body content’ for longer blocks of body copy that scroll separately to the rest of the layout. We will not use this as all of the copy in C Mode is short, but it’s worth trying it as it will be used in most other types of publication.


Step 4

STEP 4

Having assembled these elements, we can export the first document. Open the Mag+ panel (Window > Plug-ins > Mag+) and click on the Folder button to choose your issue. Give the document an ID unique to this job. Also enter ‘1’ into the small box to the right of the ID field. This makes Mag+ aware that there are more verticals (‘pages’) connected to this article.

Set your orientation – Portrait in this case. Since we don’t have any content in the ‘A – Main Tower – body content’ layer, we also check the No A-layer box.

Click the Export button and the Mag+ plug-in will do the rest.


Step 5

STEP 5

Now it’s time to create the second vertical ‘page’ in this editorial. Create a new InDesign document from the template. Go to the Mag+ panel and make sure the ID is the same as the first ‘page’ but change the 1 (after the ID name) to a 2.

We wanted the editorial to have some interactivity so users could play around with colours (in line with the autumn colours theme). In this case, we wanted there to be eight states of the image shown above, each with different saturation levels. In Mag+, the states are based on different pages in an InDesign document, so our second InDesign document needs eight pages. As before, we placed the background images in the ‘B – Slides – main content’ layer and the text blocks in ‘B – Slides – pinned blocks’.

Advertisement. Article continues below

Step 6

STEP 6

In Mag+, interactive objects are made using the Feature Builder. Copy the image that you want to attach the interactive functionality to, and paste it into a new Photoshop document of the same size. Make sure the resolution is the same too (in our case, 132dpi).


Step 7

STEP 7

Go to Layer > New Adjustment Layer > Black & White. Use five different levels for the opacity, saving each image as a new file as you go. We used settings of 0%, 25%, 50%, 75% and 100%.


Step 8

STEP 8

Point your web browser to feature.magplus.com/en/ to open the Feature Builder. Log in using the same account you created when you registered for Mag+. Click on Images to create a new object and make it the same size as the image area in your InDesign layout. In our case it was 693 x 928 pixels. Click Next.

Advertisement. Article continues below

Step 9

STEP 9

Choose your ‘feature’ – we used Image Sequence, which allows the user to flip through images in a seamless way. Click Next and import the images you made in Photoshop by clicking on the + Add Images button. Once they’re imported, you can change their order by dragging and dropping.


Step 10

STEP 10

When your object is done, click on Export and choose a destination folder. This creates a ZIP file in that location. Unzip it.


Step 11

STEP 11

Look in the unzipped files for the Layout.png image that the Mag+ Feature Builder created and place it into your design, replacing your original image.

Make sure it’s placed at 100% and that it fits correctly in the layout.

Advertisement. Article continues below

Step 12

STEP 12

Select the image box and go to the Mag+ panel. Change the object type to HTML object. In the URL field, locate the index.html file that the Feature Builder created – it’s in the same unzipped folder.


Step 13

STEP 13

Redo steps 6 through 10 for each ‘page’ on which you want to use this feature. For issue 2 of C Mode, that meant seven of the eight features that made up our content.


Step 14

STEP 14

In Step 16 we’ll show you how we assembled the entire issue, though first let’s look at how hyperlink creation works. On the last ‘page’ of the issue we wanted to have links to take the reader directly to stockists or manufacturers of the products in the editorial. To create such links, first group together the bits of text you want to make into links.

Select the group and click on the Link button in the Add section of the Mag+ panel. This will create a blue transparent box over the group. Adjust the size of this object over just one piece of text that you want to be clickable. Only the blue area will be clickable, so make sure it’s not too small.

Advertisement. Article continues below

Step 15

STEP 15

Type the link you want readers to visit into the URL field in the Mag+ panel. Choose ‘Embedded’ in the Display In drop-down menu, so the link opens within your magazine’s app. (If you choose ‘External’, the app will close and the reader will view the link in Safari.) Repeat by pasting the blue box over each piece of text you want to make into a hyperlink and adding the right URL. Export this vertical layout to the same issue folder as the rest.


Step 16

STEP 16

Open the Mag+ Production Tool application. Drag all the vertical ‘pages’ from the Clipboard area (where your work is automatically saved) into your issue and place them in the desired order. You may need to click Refresh to see the most recent exports.

When you’re happy, create your finished issue file by clicking the Create Mib button (Mib being the Mag+ file format). There’s more on the upload process for finished issues, and about how to preview them on your iPad, at magplus.com.


About the artist: Fredrik Oinonen

STEP 17

Fredrik Oinonen has been working on print magazines such as FHM since 2001. Now art director for Bonnier Digital, he is the head designer at their new tablet imprint they call Boom Publishing. He started using Mag+ earlier this year.

Contact

bonnier.se

Advertisement. Article continues below