Subscribe or Login to watch video

Login or Subscribe to watch video

29 - How to mask in Adobe XD

Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi there, in this video, we're going to look to make masks, how to create them, and then, how to edit them afterwards. We can drag them around, come back out, they're fully editable, lovely old masks. All right, let's go and make those now.


So there's two ways of masking, it's pretty easy. I've got an image that I've imported earlier. Grab the Circle tool, I'm going to drag out a perfect circle, holding 'Shift', and drag it across. Select both of them. I'm holding 'Shift', and clicking both, then go to 'Object' and go to make 'Mask with Shape'. Or there's the shortcut, 'Command-Shift-M', or 'Control-Shift-M'. And they're masked. The nice thing about it is that you can double click it and you can see, I can move my image, separate from my mask. If I need to, click out, and the mask returns. I'm going to undo that, it's kind of how I wanted it there.


The other way of doing it, is say that I have a circle to start with, and if I drag that graphic into it, so there's my extended image, actually I can just use my 'Hero-image 1', if I drag that straight into XD you can see, it becomes in the center there. Now the difference is, this one is now using like a cover option where it will expand and contract to fill inside of this, whereas the original one down here is, I can separate the mask and do different things with the image from the Mask Shape, whereas this one here, kind of fused together, they're to do with the Fill. You can't adjust it inside of here and drag it around, you need to use this method. You can delete it from there by just going to 'Fill' and just picking a 'Fill color', and it will override it.


So two shapes make, or just drag it inside of one, and they have kind of different properties. So I'm going to delete this guy here, and that's it for Masks. I'm just going to finish off our little project here. I'm going to draw something that covers there. I'm going to fill it with my color. So I'll click back, give it 'No' border. And I'm going to grab here, and just move it across a little bit. Grab the actual image and drag it across. Open up a little bit. And I'm going to bring in a bunch of images, and draw some arrows. So you can skip along now, because this is going to get boring.


I'm going to import all of the-- in case you're following along, and want to see what it looks like-- so I'm going to go 'Exercise Files', I'm going to 'Images', and I'm going to bring in all these logos here. It all appeared, all the different sizes. I'll just drag them down, so they're all on the Paste Board, and drag them all in, as I need them. And the cool thing about them being Vector or SVGs is that they're scalable. And I can double click to get inside of them. Sometimes it's easy to zoom in. Double click. I've only selected on one bit there. So, I've got it all selected now, and I'm going to grab you. Cool! That's going to be my first one. Twitter, I'm afraid you're going to have to be white as well. Holding 'Shift' to make sure they're scaled proportionately. Udemy.


What I might do for them is, ungroup it. Ungroup it, keep ungrouping it. Sometimes you need to do it a couple of times. So I can delete this one, because I just want the icon. And I'm not a fan of your new red Udemy, I like the 'U'. not in the red color maybe it's me. And same with this fellow. I'm going to ungroup a load of times. I'm going to grab you, and make him white. You'll see that these two parts here, I want that to actually be a hole in the middle. We kind of did this before, I'm going to hold 'Shift', click both of them, and I'll use this one here, the second one, minus front to cut a hole in it. And we're making icons. I need to go to 100% to make sure I'm giving them kind of a nice-ish size. And I'm not, everything's a bit big at the moment. So I'm going to turn--


You can turn your Layers panel off just to make sure you've got enough room. What I'm going to do is grab all of this, and shrink it down considerably because I've been working way too big, seemingly not too far. Now at 100%. That's kind of what I'm looking at doing. Awesome! So you go there. Make sure you're lined. Get it this way. I'm in front of my icons, here they are, and get it in the right size. Trying to work out some sort of layout for them to look like that kind of zoom in across. Skillshare is the only one that doesn't have an icon, they do, but it's weirdly unrecognizable. So, you'll have to go that side. Why? Because I want to draw some arrows. So I'm going to use just the Line tool, it's the easiest in this case.


This one's going to have a white line. Maybe 3. If you wanted a really nice arrow you might have to actually jump out and find an icon version. Here's the Eyedropper tool, steal that one, doesn't steal the straight line. Actually what I might do, instead of doing a little pointy one I'm going to do a proper little triangle. A Fill of 'white', turn the border 'off'. Click off to click on, get the whole thing. That big, actually, remember they're at 100%. Now one of the shortcuts to get 100% is 'Command 1' or 'Control 1'. They will jump out to 100% perfectly. So you, I want to shift, grab you down. Bring it across. I like you, I hold 'Shift', grab you. And I want to play with these guys, I want you. Actually I get all kind of-- go around that circle there. I might have to play around with this a little later on because you don't want to watch me tapping this thing.


So what I want to do is something like this. You've totally skipped on now, turned this video, haven't you? Dan playing with lines. That's kind of what I was going for. It's probably not quite right. Especially this one is ginomous. One little thing I'll do before I go, is I want in here, a circle, 100%. I'm going to have a border of white. Maybe 2. I've got some icons you can bring in, so 'File', 'Import', and in your 'Icons' folder, there is one called 'Mute'. 'Volume Off'. Volume Off is the one I want. Cool! I want this in here to indicate that there's a video playing, and you can unmute it. We had the video camera earlier on, but-- double click it to go inside, change the color to white. I'm going to add a little bit of text. I've got a black box for it to sit on. 'Fill', Border, 'none', Opacity, down. Get him to line up with this one, the Type tool. This is going to say I'm going to the center, this will be 'Explanation video auto playing with mute enabled', so that the user kind of knows that that's stuff in there that's happening. I've tried and put it in square brackets so that you kind of know it is not kind of marketing speak but it's kind of more just there to help the user testing go. Fill's going to be white. I'm going to leave it Helvetica because I want it to not look like it's part of the actual design, I just want it to be like a little info piece there. At the moment you can't do videos inside of XD.


All right, that's going to be it. That was a big old bit of production at the end of that, but yes, we learnt a little bit of stuff about how to do masks at the beginning. Remember, way back then. It's probably 15 minutes ago. You'll get a gold star for watching till the end. All right, on to the next video.

ALL ACCESS: $12 per Month + Cancel anytime