2.2 Half Pixels, Adjusting Individual Corners, and Layout Grids
In this lesson we’ll learn how to avoid those annoying half pixels, adjust the radius of individual corners, and use the excellent “Layout Grid” feature.
1.Introduction1 lesson, 00:34
2.Adobe XD Tips and Tricks6 lessons, 1:13:44
3.Conclusion1 lesson, 00:17
2.2 Half Pixels, Adjusting Individual Corners, and Layout Grids
[MUSIC] Okay, number four, so we've got half pixels. Now, when you work in XD, you're working on a really complicated app or site design or you're just drawing icons, whatever you're doing in XD, at some point, you're gonna come across half pixels. Now, XD doesn't really render them in the same way Photoshop does. So, your designs in XD will look super smooth and lovely and it'll be amazing. But you might find every now and then, that you get something like this. In fact, let's just remove the border and give this a fill. We'll go for green and you'll look at it and it will be like that. And you go, hang on a second, 84.78 pixels. And this is the width and the height of the shape as well. And you may often see this in the x and the y as well. So, rather than having a rounded up pixel, you'll have a decimal place of some sort. Now, this isn't the end of the world. There's no need to panic. But if you do have something like this and you're exporting to a raster format, so let's say a PNG, which isn't a vector-based format, then these half pixels or these not complete pixels that aren't rounded up properly with a decimal place, they will appear blurry. And they won't appear as crisp and as sharp as they could do. So, one thing that you can do is you can just select these and just round them up. So, round them to the nearest decimal place or the nearest number I should say. Something like this. Now usually, when you work in XD, if you're creating shapes, usually, it will snap to the grid, so it's not an issue. But as you start creating more and more complex shapes, like the icon we just demoed, invariably you're going to click on an object and notice that it has a decimal place for the width, the height, or the X and the Y position on the art board. And it's just something to be aware of. If you're exporting to something like an SVG format, which stands for scalable vector graphic. When you're incorporating SVGs into your digital project and you're exporting for developers, it's going to look super super clean because it's just a preferable format over something like a PNG. But if you are going to have PNG there as a fallback or for whatever reason you might just want to export PNG, this is just something to be aware of. Because your icons, if they have those decimal places, they will look not as crisp as they could do and they'll be a bit blurry. So, just something to be aware of. However, on the flip side of it, if you are looking to create something in XD like an arrow, for example. So, let's just grab our rectangle tool and I think we'll stick with our little green theme we've got going on here. So, we’ll create an arrow and we’ll duplicate and we’ll make this a bit narrower. So, you can see, we’re all good at the moment. Edit, duplicate and we’ll just rotate this. We’ll hold Shift to a snapping, to that 45 degree rotation you can see there. And I'll more this up and narrow this down, cool. And then I'm going to edit and duplicate this again and of course, I'm going to drag this down. In fact, let's just, Adjust these a little bit like so, so my arrow does have a point. Okay, so at the moment, all good. Apart from the fact [LAUGH] that the space here top and bottom isn't actually equal. It's not equal. And this bit here doesn't actually touch. So, what we can do, Is we can, in this case, embrace the half pixels. So, we'll first go up here and we'll just try and move these together. So XD does snap, which is incredibly useful most of the time, but not all of the time. And you'll see, we've got a few of these up here now. Now, the x is the x-axis, that's the horizontal plane. The y-value is the y-axis, so that is the vertical plane. And what we can do is go in here and just start adjusting some of these decimal place digits. And you can see, just by adjusting these and then we can go another layer in, I can actually get these to line up to a point. Now, this is especially useful if you are creating icons in XD. Of course, be mindful of half pixels and things, but if you really want your icons to be done in XD because it does have all the tools to do that, this is a great way to get this to work. Now, we're going to group this top and this bottom part together and go object, group and we're going to correct the spacing here. So, this middle part is in between, it's balanced. So, we can hold Shift and then just align these here. And then go to object and group our entire arrow together. So there we go, we've got one way of getting around half pixels if you are going to be exporting to something like a PNG format or JPG or some kind of raster based format. But if you're all about that precision and it has to look right on screen for your prototype or for your design or whatever it is. If it's gonna go in your portfolio or something, then that is a way that you can go in and manually edit these x and these y positions using a decimal place, just to get everything to line up perfectly. Or something else you can do is you can design your icons in Illustrator and simply copy and paste them over. That's what I do because I've been using Illustrator for years, so for me, it's just more comfortable. And Illustrator and XD, for the most part they play nice together, so copying and pasting things from Illustrator into XD works absolutely fine. Okay, righto. So, we're going to look now at adjusting an individual corner radius. And in fact, I can grab this arrow from the last one. And I'm just going to go Object > Ungroup. Now, what we can do is we can grab these inner anchor points here, these little circles. And we can use these to quickly and easily round off corners on shapes. However, what we can also do is we can hold down the Alt key on the keyboard and round off one corner specifically. So, we can round off this one corner here. Let's go for, say, six pixels. And you can see here, it adjusts that one corner. So, we could round, This one off here for six pixels as well. And at the moment these are still grouped together. So, we're just going to ungroup those first, select the top one, hold down Alt on the keyboard and drag this down like so. So again, we can hold down Alt and drag. And I might just bring these two in just a little bit, just so they round off nicely. And you can go in and manually type in a value here if you want as well. I know this is a slightly more creative version of an arrow, but if you do need to round off individual corners rather than just using the all corners must have the same radius option here, you can click on this and you can input the different values here manually. But if you're not much of a person though for just going in going enter a value, Tab, Tab, Tab. Which one of these relates to which corner, which is something I constantly forget. Then you can do it visually, just holding that Alt key allows you to easily adjust that radius for individual corners. So there we go, that's a nice quick one. This next one is about layout grids. Incredibly useful for layout design, if you're doing mobile-responsive design, desktop-responsive design, any of that stuff. And this is a feature that was added to Adobe XD in one of the recent updates. It's something that I was personally waiting for and I'm excited that it's here. So, you can click on your art board, whether that's a desktop art board or a phone, mobile art board. And we have the grid section on the right and previously, we had the square grid and you could change the grid size, which was fantastic and everything, but now we can change this to a layout grid. And this allows us to give our layout grid a color. And we can specify the number of columns for our grid, the gutter width, which is the space in between each column or the actual column width itself. And at the very bottom, we can set it so the space on the left and right edge of our layout grid is equal or we can just change it completely so we have a top and a bottom margin introduced as well. So, it depends on what you working on. But for most people, if you're doing responsive design on desktop or mobile or tablet, you'll want something like this, with the left and the right equal. So, we could have, let's go and add eight columns in total. And we'll change the gutter width to 10. So, remember that's the space in between the columns. And this one in here, the column width is now italicized. So, this text is now in italics because essentially, if we're defining the number of columns, we're saying that the gutter width has to be this and we have a margin of 7 either side. Once you have those three different values, your column width is going to be determined automatically. So, if I go and change, let's change the gutter width, you'll see that it automatically changes the column width. And if I go and change the column width, you'll see that it automatically changes the gutter width. So, it shows the one that XD is changing for you in italics. Now, the reason it changes automatically is because if it didn't, it would just give you an impossible grid. Or we could add 12 columns like this and it scales as well. So, I'm holding ALT and just scaling this up, scaling it down, which is really really useful. And we can go and increase the space here and of course, the column width has to come down. So, you can see whichever one you change, it will adjust and show this in italics, just so your grid is actually physically possible. So, that's layout grids, incredibly useful for responsive design, mobile design, whatever it is you're doing. And by the way, you can turn it on and off just by clicking the check box, so you can check your grid, drop its transparency if you want. If you want something really subtle that doesn't interfere with your ability to view your design or you can just turn it off. So yeah, really really cool addition, love that one.