I may be rather late to the party but I recently discovered Iconfactory’s xScope last week while graphic designer Justin Ruckman was in town working on the next version of Skribit. I saw him using xScope’s Dimensions tool to painlessly measure distances between on-screen elements. I was hooked from then and started using the xScope trial. In the last week xScope has proved so immensely useful that I had no hesitation paying the full $26.95 to buy it. Let me show you why.
First off
The xScope menu mapped to its handy menu bar icons.
xScope is comprised of 7 different tools and the biggest difference between it and other measurement tool suites (commonly just popular Firefox add-ons) is that xScope works for anything on-screen. It doesn’t matter if you’re working with some elements in OS X itself, or within Firefox, Photoshop or what have you. It just works as an overlay.
Dimensions
This little gem is almost worth the price of xScope itself. Once enabled, just hover over anything and it will display the distances between each element. Remarkably useful. But what about the one-off situations where elements you want to measure have no interior area that xScope can pick up on? Hit Command+Shift+5. It creates a red screen overlay which you cut through to find the area of the elements you want to measure. I have yet to find a situation that needs this.
Rulers
As you can guess, this feature pops up a nice set of adjustable (you can rotate CCW and CW too) rulers with calipers for precisely measuring various on-screen elements.
Screens
Want to see what kind of space you have to work with in various browsers for your designs? Enable xScope’s Screens tool and you get an overlay that lets you select which browsers you’re looking to use and presents an accurate window to give you an idea of what the user will end up seeing in a browser (space-wise only, obviously no rendering done).
Why is this useful? While a user might have say a 1024×768 screen resolution, browser and OS tool bars take up space. Screens makes it easy to find out what your above the fold real estate looks like.
Loupe
Loupe magnifies a small section of your screen where your cursor is (options: 200%, 400% and 800% zoom) and gives you the color information in HEX, RGB and HSB at the pixel level.
Pro Tip: Hit Command+D to freeze loupe’s selection.
Tap Shift+Command+C to copy the currently selected HEX color to your clipboard (extremely convenient).
Guides
This screenshot is a bit overkill but shows off what can be done with guides. Each individual guide can be moved as you please.
If you’ve ever worked with an application the likes of Photoshop or InDesign, xScope’s Guides needs no explanation. Just as you use guides to line things up in those applications, xScope lets you do the same over your entire desktop.
Pro Tip: Hit Command+G to use the Guide Wizard and create a grid.
Frames
I haven’t yet found a need for Frames but they’re adjustable boxes that display size information, along with options allowing you to specify locked size ratios and display various grids. Frames also lets you capture screen shots of framed content as well as duplicate the frame.
Crosshair
No need for explanation, the Crosshair tool is useful for checking if elements line up.
Mix & Match
With the exception of the dimensions and crosshair tools, any of the xScope tools mentioned above can be used together. Popular combinations for myself include setting up guides and using the ruler as bounds for the dimensions tool.
Overall
xScope is definitely worth its price. As for complementary applications, Justin Ruckman pointed out that he uses Color Schemer for Loupe-like tasks. I give xScope 10 out of 10 Stammys.
Do you use xScope or anything similar for your graphic and web design needs? What are your must-have design apps?
PaulStamatiou.com runs on the Thesis Theme for WordPress
Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.
With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like PaulStamatiou.com, but also to enable the site to run far more efficiently than it ever has before.
Stumble This
{ 9 comments… read them below or add one }
Great review Paul. I’ve been using xScope for a few months and it’s one of, if not the most valuable and most used apps on my mac.
Saying that, I’ve learnt a couple of things I hadn’t already noticed thanks to your ‘pro-tips’! At $26.95 it really is a bargain, and I think I had the demo installed for about 5 minutes before I bought a license!
I tried it out for a bit as it seems really helpful for Web Development. I found the dimensions tool to be a little buggy at times but overall a good product.
Will definitely take another look after this review.
Cheers,
Ben
twitter.com/benlilley
Epic! I’m gonna buy it…
Very impressive feature set. I mostly use FastStone Capture (Windows, old freeware version). It is primarily screenshot capture but has magnifyer, color picker and rectangular region capture acts as crosshairs and decent measurement tool.
Neato! I’ve never heard of it, but looks useful to any web dev.
Nice review… been using this for a few years but you pointed out a few items I had not been using so thanks!
Nice review! Will definitely get that once I make my move to mac
I use PixelStick… it only measure distances, no bells and whistles, but it’s free:
http://www.pixelatedsoftware.com/products/pixelstick/index.html
Probably overkill for me. But of the Firefox extensions, which is the best?