Creating (faking) a Mask Effect

We've gotten a few requests to provide masking in Mockups for those times when you want to partially obscure an object. Mockups doesn't currently provide a masking feature, but some people demonstrate the effect by flanking a center area with solid rectangles, so I thought it might be helpful to illustrate how they do this.

The idea is to:
- layout out your background (window and gray canvas) and middle levels (images)
- create the mask by flanking an empty space in the middle and grouping the mask elements
- bring the mask group to the front.

If you lock the mask group, then it also becomes possible to select the elements behind easily.

You can download the Mockups file for this demo from this page in our public Tips and Tricks project on myBalsamiq: Creating a Mask Effect. Download to play with it and see how it's made.

It's a bit of work to lay out a wireframe like that. It's kind of a brute-force method, but it might do the trick until we provide a masking feature natively. Oskar Austegard's iPad with open viewport is another good example of this technique.

Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.