Create Pop-ups in Adobe DPS

Create Pop-ups in Adobe DPS

I can’t imagine a digital magazine without pop-ups. Pop-up is a Must-have feature. In this tutorial I use layers. Layers make work with interactive elements much more easier. In a post “Tip: Layers” I wrote why and how I use them. I’ll show how to create pop-ups in  Adobe DPS.


I want to add 3 pop-up windows, 2 windows are images and 1 is a group on my page with amazing Porsche 911 Carrera 4S Cabriolet.

Create Pop-ups in Adobe DPS
I place pop-ups images on the special layer – MSO.

Create Pop-ups in Adobe DPSCreate Pop-ups in Adobe DPS

Step 1. Create 6 icons, 3 open icons N.Tsech 2014-05-13 at 18.36.27 and 3 close icons N.Tsech 2014-05-13 at 18.36.31 on the Button layer.

Create Pop-ups in Adobe DPS

Create Pop-ups in Adobe DPS

Create Pop-ups in Adobe DPS

Step 2. Grab rectangle tool (Digital Magazine Tip: Buttons Target Area) and create empty frames on top of every icon. We do this because our icons are less than 44 x 44 px (minimum target area for iOS devices).

Open buttons:
Create Pop-ups in Adobe DPS
Close buttons:
N.Tsech 2014-05-14 at 00.03.22

Step 3. Create 3 states. Group (N.Tsech 2014-05-01 at 10.25.22 + G) an image + an icon + an empty frame.

Create Pop-ups in Adobe DPS

Step 4. Move the states (Selection Tool, V Create Slideshow in Adobe DPS in 10 Easy Steps) in the place where you want them to appear.
Create Pop-ups in Adobe DPS

Step 5. On the MSO layer create an empty frame (Digital Magazine Tip: Buttons Target Area), this frame will be a blank state. I always place the blank states in the right bottom corner, it helps easily find them in any publication.
Create Pop-ups in Adobe DPS

Step 6. Open Window > Interactive > Object States.

Create Pop-ups in Adobe DPS  Create Pop-ups in Adobe DPS

Step 7. Select all 4 states just by clicking the square in the layer panel.

Create Pop-ups in Adobe DPS

Step 7. Create a multi state object.

Create Pop-ups in Adobe DPS

Create Pop-ups in Adobe DPS

Create buttons

Step 8. Open Window > Interactive > Buttons and Forms.

Create Pop-ups in Adobe DPS Create Pop-ups in Adobe DPS

Step 9. Select the first frame and convert it into a button.

Create Pop-ups in Adobe DPS

Step 10. Click Actions > Go To Next State.

Create Pop-ups in Adobe DPS

Step 11. Select the right state.

Create Pop-ups in Adobe DPS

Repeat for other open-buttons.

Step 12. Select the second state in MSO panel.

Create Pop-ups in Adobe DPS

Step 13. Select the button-frame (Selection Tool, V Create Slideshow in Adobe DPS in 10 Easy Steps) or in layer panel.

Create Pop-ups in Adobe DPS

Step 14. Convert the frame into button.

Create Pop-ups in Adobe DPS

Step 15. Click Actions > Go To Next State.

Create Pop-ups in Adobe DPS

Step 16. Select the blank state.

Create Pop-ups in Adobe DPS

Repeat for other 2 close buttons.

Step 17. Preview on iPad.

Works fine!

Create Pop-ups in Adobe DPS

Follow me  https://twitter.com/n_tsech  http://www.pinterest.com/MagPlanet/boards/

Advertisements