Creating an Overlay Layer

mag+'s Overlay Layer adds an additional content layer on top of the other layers in a mag+ Issue. It remains on top of your layout as you swipe or navigate the content underneath.

An Overlay Layer is created like any other Vertical using a standard device template, so it can use all of mag+'s features including A- and B- layer content, Web Links, Jump Links, Popups, HTML, and more. Any transparent areas in the Overlay Layer will show through and allow the user to interact with the layout behind it.

The Overlay Layer is a great way to make a persistent navigation layer or a mask for your Mag+ Issue.

Note: The mag+ Multi-Device Export feature works with Overlay documents as well.

How to Make an Overlay Layer

How to Make an Overlay Layer

The image above shows how an Overlay Layer (the "Pull" graphic) can be used as a persistent navigation layer on an app.

1. Start a new Overlay Layer document from a mag+ template for the device you’re targeting.

Device templates are stored in the folder Mag+ > Mag+ Templates and end with the extension ".indt".

2. Design the Overlay Layer like you would any other mag+ layout.

Note: Unless using a specific color, keep the background of your frames set to "None" so there are transparent areas to see content beneath.

3. Go to the Designd Vertical panel and check the Overlay box.

4. When done, click on the "Export" button in the Designd Vertical panel.

Note: In order to export your document and have it appear correctly in the Mag+ Production Tool, you must set up your InDesign export folder to match the Issue folder in the Mag+ Production Tool. For more information on setting up an Issue folder, read the article "How to Structure the mag+ Issue Folder".

5. In the Mag+ Production Tool, the Overlay will have a special icon identifying it.

6. Apply an Overlay to a Section.

With our 6.7 Production Tool update, you can now add mutliple Overlays to your issue. Each Overlay must be assigned to a Section. You can create Section by clicking the "Add Section" button and then apply your Overlay by dragging it from the Clipboard to the Section you created. The Overlay you apply will display on top of all the subsequent verticals until you either add another Section with a new Overlay or add a Section without applying an Overlay.

7. Review the Issue by clicking on the "Review All" button in the Mag+ Production Tool.

Note: In order to review your document, you must set up a Reviewer device and configure the Mag+ Production Tool. For more information, read the articles in the section "Reviewing Your Issue".

Overlay Layer tips

  • When creating Overlay documents, you can only use the Auto master page within the InDesign layouts.
  • You can change the content of the overlay layer using popups triggered by the "In View" and "Out of View" clickable area triggers. A clickable area on a vertical can trigger an action on the overlay and vice versa. So, for instance, if you wanted a label on the overlay to change when the user arrived at a particular vertical, you would create each label as a popup on the overlay. Make the first label "initially visible" in the Popup panel. Make both popups part of the same group. Then on the vertical where you want the label to change—that is for the first popup to disappear and the new one to appear—you would have a clickable area on a vertical with the In View trigger to open the second popup, ie, popup://label2. Because they are part of the same group, opening label2 will close label1.
  • If you lock the orientation of an Issue, Overlay content will appear above the grayed out "Rotate Device" image.
  • Be sure to set the background color of frames to "None" in your Overlay InDesign document -- if a frame has a color, it won't show anything underneath.
  • Users can only interact with the Overlay Layer where there is content. If you have content on the A- layer of your Overlay that you always want visible, check the "Deactivate Double-Tap" box in the Designd Vertical panel. Otherwise, if the user double-taps the A- layer in the app and turns it off, there is no way to turn it back on.
  • If you want to use Overlay content as a pull-up menu, put content on the A- layer, with just the "tab" poking into the visible area.
  • Sharing links on an Overlay Layer will use the Sharing URL defined in the Vertical underneath it.
  • You can use $next and $previous Jump Links on the Overlay Layer and it will move relative to the position of the Vertical underneath it. For more information, read the article "Reference - URL Format for Links in Apps".


Article is closed for comments.
Powered by Zendesk