Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Layer Masking

Layer masking is all about containing elements in a specific area. It can be used solely for eye candy, but also for more functional purposes, like animations.

Related Links

2.1 Layer Masking

Layer masking is all about containing elements in a specific area. And it can be used for simply eye candy or for more functional purposes, such as animations. So let's see how we can use it in Studio. So I have two artboards here, Point A and Point B. In Point A, I have a couple of elements I'm trying to position these with layer masking so that I get the result from point B. So how do we do that? First, let's go ahead and move this image kind of where we want it, right here on the top. And then also move this text right here. Now, in Studio you can create a mask in two different ways. First, there is a dedicated button right here on the top tool bar, which you can get by selecting two layers. So I'm gonna select my picture and the card background. Yeah, which is this. And with both of these selected, I can click Toggle Mask and that's gonna automatically create a group for me with the elements that I selected. The Card background is now a Mask, you can see right here, it has a little indicator. And also my image has an additional icon in the form of this arrow telling me that it is masked by the element below it, okay? And if at some point I decide I don't want this layer to be a mask anymore. I can select it and I can click this little icon, or I can make it a mask again. And actually, this is the second way you can create a mask. So you simply group your elements together. You select the most bottom layer, or the one that you want to be a mask. And you either click on this button or you can right-click the element and select Mask. And that would essentially create a window through which you can look at the elements contained in that group. Now the text here, Italy, also needs to be part of my group. It needs to be masked so I'm simply gonna drag and drop it here, notice it received the same icon. If at some point I decide well maybe I don't want the text to be masked, I can right-click, and I can select ignore underlying mask. And that will now overflow outside of my mask container. But let's Keep that inside the mask. Now notice I have some text here as well. And I don't want the image to cover the text. So I'm gonna select my image and I'm gonna move it up. And notice that this image moves inside the mask, it doesn't overflow, and I can position it in anyway that I want. Now alternatively, what I can do is create a new layer that' above my card background that's exactly the size that I want. So in here if I go in you will see that I have a mask on top of the card background, and that mask is 300 by 211. So let's go ahead and create that as well. I'm gonna use my rectangle tool. 300 by 211. And I'm gonna position that in the very top like this. I'm gonna rename it to mask. We're gonna move it down below my image. This will not be used as a mask anymore, the card background, but instead I'm gonna use this mask layer. And that allows me to now really move my image anywhere that I want. A final touch would be to round off the corners here. I'm gonna say three, three, zero, zero. That's just gonna round off the top corners. Let's zoom in a little bit because we have a small discrepancy here. There we go, I just nudged that mask to the left 1 pixel. And I'm also gonna increase its width by 1 pixel here. Okay, and then we're gonna get the text and position it like this. So now we have two identical artboards, and that's how we can use layer masking in studio Now let's move on, and talk about Boolean operations. That's coming up in the next lesson.

Back to the top