The first tool we'll look at is Dimensions. This tool makes it easy to determine the sizes of elements in existing designs.
Click on the toolbar icon shown above and you'll see some laser beams appear. (Don't worry, you don't need safety goggles!)
By default, the Dimensions tool is in "beam" mode where it measures the size using a point inside the element.
The beam mode works by analyzing the pixels underneath the mouse cursor. If a solid block of color is detected, surrounding pixels are checked until a different color is found. This mode works very well on layouts that are based on solid colors.
If a gradient is detected underneath the mouse, the tool checks for variations in color and if there is a large change, an edge is detected.
For layouts that use photos and other elements that are not based on solid colors or gradients, the tool looks for differences in the surrounding pixels. If the differences are great, then it's considered an edge.
Once you have a measurement in beam mode, you can quickly highlight the area using the hotkey ⌥⌃L. This feature can be useful when you want to concentrate on one element in a design: try using it to isolate a photo on a Flickr page and you'll see how useful it is to see that image without the distraction of other elements on the page.
In a similar vein, a screenshot can be taken with ⌥⌃C. To create a frame with the current measurement, use ⌘⇧6. All of these global hotkeys can be changed in the xScope's preferences (in the Dimensions panel.).
The Dimensions tool can also be put into "shrink" mode where measurements are done by shrinking a marquee around elements.
To start the shrink mode, press the hotkey ⌘⇧5.
After pressing the hotkey, your screen will get a ruby overlay. You can "cut a hole" in this overlay to define the element you want to measure: just click on your screen and drag the mouse. After you release the mouse, xScope will examine the selected area to find the minimum dimensions. It does this by shrinking the area until the edge pixels are all different, leaving you with a frame for the element against its background.
The measurement in shrink mode is displayed like this:
There is a preference to automatically clear the last frame before you create another one. This is useful if you are doing many measurements to check a design.
Click on the home button to return to the index or proceed to the next tool: Rulers.