Meet the Mag+ Template

All designs in Mag+ begin on a Mag+ template. This is a blank InDesign document, sized to fit the device you're designing for, and programmed to work with the plug-in to output your Mag+ design at the right resolution for that device when you export. It's crucial that you use the Mag+ template for the device you're designing for to get predictable results.

When you run the Mag+ Installers, you'll get a folder in your Applications folder called Mag+. Inside that folder, you'll find a folder called Mag+ Templates, which has design and TOC templates for each of the devices we support. Unless you're designing a pop-down TOC for your navigation menu, you'll always want to use the template marked  magplus_template_CS**.indt. If you're translating a print design, just copy and paste your content onto this template, then move it around. If you're designing from scratch, just start laying out your page, bearing in mind the unique shape, orientation control and layers of Mag+  - read on for more.

Screen_Shot_2012-09-17_at_10.31.28_PM.jpg

 

Shape of the Template

Each InDesign document represents one page in your publication, also called a vertical. Think of a vertical like a page that’s as wide as the device screen and as long as you want it to be. The template is the width of the device in landscape mode and six times as long as the height so you can have lots of A layer content scrolling over a single B layer image. If you want a second B layer slide, just add another page in your InDesign document. You can change the height of the Mag+ template, but note that it will lead to unpredictable results if you use multi-device export, so always save a copy of the template if you're going to make it shorter or longer.

The Mag+ In Design Template

 

Mag+ layers

You'll notice that when you open the template, it contains predefined layers. Objects placed on the different layers will have different behavior. If you are a Mag+ newbie we recommend starting to learn how to use the three main layers (B -Slides - Main ContentB- Slides - Pinned blocks and A - Main tower - for inline body content) and when you are ready, learn how to use the remaining popup layers to create popups.

Layers.jpg

B - Slides - Main Content

This is the main background layer. Content on this layer rotates, but does not re-orient depending on tablet orientation —it simply crops differently. So depending on the device orientation, different parts of your page are visible. In the InDesign templates that you are using there are guidelines for each orientation (landscape/portrait) and the square made up in the middle by the guidelines is the safe area. Meaning, objects within this square will always show, no matter how the reader holds the device.

Screen_Shot_2012-01-03_at_13.26.51.png 

Bp - Popup - Main Content - Popup

This layer is used to add popup objects that are anchored to a hotspot on the B - Slides - Main Content layer.

B - Slides - Pinned blocks

This layer is used for objects that you want on the background layer, but that you also want to move with the rotation of the screen when the user rotates the device so that it is always shown. Read more about Pinning.

Bp - Popup - Pinned blocks - Popup

This layer is used to add popup objects that are anchored to a hotspot on the B - Slides - Pinned blocks layer.

A - Main Tower - for inline body content

This is the free-scrolling layer that moves over the top of the B layers, and can be hidden by the reader if he/she taps twice on the screen (you can also turn off the double-tap in the plug-in). Content in this layer can also be made to snap to a particular position as it comes into view. Read more about Snapping here.

Ap - Popup - Main tower - Popup

This layer is used to add popup objects that are anchored to a hotspot on the A - Main Tower layer.

C - Clickable Areas

This layer contains hotspots. Hotspots reference selected objects placed on the main layers (B -Slides - Main ContentB- Slides - Pinned blocks and A - Main tower - for inline bode content) so that it can follow any pinning settings on the button image or text that you want your user to click. Hotspots can, for example, trigger web links or videos. By default, this layer is not shown in the layers palette. It is created when you add media or a link in the main layers. Don't add content to this layer - always click the Add Link or Add Movie buttons in the plug-in and it will create your clickable area for you with the right reference in place.

D - Media Areas

This is the layer where video and audio objects will be stored. The objects are automatically populated when you press the Add Audio or Add Video option in the Mag+ InDesign plug-in.

LayersPanelPopupFullWidth.png

 

Device layers

There are 3 device layers. These non-printing layers are just there to show you how the content will look on the device in each orientation. The Bezel layer shows both visible areas at once..

Device Landscape layer

iPad_Landscape.png

Device Portrait Layer

iPad_Portrait.png

 

If you want an object to be seen both when the device is in portrait and in landscape, make sure to place it in the safe area, designated by the purple square in the middle of the page.

 

Screen_Shot_2012-01-03_at_13.26.51.png


Transition guides

Use this layer only to drag in a guide that will force the point of transition to the next B slide. If you don't set a transition guide, the transition will happen at the bottom of the last object on that page. You can only make the transition lower, not higher, than the last bit of content on the page.

 


 

 

Other Relavant Articles

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk