Masking layers

Tutorial Breakdown

When you need to contain design elements within a specific area or shape, masking is a powerful go-to way to make it happen. An indispensable tool for static design work, masks also unlock a radical number of animation possibilities.

In this tutorial, we’ll focus on the static aspect of masking by looking at:

  • Masking layers
  • Editing masks
  • Unmasking

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

Masking is a powerful and flexible way to get images, graphics, text to all clip within a specific area. So that you only see what appears within the shape, and anything outside of the shape does not appear. It is hidden or clipped. So for example, in our sample file here, I've got some layers that overflow beyond this gray box that we have. That gray box-- and again, I'll hide these layersthis gray box here is going to be our mask that we want to contain these other layers that are just over flowing all over the place. Now, you might be thinking, why don't we just make the image smaller, or why don't we just make these objects smaller? There are a couple of reasons. One is that we have this large text that bleeds off the edges, and two is that when it's time to animate, we can move the layers around within the mask and allow the mask to behave as sort of a window to the content inside. So in order to get these layers to be masked by that gray box, we've got to get both the box and all of the layers that we want inside selected. So I'm going to hold Shift and select all these layers here on the Layers list. And with all of those selected, we've got a button at the top of the screen on the toolbar to create a mask. So in doing so, it's going to take the bottom most layer, which is our rectangle, and it's going to make that the mask layer. It's going to make that the window through which we can see the content inside. So let's do it and see what it looks like. I'll click on that Mask button, and there we have it, all of that content is now contained within that gray box. Now, it also created a group and put all those layers within that group, and you'll notice that there's an icon on the left hand side of each layer name that's showing that it is clipped down, down, down to this mask. The mask is the layer at the bottom. It's the layer that doesn't have that symbol, because it itself is not clipped. It is the layer doing the clipping. And you can also see, if you do a right click, that it is currently a mask, because here it says unmask, and by unmasking, we remove that effect. They're all still in that group, you'll notice those little symbols disappeared, and being in the group is not reason enough for those layers to be clipped. The bottom layer must be a mask. So again, I can do a right click, I can enable that as a mask again, and there we have it. It is now behaving as a mask once again, and it is now containing, or clipping, that content that's within that group. Now, the group isn't just behaving as an organizational tool. The group is also containing which layers are affected by the mask. It's only affecting layers within that group that are above the mask. You'll notice Discover is a layer above, and Arrow is a layer above. They're not within that group, though, and neither is App UI which has all this stuff that lives outside that box. That's not being affected, because it's not in this group. Only the layers within this group are being affected by the mask. If you do want a layer within the group to ignore the mask and to appear in its entirety, for example, we've got this text that bleeds off the edges, you can do a right click on that, and you can choose to ignore the underlying mask. Now, it's still in the group, but it's not being affected the way it was being affected before. Now, I'm going to go back to normal and not ignore the underlying mask, because we do want to take advantage of the mask effect for a little animation that we're going to do next. And that animation is going to be in a separate document included in our sample files, and that brings us from one artboard to another. So you'll notice that here we've got one image and one set of text, and if I click into these layers, you could see that there are some layers that are off the edge of this artboard. They're contained within the artboard on the left, but they live to the right of the artboard. And if I click and drag, you could see that they're the layers that are going to appear on the second artboard. They're going to slide in from the right, because we're going to animate the difference between the artboard on the left and the artboard on the right. Don't worry, there's a video dedicated to animations and how to make all this work. This is simply an example, so that you can see how masks may play a part in those animations. So really, all you have to do is open up this document and hit the Play button at the top of the screen, and then you can click and drag across this image to see how that animation takes place. So there you have it. The mask is behaving as a window, and this content is sliding back and forth within that window, within that frame so to speak, so that we can achieve an effect that's contained in a specific area. So even when a mask doesn't benefit you so much in the static sense, it may benefit you tremendously in the animated sense, but we'll get more into animations in another video.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio