By: Erik Vlietinck
Wed, January 30, 2008 - 7:00:00
Pros: Easy and fun to use, accurate, finds edges well, flexible, enables users to measure and create grids and guides for on-screen design, can take screenshots
Contras: No Lab values in Loupe module

http://www.iconfactory.com
Score:

IconFactory and Artis Software are two innovative developers who have found each other in their common quest for the perfect tool for designers. IconFactory being specialised in design that mainly focusses on what is happening on your computer screen, have brought the design tool xScope to perfection. xScope is a program that lets you measure, draw and check design areas on-screen. It uses pixels as its basic working unit, and it is simply indispensable for everybody who is designing for the screen. Web designers certainly should give this application a thorough look --you will be surprised at how xScope can help with positioning elements on a web page.

xScope 2.0 has gained one tool, Dimensions, and improved upon all the others that were available in the previous version. If you’re browsing the web to get some inspiration, and you found a website that has a wonderful design it can be a challenge to know what exactly makes the web page so enticing to look at. Often it’s a combination of colour scheme and element placement. But to know the ratios between the elements, you need to know their relative locations and measurements.

With xScope 1.0, you could measure using the Ruler, but in my example that would prove to be a painstaking business. I therefore regard Dimensions as a sort of dream tool if you want to rapidly but accurately measure elements, relative locations, etc. Dimensions shows you a dynamically updated red “beam” that follows your cursor and constantly changes its length and height depending on what it “sees” as solid areas on the screen. 

Dimensions: Beam Me Up Scotty

The Dimensions “beam” also constantly shows you the measurements of its length and height axis. By dynamically showing you the measurements of continuous areas you can easily see what you should do to get an identical design effect. In other words, Dimensions in its “raw” form is a great design analysis tool.

Now, in order for Dimensions to work correctly, you need a solid block of colour the tool can detect. The key here is the way Dimensions determines whether an area is solid or not. Obviously, when the tool is used on a solid block of colour, it will not have any problems detecting that this is what it should measure.

During my tests, I found that Dimensions will stop at text. A block of white with black text will make the measurements stop at the black text when the Dimensions tool is hovered so that it will “bump into” the text at any of the four sides. This means that you’ll have to find a clean spot on a web page to measure the size of a complete text block, for example.

The concept “solid colour” becomes more complicated when applied to gradients or photographs. With gradients, Dimensions will look for variations in colour and if the change is large enough (but it’s not documented how large that is, nor can you customise it) an edge is detected.
With photographs, the complexity further increases, and the tool will look for differences in surrounding pixels. If these differences are large enough, it is once more considered to be an edge.

In practice, Dimensions works very well when the difference in colour and contrast are relatively important. For example, when I tried the tool with a photograph of bricks in different shades of colour, the detection system wasn’t finely tuned enough to see the borders of the bricks, but the tool would detect areas of bricks with roughly the same lightness.

If Dimensions would only have this one trick up its sleeve, it wouldn’t be a dream tool, but it has other modes of operation that put it in exactly the dreamy league. By pressing Command-Shift-5 on the keyboard, the Dimensions tool goes into a state called “Shrink mode”. Shrink mode relies on the human eye to detect edges and that’s great for situations like the one I briefly touched on above.

Honey, I Shrunk the Screen Area

In shrink mode, Dimensions creates a ruby overlay on the screen. You can now cut a hole in that overlay to define an element you want to measure. You just click and drag the mouse and select the area you want to measure as you would in Photoshop with the Measurement tool. The difference with that tool is that xScope’s Dimensions will examine the area to find the minimum dimensions after releasing the mouse.

It will therefore shrink the selected area until the edge pixels are all different. The result is a xScope frame which allows you to paste the dimensions of the frame to the clipboard, or save a screenshot of the frame. The measurements themselves are shown on-screen, of course.

Dimensions has yet other features. Pressing Control-Option_L puts it into highlight mode. Highlight mode will dim the entire screen except for the detected area, so you can more easily focus on the area that’s under scrutiny. Finally, you can create a screenshot of that area by pressing Control-Option-C, and turn the detected area into a frame by pressing Command-Shift-6.

Rulers isn’t new, but it has been improved. The smallest ruler size is now 9 pixels, and nudging the ruler with the arrow keys can be done in 10-pixel increments by holding down the Shift key.

Screens, the module that you use for analysing a web page’s structure and looks in a browser window, now supports mobile devices and virtually all new MacBook models. You’re no longer limited to one custom size either: you can add and edit screen sizes at will. The interface of Screens has been improved somewhat, although I was quite happy with the predecessor as well.

The Loupe, with which you select colours on-screen, and with which you can convert colours from HSB, and RGB into Hex, has been changed. You can draw a box on the Loupe to take a quick pixel measurement. I didn’t find that particularly useful. It can be made much smaller --very useful. But it also still lacks one trick that I would like to see added to it: the option to display Lab values.

xScope’s Guides features has been vastly improved upon. Not only do you get much more information about measurements, but you’ll also be able to add gutters and link guides together --and you can still save sets of Guides as well. Distances between guides are shown too. The Guides wizard will automatically create linked guides, and it enables you to create horizontal and vertical guides in one step. Nudging with the keyboard and the Shift key held down will move the guides in 10 pixel increments, and dragging with the mouse and the Shift key held down will snap the guides to 10 pixel positions.

xScope Frames still draw frames both freestyle and to specific aspect ratios (among which the Golden Ratio). Frames can now also have a grid (2x2, 3x3 or 4x4, or all together). The aspect ratio is shown when resizing, and you can actually create screenshots from the area bounded by the frame. The nudging and snapping capabilities of the Guides apply to the Frames as well.

Crosshair hasn’t changed much, except for transparency customisation. Of lesser importance are sounds xScope will make if you want it to, and a nice, real “IconFactory Quality” new Toolbar that you want to drag around the screen just because it’s so beautifully designed. Last but not least, there is a whole bunch of keyboard shortcuts you can customise as well.

xScope may seem like a small, little program, and it is --but only in terms of memory footprint. Personally, I believe it is one of the most useful tools for any designer who creates things that will be displayed on any type of screen. One last word: xScope stays on top of everything, including Leopard’s Spaces. I found this a bit strange at first, but it seems not to matter much to Leopard, and that’s the most important.