2.7 Check for Half Pixels and Prevent Misalignment
Another common problem that can come up and cause designs to be not quite code friendly is misalignment.
Objects that, to the eye, look as if they’re aligned can actually be a few pixels out, leaving the coder to wonder if they ought to position things exactly as they are in the design or make adjustments and corrections. Another type of misalignment that can occur is half-pixel positioning—for example, if a vector shape has a width of 100.5px instead of 100px.
In this lesson we’ll look more closely at the type of alignment issues you should be aware of and how to resolve them.
We’ll also cover a couple of workarounds that will allow us to get our spacing consistent, regardless of the fact that Adobe XD doesn’t yet have rulers or guides.
1.Introduction1 lesson, 01:16
2.Laying the Foundation7 lessons, 1:05:27
3.Fleshing Out Content6 lessons, 1:16:31
4.Conclusion1 lesson, 07:54
2.7 Check for Half Pixels and Prevent Misalignment
Hey welcome back to code friendly design with Adobe XD. In this lesson, we're gonna talk a bit about making sure that your alignments are all pixel perfect. And they're all consistent throughout your designs. There's a couple of types of alignment that we're gonna talk about here. One is making sure that vector shapes like our little arrow that we created, are aligned on the pixel grid. And then none of the nodes of that shape are at any half pixel values. That so you can keep all of your vector graphics crisp and that look really sharp when you're translating into SVG format. The other thing that we're gonna look at is making sure that all of the elements as you move three design are aligned with one another. That the amount of spacing that you have around your elements is consistent and that you don't have little offset here and there. That are just a couple of pixels that might not be obvious but they prevent that consistency in the code of your site and also in the ultimate look of the site. All right, so the first thing I'm gonna look at is making sure that your vector shapes are all aligned to the pixel grid and there's no half values. So select our little shape. And we'll zoom in a little bit. And the first thing that we're gonna look for, is making sure that the width of the shape is at a full pixel value. And you can see up here it's actually not. So we're gonna change that from 84.99 to 85. And it might just look like a little thing to tweak, but wherever you have values in a vector that aren't full pixel values, you can end up with blurry lines instead of crisp edges on your shapes. So you really wanna check in on that. Then we're gonna expand this and we'll have a look here at our arrow shape. Just scroll in a little further. We'll double-click to edit the points. And you could see, we've got this point here selected. And looking up here, these values, none of them are full pixel values. So we're just gonna round all of these down. Actually, before we do that, We'll check the overall width. So yeah, there you go. So we've got 23.02, and that gives us a couple of problems. One is that because it's not a round pixel value, there's gonna be some blurring around the edges. And the other is that because it's not an even value, the point of the arrow can't fall exactly on the center here. So we're gonna bump this up to 24 pixels wide and then we're gonna round this value up to 28 pixels. Then we'll double-click to go in and edit the nodes. We'll start from the left most node, get that all aligned on the pixel grid and then we'll move over to the right. We're just gonna round everything off, so we'll change this value and round it off to 950 Round this value off to 526. So we'll round this value off to 526, it's gonna put it on the same horizontal. And we'll round this number down, 957. We wanna give this the same X values. That's 957. Round its Y value to 510. We'll get this one on the same plane, 510. We'll round it off to 966. And that should also be 966, 526 like the ones to the side of it. And then on this one again, 526. Then we'll round this one off to let's say 974, we'll just check on. Actually now that looks like, you can see how this segment here looks a little bit wider than this segment here. So we'll just take that down one pixel. 973, now those are the same width. And now, we should be able to properly center the node here. So, gonna round this value off to 962. We'll round this one off to 539. All right, so now we'll just click somewhere else. We'll reselect our arrow. Now we could see that the point of our arrow is still not aligned with the center and it actually bounces back down to a width of 24. We know that these two sections are aligned. So what that means is, this middle section here probably just needs one extra pixel of width. So we're gonna select all three of these nodes, bottom of across one pixel. And now we should be able to get that alignment going. Yes, so there we go. So now, the point is pointing directly at the center handle here. We've got a 24 width. Now, this is not complete again. So it can be a bit of a tedious process getting these all correct. Those all have whole pixel values, but we need to round this one off, and we'll put that back to 539. And now there we go. So now we've got 24 by 29. That's a whole pixels. And if we zoom out we should see that these edges are very crisp and clean. Actually before we do that, we'll just get this centered properly again, since we changed at the width. Now hit Ctrl + 1 to go to 100% size. And now we have a very crisp arrow. And another thing that you can do when you're making sure that nothing is using half pixel value. So let's actually just deliberately bump this up, I bump it over rather to A 0.5 value on the x-axis. One way that you can help to automate the correction of that is to right-click on the object and then choose Align to Pixel Grid. And then you can see that that puts that back down to a whole pixel value. It doesn't help as much with nodes in a vector shape. You have to do that manually. But for complete objects, it can be really useful. All right, the next thing that we wanna talk about is making sure that all of the elements of your page are aligned with one another. In my experience, it's fairly coming to see something like having one element align about here. And then having another element looking like it's almost the same but it's actually just a couple of pixels off. So I might be further down in the page so it's not as obvious, you can't quite see that is not aligned with another object here. But it's creating that inconsistency. And normally in a program like Photoshop or Sketch, you would use guides and rulers to make sure that all of your objects were aligned. At the moment Adobe XD doesn't have guides and rulers, but there are still a couple of things you can do to help you make sure all of your alignments are correct. Once your cart is, you can select your outboard by clicking the label here. And then, you'll see this grid section on the right, if you check that, and make sure it's like it is layer not square. And you get this system of which is meant to be for obviously for generating. But you can also use it in place of guides. So what I'm actually gonna do is change this to, be just one pixel. And now I already know in advance that I'm gonna want ID pixel gutters on most of the inside or ID pixels are pending on the inside of most of these panels. Sometimes, I'm gonna want a hundred and twenty pixels but usually, it'll be eighty pixels. So what I can do is first, I'll set the width to twelve hundred. That's the width of outside. And now to make space for the padding, it's gonna be on either side here. I'm just gonna subtract the amount twice. So I'm gonna subtract 2 times 80 which is 160. And now, I have this column system here and I can select different items and they will automatically snap to those edges. So that's gonna make it a lot easier, To get everything aligned. It's a little bit overbearing, that color. So you can also change it up. Again, just selecting the app board, then jumping in here. You can change it to something a little bit more subtle if you want. You can even take the opacity all the way down to zero. And then all you'll see our lines instead a full block of color. And then so they look a little bit like guides. Not as flexible, but it'll still help you along. Another thing you can do in Adobe XD, to help you with this alignment, is to create some little elements that will act as measures. So I'll show you what I mean. Actually, I'm just gonna clean up these layers here a little bit. We have our colors from before. We're just gonna group all of those up and get them out of the way. Color palette. Right, now I'm gonna create a measure so that even if we don't have these lines here switched on, I'm still gonna be able to measure out 80 pixels of width or height. So quite simply, I'm just gonna create a rectangle. Just gonna make it 80 pixels by 80 pixels. Turn off its border, and I'm gonna set it to 20% opacity so that it's not too overbearing. Then I'm also gonna grab the text tool, and inside I'm just gonna write, 80px x 80px. Gonna center that, give it a little bit of a shadow, So that it's quite visible. Group that up and bring up to 80 pixel measure. So now we can place this anywhere that we want. So, for example, I can place it right here. And now, if I wanna have an element aligned so that there is 80 pixels of space here and here, then by virtue of having this measure sitting here, the other shapes are going to align themselves with it, so in effect that's gonna work like a guide. So we'll just turn off the layout grid to show that it still works without it. So if you're just gonna pull that out of this group here and put it outside cuz that's gonna allow it so snap It won't snap when it's inside another group, but you can see there that it will automatically identify that 18 pixel measure and it will align itself with it. And the reason that I put the text in here as well is that you can then include a couple of these markers, is that you can then include a couple of these measures to make it really clear to the coder what size gaps there are around your design, that make it just as at a glance. So then there's really no room for any mistakes there, it's just gonna be really clearly communicated. And in the way that that's colored, you can see that it's still also visible here, even though it's on a lot of background. Actually you can probably just remove the blur on that shadow to try to make it a little crisper. And just bump the font way up to make it a little bit more readable. I'll change that to 1 and 1. Okay, so not perfect, but still gonna do the job, is more visible on a dark background, but you can't see it on both. There are also gonna be a couple of other panels where we want a 120 pixel gutter instead. So let's just duplicate this. Rename it to 120 pixel measure. I'll just drag this down here where we can see it quite clearly. And we'll just bump up the size. So we'll change it to 120 pixels, 120 pixels. Change that text to read also 120px by 120px. Would center that to make it look a bit more appealing and neat. So now we've got two different ways that even without guides, we can still check on our alignment. So now it doesn't if you have an element here or all the way down here. You're still gonna be able to ensure that your alignment is correct. That's gonna keep things consistent all the way throughout your site, which is gonna give it all a much more balanced look. All right, so that covers avoiding half pixel misalignments and just general misalignments in your design. In the next lesson, we're gonna look at how we can create a CSS ready gradient for a background. So, we're gonna add a gradient in this panel here. Wherever possible, you should avoid the temptation to create a gradient and then export it as a rasta image. There are actually a lot of really cool effects you can create with gradients that can be translated directly into CSS. And the advantage of having code based gradients instead of image based gradients is they're infinitely scalable and they're much smaller in file size. So talk about, what kind of gradients you can actually have converted into CSS and then we'll look at creating CSS friendly gradients in Adobe XD. So we'll check all of that up in the next lesson. I'll see you there.