Lately I’ve been working on a few projects where I need to take a pre-designed PSD and build a custom WordPress theme from it. One big part of that is making sure that spacing, layout, and object sizes are consistent between the PSD and the theme. That means a lot of measuring.
One trick I’ve learned is to use the built-in Mac screenshot functionality. There’s no software to install or launch. Just click command + shift + 4 and then the pointer will turn into a cross-hair icon. Click and hold down the left mouse or trackpad button at one side of the object you wish to measure and then drag it across to the other side of that object. The numbers next to the cross-hair icon will then display the height and width (in that order) in pixels of the selected area. It’s that easy!
To save yourself from taking unnecessary screenshots, just click the escape button while you still have the left mouse button pressed down and the crosshair icon will disappear.