Masking & Proportional Scaling in Sketch

Mark Wahlbeck
A free video tutorial from Mark Wahlbeck
CEO Devslopes | iOS | Android | Freelancing
4.3 instructor rating • 15 courses • 293,289 students

Lecture description

Learn the uses of masking in Sketch 3 as well as how to scale proportionally in your mobile app design

Learn more from the full course

Mastering Mobile App Design With Sketch 3

Learn how to design mobile apps with Sketch 3 for beginners

05:04:46 of on-demand video • Updated September 2018

  • Use Sketch 3 fluently
  • Know how to do mobile app design
  • Create designs for iOS apps and Android apps with Sketch 3
English [Auto] Everyone Caleb started with slopestyle and today we're going to be talking about something called Mass Games. And another thing called scaling. Both of which are super cool and you're going to use them in your apps. And we're going to learn how to use today to make really nice looking apps. The first one we're going to talk about is called masking and actually up at the top here of the sketch user interface there is a tool called mask and we're going to use it by first creating an art board. So go to the Insert menu click onboard and just drag a square border you know whatever size you want. And this is just to kind of just demonstrate the principle of masking this isn't what you would do for designing for an app or anything. And in order to show you what I want to show you I'm going to set this art board to have a background color. So I'm going to click that checkbox over there for background color and I'm just going to set it to kind of a light ish Gray just for the purposes of this lecture or video. I don't like calling them lectures so let's call it a video. Anyway let's go over to insert down to shape down to oval. Or again you can always press the OK. Pull up this tool and I'm going to shift to drag to create a circle and let's center it. Beautiful. So I'm going to click the boarder here and change the color of that border to white and I'm going to bump it up to maybe 15. OK. So this looks like a pretty common profile picture placeholder that you might see in an app like Instagram. There's a couple of other apps that implement this and it's a pretty common design trend to have a circular image view with a white border like that. And sometimes there's even shadows and other things but we'll get into that in the styling video which is next. So for now this is going to become our mask now a mask is kind of like a photo frame like a picture frame you'd have in your house. Anything within the mask or like the photo frame anything inside of that is going to be shown. But anything outside of that is going to get clipped off or just not be visible because of the frame. And so I can create a mask of this by putting something on top of it and then clicking the mask key. I'm going to show you this both with a shape and with a picture. And that picture will be included in the downloadable resources for this video so you can try it out for yourself. But for now let's just try it with a shape. So if I drop in let's say a star about that. So let's create a star. And currently this star is just floating over the top of this shape but to create a mask I'm going to drag it to maybe there and then I'm going to select both by holding Shift and clicking on both items to select both. Now a mask works only when an object is above it. If there is something beneath it then the bottom most layer will be the mask so don't do that. I'm going to go up here and click mask and check it out. Now our shape is hidden inside of this shape like like a picture frame. So when I drag it out it becomes kind of invisible on the outside edge. But if I drag it into the middle it's totally visible. Kind of cool but you probably noticed now that we lost our our border which we really need if we're going to make this look nice. So to fix that all we have to do is to click on our mask turn our border back on and look at that. Now our mask is back in business. But you're probably noticing that the edge over here is a little skinnier. And it just it gets fatter there on the outside of the star. But that's because our border is set to the center of the circle. So do you see how that cuts right down the middle. That's because our border is hovering right on the center of the edge of the circle to fix this. All we have to do is just click outside except it didn't do anything that's weird. Let's try that again. Click outside. There we go. And now our borders on the outside of the circle and everything inside of the circle is inside a picture frame or a mask as it is officially called. So now let's let's go in and delete that star. Get rid of it and we're going to drop a new item into this mask and that is a photo which I'm going to get from my desktop and I'm just going to click it drag it and drop it in there is my profile picture for Facebook. Not really. It's from from a certain sketch on a certain weekly television nightly show. So basically what I'm going to do is I'm going to set this image on top of the shape beneath it and then all I have to do is click both by selecting both shapes holding Shift and clicking on both. And let's make a mask and just like that our photo ends up inside of our circular frame just like you might see on Instagram or another app just like that where you have a circular photo frame masked it with a photo inside kind of just like a picture frame. Same picture frame a lot on it same anyways. So that's masking. That's how you create a mask set an object on top of another object. Select both. And then click mask and it will create a nice little container for your shapes or your images whichever you'd like to Houghs inside of that. Next up is something called proportional scaling. Now I want you to observe something if I duplicate our circular photo frame here by duplicated by pressing Commandery and dragging. I want you to watch what happens when I hold shift and drag this close watch what happens to the border. Do you notice how it stays the same thickness of 15 the entire time. So if I make it bigger it looks skinnier if I make it smaller it looks fatter. We don't want that. So to make it proportional all I have to do is click the scale button here and this is where it's really cool you can set a percentage. So I want it to be 25 percent of the original size. And look at that perfect or I can even set it to be a certain pixel with. So if I want a profile picture to be 100 pixels by 100 pixels I click OK and it magically scales the border down to the thickness it should be at that size so we know that before our circle the mask had a border thickness of 15. But now if I go into the properties of this one let's look at what it does. It's dropped down to five point three 7:6 a super exact number but that's because this app does the math for us and it auto adjust the border thickness so that it is proportional. Super cool. You can do this for all kinds of things you can do this for scaling images for scaling all kinds of things. But what I like it most for is when I have some nice theming on a certain shape and I want to reduce the size without changing the theming or without having to calculate that in my brain myself the scale tool takes care of it for us. So that's just a quick video on masking and proportional scaling. In the next video we're going to be talking all about how to make our apps look better. Awesome. So keep watching and we'll see you in the next video. This is Calixto Scott