(Magical Jingle)
Hey everybody, I'm Nathaniel Dodson from tutvid.com. Welcome right into this Adobe
XD tutorial. That's right, we're going to dabble in some user interface, user
experience design stuff. Today we're going to talk all about how to mask in Adobe XD.
It's pretty simple. I'm not going to keep you here for too long. So let's jump into XD right
now and check this thing out. Well here we are. We find ourselves in Adobe XD and we're
going to talk about masking. So the idea is we have this UI that we've been working on.
It's the "our team" portion of this app that we're building. And we have Jack and we
have Jackie. They have a few different interests and then kind of how good
they think they are at those particular interests. The point is, we need to add
photos. The little squares here in the corner are for the cities that they're from.
Jack's from Toronto. Jackie's from New York City and we need to add some photos. Now I
have these photos. If I jump out here to my finder, I can see I've got some photos. This
is Jack and Jackie. It's just going to work nicely for us cus if we cut out Jack and
Jackie, we have their photos both in one photo obviously they're fictitious characters
right? We all get that at this point. So let me show you a couple ways we can do this.
There's some easy things you can do this. That being, we have here in XD by the way,
these are just circles, right? Ellipses, ellipse shape, ellipse shape, ellipse shape.
A little square shape. Boom, easy right? Rectangle one and then of course rectangle
two. Right? Nice and easy. So let's just, let's try dragging Jack into the main photo.
So if I drag and drop them on the main photo, you can see that it crops this down to this
size. Problem here is that I don't want the image, I just want to see Jack basically.
I want to zoom right up to his face. So I'll double click on this and it's like, well you
can change the shape of the circle. That's not at all what I want. So I'm just going to
undo a bunch of times. This dragging and dropping, which is really really great, Is
going to work great for us when it comes to these smaller images. So like here I've
got the cycling right? This is the dude cycling we can drag and drop this on cycling and
boom. It positions it nicely. That's good enough for us. It's going to work. Surfing,
let's try the surfing here. We drag and drop it; Boom. Surfing looks good enough to me.
Rock climbing, where's our rock climbing shot? Here's rock climbing shot. I can drag
and drop it on rock climbing., voila. Looks great. For cooking, we got this guy pealing
a cucumber. Boom, easy. For jogging, we got some folks jogging across the Brooklyn Bridge
Pretty good. Maybe it could stand to be centered up a little bit more but I think it
works for us. And then for photography we have presumably Jackey taking a photo. So
that's super easy. It's just that easy to create a mask. The problem is obviously
for these bigger images and for the city images, we want to position them very
specifically. So how do we mask that way in XD? Well here is what you want to do.
We're going to drag this photo of the two of these into XD first. You can see it's giant
I can zoom out. It's just massive. I'm going to hold down SHIFT and the ALT key and I'm
just going to scale the image down quite a bit smaller. Kind of like this. And I'm going
to move it into place. I'm going to zoom back in here. I'm just hitting CMD/CTRL
and my plus icon. So what I'm going to do is I'm going to align it so Jack's head looks
like it's about over the circle. I can hit CMD and the SEMICOLON key. That's CTRL
SEMICOLON to make the layer disappear. I can just look. Yeah, he looks like he's lining up
pretty closely. So what I'll do. I'll hit CMD SEMICOLON just to make him disappear.
I'm going to select this circle and I'm going to cut it. So I'm going to go edit, cut. It's
going to make the circle disappear. Oh oh. Well, not really. I'm going to come up here
and hit the little eyeball to turn, uh, the photo of these two back on for Jack. And then
I'm going to paste my circle right in place. CMD/CTRL + V. And that's everything in XD
pasts right in place. So it's going to past it exactly right where it was. Now the shape
is in front. I can hold down shift and select the images well. So I've got these shapes
selected and the image selected. I can go object and choose right here, mask with
shape. Look at that. Now he's still not
perfectly centered. So is this a problem? Not really. Cus over here in our layers aria
we have this mask group which if I double click on it, well if I double-click on it there,
I have the photo here. And I can click and drag the photo however I like. In fact, I can
even scale the photo up. I think I want to do that. I want to really see Jack in his full
glory. And I'll click on the mask group. And there we go. Jack is now masked perfectly
into place. I'm going to do the same thing down here with Jackie. So I'm going to zoom
out just a touch here. And for the sake of keeping things simple, I'll just drag the
image back in one more time and we'll resize it again. I'm holding down SHIFT and ALT.
SHIFT and OPT on the Mac. And we're going to scale them down I'm going to position her
something like that. CMD or CTRL and the SEMICOLON. I need to move here up a little.
Something like so, right? I'm going to shut the layer off. I'm going to select Jackie
circle and I'm going to go edit, cut. And I'm going to turn Jackie's circle back on.
I'm sorry, Jackie's photo we're going to turn back on by hitting the little eyeball.
And then we're going to past in place, just edit, past. It's going to, you know, past in
place automatically. Hold down SHIFT, select the image and object, mask with shape.
There we go. And now we'll click into this masked group. You obviously could select
this and name it. We can say like Jackie or really, we should say like, Jack head shot
or avatar or something like that. But if we double-click to open up Jackie here, we
can select her and we can just move here up a little bit, bump her over. Make here a
little bit smaller if we think she, you know, like you want to see more of her shoulders
and everything that's going on there. Something kind of like so. And there we go, we have Jack
and Jackie masked into place. Now we can do the same exact thing with the city. So I'm
going to go ahead with my finder. I'm going to drag in NY city and just drop it on the
square for Jackie. You can see how we kind of have this weird, I don't know. It's just
being cut off. I'm going to undo that, CMD or CTRL + Z. I'm going to go back out to my
finder. I'm going to try dragging Toronto in for Jack. And that's actually not bad.
we can see the CN Towers relatively, It's relatively doable, like it works for what
we're looking at there. But with Jackie, we're going to play that same game where
we drag the photo of New York City in. We size it way down. I'm going to zoom out
here so I can see where it's going. I'm going to size it way down, I'm holding
SHIFT and ALT, SHIFT and OPT. Because I really want world trade center one, one
world trade center there to be very dominant. I don't necessarily want the
river there in front of the tower to be as you know, It doesn't need to be. Like that's
how it needs to be sort of composed. So now CMD or CTRL and the SEMICOLON to make that
go away. We will cut this square off. We'll go edit, cut. We will turn the photo of NY
City back on and we'll go edit past. Then I'll select both shapes, voila. Object, mask
with shape. And there we have it, New York City as we want it. And of course, you can
select on it, open up the mask group and we can like shift the photo over, maybe shift it
down a little bit and click away. And there is the photo of New York City just like that.
Now one other thing you can see here when we mask with the shape we don't have any
border left. There's no stroke. But when we drag and drop into a shape we do have a
little stroke left behind. If you don't like the stroke, and here you can see it's around
this square of Toronto because we dragged and dropped the image in. But this square
of New York City, no border because we just used the shape as a mask. We can select
those three shapes, right? It's right here, border. We can just uncheck it. Shut that
off. And you can see you get a nice clean shot now. I'll do the same thing here with
the Toronto square. I'll shut the border off there. And I'll come down here underneath
Jackie. I'll grab both, or all three of these circles, shut the border off for those as
well. And just like that, we've gone through and we've filled out our little UI using
nothing but masking. Both the flavor of dragging in images and dropping them
directly into shapes that we've created and also, using a shape as a mask when we
want to get some more precise positioning here in Adobe XD. So there you have it.
Told you it was pretty simple. Little dragging here and there. Maybe copy and pasting a
shape or two. But hey, no sweat off our back right? It's so powerful, so essential to know
how to do. It's just one of those things if you're going to use XD, you kind of
got to know how to do it. Would it be nice if Adobe made it possible to drag images
around when you just drag and drop an image from your finder or your operating system
explorer into a shape? Yeah, that would be nice. But there's a little work around as we
learned in this video. So, for all of this here to do with Adobe XD, uh, well actually,
I should add. If you are into Instagram make sure you follow me over on Instagram
@tutvid. With that out of the way, with that out of the way ladies and gentlemen, for
everything we covered here about shapes and copying and pasting and messing around with
images and masking stuff and why it's so stinking important here in Adobe XD. That's
it. Get it? Got it? Good. Nathaniel Dodson, tutvid.com, I'll catch you in the next one.