Wednesday, January 4, 2012

Fireworks Tip - Measure pixel width and height with guides

One of the great things about Adobe Fireworks is it's ability to quickly get accurate pixel measurements. Believe it or not, this can be a little bit of work in Photoshop but thankfully is a breeze in Fireworks. First of all it's worth noting that the pixel dimensions of any selected object (or layer) are always displayed in the Properties panel (see screen shot below).
Firworks Screen Shot - Object dimensionsThis is great but sometimes life gets more complicated. For these instances it's nice to know that you can pull guides out from the rulers and measure the distance between them holding down your Shift key. You will need to have the Pointer Tool (Black Arrow) selected when you do this. Then simply hold down your Shift key and move your mouse between the guides you want to know the distance between. You will instantly see both the vertical and horizontal measurements (see screenshot below).
Firworks Screen Shot - displaying width and height between guides with Shift keyThis is also handy to use when setting up Guides for mockups. If you know an area of your site mockup needs to be 300px across you can quickly drop a guide down to objects will snap to it. Holding down the Shift key while dragging a third guide in the middle will even show you the distance on either side of the new guide allowing you to find the middle point quickly. This an easy to use yet powerful and time saving feature. Once you get the hang of it, you'll wonder how you got anything done without it.

No comments: