Badges and avatars are common design elements when it comes to creating screen layouts. Learn how easy it is to turn a shape into a mask with what seems to be a single mouse click.
- [Instructor] Creating masks inside of Experience Design is actually dead simple. You just need two objects and one goes over the other and creates a mask and it's literally a one-click process, so let's take look at how all that works. So, open up a brand new document inside of XD. In this case, I've opened up an art board that's iPhone six seven and what I want to do is import an image so we're going to pop over to our chapter three download and I'm just going to drag the warrior one image in here, just like that.
Now all you need to do is use a vector shape, that's what you use to mask, you can use the square or the rectangle, you can use the ellipse and you can use the pen tool if you want to draw squiggly shapes. We're going to create an avatar here for this guy. So I'm going to put the center of the drawing point right on his nose and with the option shift keys all down, you guys on PC that would be alt shift. Just drag out a circle, that draws out perfect circle, and then you come over to the selection tools, select your image and you've got the circle and the image done and if we go to object, mask the shape, we've got our avatar.
Now the beauty of this technique is this, you can move the image around inside the mask or conversely, you can move the mask around. We'll just put the mask there and then when you click away, it's done. Now another thing that you can do is you can adjust the shape of the mouse. So if you want to make an oval, just grab the mask, click away, boom, there, done. Now another technique that you might want to use is to not create the mask, but to actually fill a shape with an image or an object and we're going to do that next.
So we're just going to select our little mask here and just delete it. And this time what we're going to do is we're just going to draw that little circle, right there, and let's fill it with a red just to be sure that there's nothing up our sleeves. And if we come back to our exercise folder and there's the warrior one, just drag it on, notice how the color changes so it looks like it's selected and if I let go, it's done. And here's the best part, I can adjust the mask but you notice as I adjust the mask it does not adjust the image behind it, so there's no distortion introduced.
And if you want to, you can move it around, you can make it bigger, you can do whatever you want with it. Okay, I'm going to delete that. Now sometimes what we wind up with are masks, especially with avatars, that sort of have a stroke around the outside, like a little badge, so we're going to do that. We're going to take our circle here, just like that, and we're going to give it a border and we're going to make the border red, just so you can see what's going on here.
And we'll make the border a little bit thick, so I'm just going to select the number one and using the up arrow key thicken up the border a bit to about five pixels. So I got that done, so what I'm going to do is I'm going to take a copy of this and just stick it on the clipboard. So commander control C, now I'm going to go get my image and I'm going to stick our warrior in here and I'm going to grab our object and I'm going to bring it to the front, there it is.
And we'll take both of them and we'll just move them up here and if you want, another way of doing this is just select the circle and copy it to the clipboard, command C. So it's now on the clipboard and what we're going to do now is make that mask object, mask with shape, there it is. And now if you do command V and turn off the fill, you have created an avatar with a circle around it. You notice that when you copy objects inside of Experience Design they literally paste in place, where you got them is where they go.
So there you go, there's working with masks inside of Experience Design. Dead simple to accomplish and I think you're going to find it rather freeing and liberating being able to simply create masks and manipulate them without having to go through all the rigamarole of establishing and all that stuff that goes around it and I guess what it comes down to is rapid prototyping and this masking technique really does focus on the word rapid.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.