by
Lessons:8Length:1.2 hours
Xd400
  • Overview
  • Transcript

2.3 Aligning to Pixel Grid, Selecting Grouped Objects, and Masking Images

Let’s now learn how to align objects to the pixel grid, select objects inside a group without ungrouping, and figure out how to mask images and adjust the crop.

2.3 Aligning to Pixel Grid, Selecting Grouped Objects, and Masking Images

[MUSIC] Okay, I'm gonna use this arrow again. This arrow is popular today. Well, first of all we can just actually go and un-group that a whole bunch. And unite this together, kind of like we did before. So now this is one shape. And we're actually going to look at a nifty little trick where you can align whatever content you've got to the pixel grid. Now you might have designed an entire app screen here, whatever it is. In fact, let's go and create some shapes. We'll go and create a few shapes. And we're just gonna kind of throw in there some decimal points. Remember what I talked about earlier? When you are creating things in XD, you invariably will get some decimal places. And it will become incredibly chaotic. And sometimes you just, you create something and you think, I wish it would just all just snap to the pixel grid. Well, fantastic news, it can do. If you have an entire app screen you've done and you've got some bits aligned and some bits not, just drag over everything, go to Object > Align to Pixel Grid. And you click that, and you see the circle there and a few other little bits will have shuffled in place and everything. Let's see how it was, yeah, so we have those decimal points there. And then suddenly, everything becomes aligned to the pixel grid. So when I'm working in XD, if I'm doing an iConcept for example, or I'm designing an app or a site, every now and then, probably due to some sort of [LAUGH] paranoia, there'll be mistakes. I'll just drag over everything and go Object > Align to Pixel Grid. Just to check that everything is aligned to the pixel grid because it's just best practice just to have everything nicely organized. Well, at least in my opinion, to have everything nicely organized, so when you hit export on your icons, your assets, everything's going to look super crisp and super sharp. Okay, so that's a really quick one about how to quickly align to the pixel grid. Right, let's grab this circle, and we'll get a little bit creative here. Now this next one is a huge time saver. So bringing it back to the title of the stream, Now I'm just gonna, Throw a little bit of transparency on there, and I'll group these together. Make sure everything's aligned first, and there we go. So we'll group that together and position that in the center. Now, when you're working on an app or a site design, well anything that gets remotely complex in XD, invariably you're going to group lots of different elements together. So it might be the header nav bar or you might have a content fee for pieces of content, and you're gonna start grouping objects together. Because it makes selecting those objects and moving around considerably easier. But what if you want to go and make changes to something within that group, but you don't want to have to go through the hassle of going Object > Ungroup, and then Ungroup again. And then you make the change, and then you've got to go and group it all back together again after you've selected it, it's frustrating. But don't worry, don't worry. There is a way around that. So you can see, these are just three circles that I have grouped together. And now I can move them around as one object. But I can also hold down Cmd if you're on a Mac, or Ctrl if you're on a PC, and click on any individual object. And what it does, by holding down Cmd or Ctrl, is it takes me through that, that, into that group and I can go and make some tweaks, Go and resize it if I want to. And you can see the bounding box and everything adjusts in real time and I'm still inside the group at the moment. And then all I've got to do to come out of the group is just click anywhere on the work space, anywhere outside this group. And you can see there's this border, this kind of thing left over. If you get anything like that, just click again, click on the work space. So if you double-click and you go inside and you start editing shapes, the easiest way to come back a step and get out of the shape or out of the group, is to just click on that work space, and it will bring you outside. So that's a really quick way you can jump into a group, make changes, and then jump back out. Okay, right. So next, we've got masking images. Now this is an incredibly useful one to know. So we are going to [LAUGH], we're gonna get creative, in the name of not just using squares and rectangles. There we go, so we'll merge those together into one shape, our star, and we can go to, well we can go to File > Import. And I've got some images in here so we can pick a photo. Let's go for this one. And it will add the photo into our document. Of course this photo is hugely, hugely high res, so I'm gonna scale this down to the center holding Alt and Shift. And I'm actually going to send this to the back as well. So I'm gonna send this to the back just so my shape that I'm going to be masking this image inside is on top. [LAUGH] Yes, as well just to touch back on that last one. You can hold Cmd or Ctrl and click, or you can just double-click and it will take you inside the groups. So just double-clicking can take you in the group as well, depends whether you want to hold down a key or just double-click. Entirely up to you, but thank you to Pixel and Bracket in the chat for that one. Okay, so we've got this shape here, this star shape, and what we can do is hold Shift and select the image as well and go to Object > Mask with Shape. So what it does, is it will take this shape on top, and then it will put the image behind into that shape. And there we go, now, we can move this around and we don't have any excess image. In Photoshop when you mask, you get loads of kind of image around the edge and it makes it difficult to select sometimes. No, no, no, not in Adobe XD. Nice and clean, and we can easily just edit that crop by double-clicking, and it shows us the image again. We get a gray border here, showing our shape. So we can see how any changes we make to the crop are being adjusted in real time. So we can adjust that crop, we can even go and rotate it. Something like this, and I can see, of course, if I do something like that it's gonna leave this big white space down here. So it's really handy being able to see the outline of the shape. And again, just click out on the art board when you're done and it will crop your shape with an image inside that shape.

Back to the top