Measuring & spacing tools

In this video we’re going to look at rulers and measuring things. We do this for two reasons - one is that we want some even spacing between boxes, and also we might be doing this because the person building the website,  if it’s not us, might want the measurements, and to know how far apart things should be, or the padding between objects.  So to do this there is two ways.

There’s the official way and then there’s the way that I use.  Now the official way of doing it, is to use the ruler tool.  Now the ruler tool is hiding underneath the eyedropper tool here, there he is there.  Grab the ruler tool, and say I want to measure the distance between the small button and the box underneath it.  What I do is  click, hold and drag, and measurements that you’ll see in the top left in the app bar, - the measurements are changing as I’m dragging this around.  Now by default, it’s kind of stretching goes anywhere, and what I want to do is hold down the shift key to lock it, and it’s in a kind of vertical position.  So I can scroll it down, and you’ll see there it’s set to - see here, - 77 pixels between this one and this one.  Now what you have to do, is zoom in a little bit, just to ensure that it’s actually very close and you can see because it’s so far out, it hasn’t been perfect. So I can click, hold and drag it just to clean it up  and say I actually want it to be there.  Now it’s more like 81 pixels.  

Now that’s the official way.  I’m going to clear my rulers to get rid of it.  I’m going to zoom out by holding command or control minus.   That’s the official measuring tool and it’s great.  What is better though, is to use the rectangle tool.  the rectangle tool here has a big benefit in the fact that it snaps to the edges of things on the page, whereas you may have to do some adjustments with the ruler tool to make sure it was all measured right.   So watch this - I’m going to measure the distance between here and here.  I’m going to click hold and drag -  see all these light pink lines that are appearing everywhere  -  that’s because it’s trying to line up with lots of different things on the page.  Mine is quite a complex page, so there’s lots of things it’s trying to line up with,  But it’s pretty good at just snapping, - watch this - I just drag it down here, it’s pretty good - it got our 81 pixels OK.  I’m going to zoom in and double check.it’s bang on, it is perfect.  

Now the rectangle tool is  really good  for spacing out objects as well. so I’m going to delete this layer down here.  I’m going to zoom out a bit, and move down, holding my space bar,  click and drag down, and I’m going to zoom in here to my little portfolio list.  Now I’ve got some even spacing between these two objects.  I’m using our column widths, - watch this - view > show, I’m going to turn on our guides.  You can see there I’ve used the spacing between these columns,   Now what I want to do is to make sure that spacing  is exactly the same between here, and it’s obviously not,   So to make it perfect. what I can do is using my rectangle tool, I can click, hold and drag a rectangle between these two, and you’ll notice that it has snapped to the edges perfectly.

But you’ll notice that that I want it to be perfectly square, so I’m going to undo that.  If I go into edit, step backwards.  What I’m going to do is, I’ll hold down the shift key while I'm dragging my rectangle.  Hold the shift key, it will lock the constraints.  You can see it’s 30 pixels by 30 pixels now.  If I use my move tool, click, hold and drag them down, and we’re using, like a spacer. I’m going to snap into the bottom of that - there it is there.  Now I’m going to move this image up. Sometimes it doesn’t snap OK  so in this case it’s not, so what you can do,  you can use the arrow keys on the keyboard.  So I’m just going to use the arrow keys to bump it up.

 So using rectangles is a good way to make sure that the padding is the same between these images, and the same underneath here.  The only trouble with them is that they are physical, which means that this thing here is going to print, or go out on your mockup.  So you must make sure, when you are finished with it, that you select it in your layers panel and you delete it.

And that’s how you measure things up in photoshop