If you’re a designer—Web, graphic, or otherwise—the sizes and locations of elements on your screen are important; unfortunately, measuring these metrics isn’t always easy. Although I’ve found a number of utilities aimed at making this measurement or that measurement easier, I’ve been especially impressed by the recently-released xScope 2.0 (; $27), a collaboration between Iconfactory and Artis Software. XScope combines a number of onscreen-measurement tools into a single, convenient utility.
The tools
XScope’s functionality is provided via seven specific tools, each aimed at a specific type of measurement, alignment, or inspection.
Dimensions My favorite tool, Dimensions lets you measure the size of onscreen elements. What makes it unique—and just plain cool—is that it’s nearly automatic: You just place your cursor in the area to be measured, and two “laser beams” (one vertical, one horizontal) shoot out. As if by magic, the beams stop when they hit other onscreen objects; for example, a window’s edge or a column of text. XScope then displays the length of each beam, in pixels. The ability of the tool to determine the correct edges of an object or area is impressive; it can even find the dimensions of a single letter in a document, or the space between two characters on a page.
Once you’ve measured the desired element or space, you can use a keyboard shortcut to dim the area around your measurement to focus on that area, or take a screenshot of just the measured area.
Because the auto-measure feature uses changes in color to determine object edges, xScope can have trouble if an object or a background features a gradient or shadow, or if the edges of an image aren’t clearly discernible. In these cases, you can use the oddly-named Shrink mode, which lets you use a marquee to draw a box designating the area to be measured. This box stays on the screen until you remove it, and you can add as many boxes to your screen as you like, which makes it easy to compare the dimensions of two different screen areas.
As neat as the Dimensions tool is, it does have a few limitations. My biggest complaint is that you can’t copy the measured dimensions to the Clipboard—for example, if you want to send them to a co-worker in an email—unless you use Shrink mode. (Similarly, the screenshot feature doesn’t include those measurements in the image.) And it would be useful if you could resize a Shrink-mode box after drawing it.
Rulers This tool displays two rulers (at a 90-degree angle to one another) on your screen for measuring elements in pixels. Unlike many similar utilities, you can rotate the rulers to measure at any angle, and xScope’s rulers include visual calipers for framing the object to be measured. You can adjust the length of the rulers so the calipers fit the measured object; however, the calipers are on the outside of the rulers, and there’s no way to switch them to the inside for situations where that would make measuring easier.
Two features I’d like to see here are lines extending, perpendicularly, from the end of each ruler for measuring irregularly-shaped objects, and keyboard control for fine adjustments—for example, to adjust the length of a ruler in one-pixel increments.
Screens Especially useful for Web designers, this tool displays a translucent overlay representing a particular screen size. A pop-up menu lets you quickly change to a different simulated screen size using; a wide variety of screen sizes are available—from 320 by 320 (Palm) to 1920 by 1200 (MacBook Pro)—and you can add your own.
But unlike many similar utilities, xScope’s Screen tool also lets you see how much of the chosen screen size will actually be available for Web-page viewing in various browsers. Just click on a browser name in the list to display an outline of the page-viewing area of that browser (xScope assumes the browser is set to fill the screen and has its default settings). You can also choose multiple browsers to see the “least common denominator” area.
Loupe The Loupe tool lets you magnify a portion of the screen to examine detail at magnifications from 200 to 800 percent. It also displays the HTML, RGB, and HSB color values for the pixel directly under the mouse cursor; you can copy one of these values, or the magnified image, to the Clipboard.
My favorite part of this tool are the little touches. For example, you can freeze or lock the display, which lets you move the mouse without changing the magnified image. (The difference between lock and freeze is that the former allows the image to reflect changes to the magnified area, whereas freeze gives you a static image.) And the Avoid Mouse feature automatically moves the Loupe tool’s window away from the mouse, which is useful if you want to examine something underneath the window itself.
Guides The Guide tool lets you create horizontal or vertical guidelines to help you align objects on the screen. You can create horizontal or vertical guides by simply pressing Shift+Command+H or Shift+Command+V, respectively, or you can use xScope’s Guide Wizard; the latter is especially useful for adding multiple guides spaced evenly. If you want to reposition a guide, xScope displays its position relative to the top-left corner of the screen. You can also link guides, and you can save guide sets for future use.
Frames Similar to guides, frames are, as the name implies, rectangular overlays for your screen to help you design for a particular area. You can create as many frames as you like, each with a different size. Once a frame is created, you can resize it (freely or using a set aspect ratio), duplicate it, or link it to other frames; each frame displays its dimensions and—while being positioned—its onscreen coordinates. You can also create a 2×2, 3×3, or 4×4 grid inside the frame, and you can take a screenshot of the frame’s contents. As with guidelines, you can save frame sets for later use.
Crosshair This simple tool gives you a crosshair that identifies your cursor’s onscreen position, displayed as X/Y coordinates relative to the upper-left corner of your screen. Alternatively, you can set the current cursor position as the basis for coordinates. If you’re using the Rulers tool, you can instead set the ruler’s intersection as the base, which lets you use the crosshair together with the rulers to measure onscreen elements.
Easy access
Besides xScope’s own menus, the program makes its tools available via menu-bar icons, a floating tool palette, keyboard shortcuts, or any combination of the three—these options make it easy to access xScope’s features from within other programs. For the menu-bar icons and keyboard shortcuts, you can even choose which to use on a per-tool basis; for example, you could decide to have only Dimensions and Screens appear in the menu bar, and use keyboard shortcuts for the rest.
Adding to xScope’s convenience, from a designer’s point of view, is that each tool can be quickly toggled on or off, multiple tools can be active simultaneously, and each tool remembers its last settings.
Finally, xScope’s OS X-inspired onscreen elements are also beautiful, which is fitting given the utility’s intended audience.
XScope is definitely a niche product. But for those who need its functionality, it’s a unique—and uniquely useful—tool.
XScope 2 requires Mac OS X 10.4 or later.