Tip:
Highlight text to annotate it
X
Hi! I'm Emily and I'll be demonstrating a basic step-by-step guide on how to use Mag+ to create the Vox iPad app.
Mag+ is a software plugin that uses InDesign to create apps for tablet and mobile devices...
...and is free to download at magplus.com
Before we get started in InDesign, we'll want to set up our file structure.
Meticulous file structure is really important in successfully producing an iPad publication and will prevent headaches later.
So first, we need to create our publication folder.
In our instance, this will be named "Vox."
Within that folder, we'll create a publication date folder...
(Vox...November 30)
Okay. Now within that, we'll create our "assets" folder.
This is also commonly referred to as a "links" folder.
Here's where our images, videos, HTML markup or anything we place within our InDesign file will live.
Next, we'll create a folder for our InDesign documents.
Then, we'll create a folder for our "Issue Folder."
This is needed for the Mag+ software and I'll explain more about it later.
If you're collaborating with other designers, I highly recommend using Dropbox.
This way, you're working locally instead of off of a server, which can cause technical issues.
Now that we have our file structure set up, we're ready to get started designing for the iPad.
To do so, we'll use the template that came installed with the Mag+ software.
It can be found within our Applications > Mag+ Folder > Mag+ Templates > iPad (unless you're using the Retina)...
...and then Mag+ Template, for me, CS6.
Since the software relies on the template to output the design correctly, it's imperative to work only with the template.
Don't try to change the units or margins on the document.
Simply use the template out-of-the-box and everything will work much more smoothly.
Before we do anything, we need to save our document.
To help keep everything organized, we'll save it with the vertical number, publication and article name.
A vertical is a page in the iPad app. For each vertical, we have a single InDesign document.
So for TOC, we would have one InDesign document, even though it might be multiple pages.
Next, we'll direct the software to our issue folder.
If you don't see the Mag+ palette, go up to Window > Mag+ and click to activate it.
We should see a three-tiered palette. The one we're concerned with right now is "Mag+ Vertical."
We'll click folder and direct the software to our issue folder.
We'll keep Min. MIB at the highest possible and it's important to make sure everyone is working within the same MIB number.
The ID will be the same as our InDesign file name.
In this instance, it'll be "002_Vox_Music"
The next field, name, is what will appear under the vertical in the iPad app.
This should be a user-friendly name that helps give some indication of what the article is about.
We'll name this music.
For now, everything else can stay the same within the palette.
The software works with two main layers: the A-layer and the B-layer.
The A-layer is our fluid, scrolling layer. The B-layer is our background.
Here's an example.
This image exists on the B, background layer. On top, is the article text, which exists on the A layer.
I'm able to scroll in order to read the entire article.
Notice that the background image does not move.
If I double tap, you can see that the text disappears.
Back in our InDesign document, we can the layers palette.
Once again, do not rename or reorder these layers because the software relies on this to output the content correctly.
This might look intimidating, but it'll soon all make sense.
Right now, we'll focus on the layers we need to know:
B Slides-Main Content and A Main Tower- for inline body content.
On our document page, you'll see these blue lines.
These are the margins of the iPad.
Anything within the margins of this blue area is viewable in both orientations.
Anything within the margins of this orange area is viewable in portrait.
Anything within the margins of this purple area is viewable in landscape.
To better understand this, we can make the built-in iPad mockups visible.
These are found in the layers palette.
It's a good idea in the beginning to toggle these layers on-and-off...
...to help you understand how to design within the margins effectively.
Now we're ready to create a simple article, with text and a background image.
First, we'll place our background image on the "B Main Slides" layer.
Under file > place or using the "command+D" shortcut.
As you can see, this object isn't on the correct layer, so we'll drag the box next to it...
...to put it on the "B Main Slides" layer.
There. Now, we'll resize our image to get it to fit appropriately.
And we'll add a soft, light grey behind it.
In order for everything to display correctly on the iPad, it's necessary to group all objects together per layer.
There are exceptions to this, but it's a good rule of thumb in the beginning.
So we'll press "command+A" to select everything on this layer and "command+G" to group it together.
Now we're ready to insert our article text on the scrolling, "Main A tower" layer.
We'll add another light, soft grey background behind it to increase readability.
And, once again, we'll group everything on this layer together.
We're almost ready to view our design on the device.
Before we do that, we need to make sure that nothing is outside of the margins and on the pasteboard.
When you export your vertical, the software will grab any object it can find...
...regardless of whether or not it's in the margins.
So, stray objects will cause the design to display incorrectly.
To review our vertical, we'll go to the Mag+ Settings palette and select:
Push Review to Device.
If you're pushing out to your actual iPad, it should be able to find it just by clicking the "Bonjour" icon.
You'll need to be on the same WiFi network as your iPad, if you want to push out to it.
For the purposes of this demonstration, I'll be using the iOS simulator.
So, I'll need to insert my IP address.
I can find it by going to the Mag+ Reviewer app and clicking "User Settings."
I'll type everything before the :50000 in InDesign.
Now, if I click Mag+ vertical, I'll see three options.
Fast Review outputs a lo-res version of your design.
Full Review takes longer, but outputs a hi-res version of your design.
Export is when you're finished with your vertical and ready to send it to the Production Tool.
Right now, we're just concerned with fast reviewing our design.
I recommend fast reviewing your vertical as much as you can, especially if you have access to an actual device.
This will help aid your design in order to create a richer experience for your audience.
Awesome! Here's our design as it would appear on the device.
If I scroll, I'm able to read the entire article since it's on the A-layer.
Note that it also works in both orientations.
Now say that we need to break our content into multiple pages, but want to keep it all within the same vertical.
We'll go to "pages" and simply add another page.
Since we're designing for both orientations, we'll keep assigned as an "A Master" page.
When creating a publication with recurring design elements, such as folios, Master Pages are a lifesaver.
Now that we have two pages within our vertical, we can switch quickly between the pages...
...using the "Option+Page Up" and "Option+Page Down" keyboard shortcut.
To expedite this demo, I've already added content to some additional pages.
Here, you can see how additional content on multiple pages works within the same vertical.
Notice that when I scroll through each page, the content snaps neatly into place regardless of orientation.
This brings us to the second part of the tutorial: pinning.