Studio is a free screen design tool from InVision. With it, you can design, prototype, and collaborate with others on your project, creating anything from mobile apps to full-blown websites.
In this short course, you’ll learn how to use the app like a pro by working with components, complex animations, prototyping, and more. In the end, you’ll have all the knowledge you need to tackle any project with ease.
Hello and welcome to an Envato Tuts+ course. I'm Adi Purdila, and in this course, I'll show you how to use the advanced functionality of InVision Studio. If you don't know, Studio is a free screen design tool from InVision. With, it you can design, prototype and collaborate on your project from mobile apps to full blown websites. Now here's what you'll learn in this course. We'll start by having a look at layer masking and then moving on to using the four Boolean operations. In Lesson 3, we'll cover one of the biggest features of Studio, which is components. Lesson 4 will be about libraries and how you can use them to collaborate with your team. In Lesson 5, we'll do a bit of prototyping. And finally, in Lesson 6, you'll learn how to create animations and fine tune them. So we have a lot to go through and we'll kick things off with layer masking, and that's coming up.
2. Mastering InVision Studio
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.