Hello you, in this video we're going to do Masking in Adobe XD...

the short version is, put a shape on top of an image, select them both...

and go 'Object', 'Mask with Shape'...

there are a few other things to editing...

both the shape and the image, that I want to share with you...

so continue watching, but if that's all you came for, you're done...

but for everyone else, let's get going.

All right, let's bring in an image...

doesn't matter, 'File', 'Import', or drag them from the Finder, into it...

like I normally do, bring this first one...

with images, often this happens, they come at this gigantic size...

if you hold 'Shift' on one of the corners, and 'Option' on a Mac...

'Alt' on a PC, you can kind of scale them down to appropriateness.

Just so you know, if you are a web designer or developer...

it's not important to get these images the correct size...

either the right resolution or the right kind of quality, before XD...

you do it exporting from XD, which we'll do later in the course...

so just bring them in their full glorious selves...

and you can export them down...

a more appropriate web design size later on...

all right, get onto masking, Dan.

So the official way is to have an image...

then draw a shape over the top of it, can be any shape, or draw a rectangle...

I'm going to make a couple of duplicates over these...

just so I can show you different ways, select them both...

the thing on top that you want to mask inside of needs to be on the top...

so you might have to right click it, and say, 'Bring to Front'...

select them both and then say...

the long way is, 'Object', and go to 'Make with Shape'...

no, says Mask with Shape even, click on that, there you go, hey presto.

So any old shape works, it doesn't matter, as long as it's on top.

The shortcut is 'Command-Shift-M'...

depending on how much images you end up doing...

the shortcut I remember somehow...

and that's 'Command-Shift-M' on a Mac, and 'Ctrl-Shift-M' on PC...

they can be any shape, you didn't even have to draw it...

could be something that somebody else has drawn, that you've imported.

Okay, let's do something crazy-ish, what have we got they didn't draw?

Okay, I didn't draw this Twitter logo...

as long as it's on the top...

which mine happens to be...

you can select it and say 'Command-Shift-M', oh, cool.

You can do your own custom one with the Pen tool as well...

you might decide that-- I'm going to select off everything...

grab the 'Pen tool', I'm going to kind of click there...

and remember, clicking and dragging for a curve...

clicking once for a corner, clicking and dragging...

it's the world's worst mask.

Select them both...

and then use your shortcut...

mine didn't work, why didn't mine work?

I didn't, I don't think I had them both selected, well, yeah I did, that's it...

so make sure they're both selected, and the shape is on top, and you can mask away.

So that is one way of masking, you kind of have two separate shapes...

and smoosh them together, often what I'll do is...

you'll have existing shapes that you want to fill...

let's say down here, I've got these kind of placeholder colors...

you can just drag straight into them...

kind of requires you to be able to kind of get the Finder window...

either Mac or PC, and just kind of have on the top of XD...

which is tricky for some people...

and you can just drag straight in here, into the space...

and it will be appropriately sized, and yeah, scaled, and in the right shape.

You can update images really easily...

by just dragging over the top of them, say you're like...

"Oh, that's great, but I need to change that one out for something else"...

just click, hold, and just drag over the top, and it will switch it out...

oh, adjusting masks, let's do that...

should have done at the beginning.

So say you want to adjust the positioning of this...

you double click it to go inside of it...

and you'll end up access to this image...

and you can, in the middle here, just click, hold, and drag it...

you can decide, actually this is the bit that I want...

and then click out when you're finished, the same as our object editing mode...

when we're doing those icons.

The next thing you might want to do is...

you might want to adjust the edge...

so double click it to go inside, and you can, if you grab the edge of it...

adjust the edge or squish it, or double click it...

and get into that object editing mode, and do some weird stuff...

look at that happy little tea smiley face...

ah, not so smiley.

All right, so that is editing your mask, it's the same with these...

where is it, scroll, scroll, scroll, this guy here...

double click it, you might decide that it's this, and you want to scale it up...

just use your Shift key...

grab one of the corners, decide that that's what you want to do...

double click off, there you go...

we're masking, and editing our mask.

All right, that is making masks...

either dragging them into existing shapes...

or selecting both of them and going to 'Object', 'Mask with Shape'...

all right, I'll see you in the next video.