It’s safe to say that you can never have too many tools. No matter what your trade, you will always be more effective if you have quality tools at your side (as long as your don’t bankrupt yourself in the process). Luckily, if your tools are of the software variety, you don’t even need to find room in the garage to store them.
One example of an incredibly innovative and effective set of tools for designers and web developers on the Mac is xScope. XScope is an app that has a wide array of features, allowing you to layout and measure elements on screen in an incredibly “Mac-Like” way. The seven included tools offer everything from color sampling to pixel spacing, and everything in between.
After installing xScope, you are greeted with a help screen that includes an explanation of each tool and their use. This is a good overview of the power the app possesses and worth the time to look over. As someone who does not read these help screens (but instead just jumps in headfirst), I would advise taking a look as there is more to this application than meets the eye.
The 7 tools available are:
There are 3 ways to toggle the tool that you want to use: (1) the icons in your menubar for each item, (2) a floating toolbar window that you can move or close, or (3) you can use keyboard shortcuts. The toolbar is something I used once and then turned off, since it just duplicated what is available in the menubar, relieving one item of desktop clutter (although I can see the use if you are using a large screen and don’t know the keyboard shortcuts).
At any given time, you can have several selected for use concurrently. The only exceptions are “dimensions” and “crosshair”, which makes sense when you see what they do. I can’t imagine a need to have all the tools running at the same time, but the ability to use multiple functions at once is very powerful. It should also be mentioned that running all of them appears to have little impact on the operation of the OS (with all tools running, less than 10% CPU on my 2008 MacBook Pro).
The concept of these tools is simple – give the user exact details, unobtrusively, when trying to layout graphics or images for use on the web. Without going into too much detail, here is a very basic overview of each tool.
This is the newest tool included in xScope, and it’s easily one of the coolest. Simply turn it on, and as you move the mouse around the screen, it will display the dimension between elements (vertically and horizontally) on a webpage, document, even parts of the UI in OS X (for instance, thanks to xScope, I know the bookmark bar on Safari 4 is 23 pixels tall. See, you know you always wanted to know that!).
That may sound almost trivial, but it’s not. In laying out a design, knowing the exact distances between and around elements is crucial and this makes it drop dead simple. I’m sure I’m not the only one who cannot eyeball something on screen and confidently proclaim ‘yessiree, that column is 128 pixels wide with 5 pixels padding!
Even within an app such as Photoshop, it’s easier to invoke xScope and do a quick measurement for a design you are working on. If you want to focus on one area, ‘shrink mode’ allows you to define an area and then make fine measurements within just that specific location.
The rulers tool is my favorite feature in xScope and probably the most powerful and versatile. Essentially, this puts a set of rulers on your desktop to measure pretty much anything. The opaque ruler can be moved, resized, even rotated to help measure everything on screen. It’s uses are endless and this feature alone is, in my opinion, worth the price of admission. Whether measuring something on a webpage or testing how well something will fit in a document you are working on, being able to accurately measure an object has a tremendous number of uses.
I should mention, that there is a free Adobe AIR app that somewhat resembles this feature of xScope. Calliper places a caliper graphic on screen and allows for opening and rotating for measurement. However, compared to the xScope version, it would be akin to using my 5 year old daughter’s plastic ruler to go build a house.
The loupe replicates the Digital Color Meter functionality that comes with OS X, albeit with some added features. One of the neatest is the ‘avoid mouse’ function- the display window that zooms into pick out a specific color will zip away to a different part of the screen if you move your mouse pointer inside the aperture window– this saves you from having to move the results window away if it happens to get in the way.
With a simple keyboard shortcut you can change the zoom settings of the loupe, lock it’s position, or copy the value captured by the loupe to be used in other applications. So, even though this duplicates some of the OS X tool, the added features and incorporation with the rest of xScope make it a valuable part of the app.
Guides and Frames
These 2 features of xScope beg to work together. Guides do just what the name implies– allows you to add vertical and horizontal guides across your screen, just as you would use in Photoshop, Illustrator, or Pages. At it’s simplest form, it allows a quick guide to use for alignment. Similarly, frames allows you to draw out a specific sized box. Just using these two features, you could do a layout guide for almost anything.
Delve a little deeper into these features and the true power is exposed. There are wizards available for both guides and frames that allow you to automate the creation of the horizontal and vertical lines on screen. Whether you need to make a grid to establish even spacing in design elements or you want to create a specific sized element (Say a 16×9 box for a video you want to place in a design), then the app automates this process with remarkable ease.
You don’t need to be using an elaborate app to benefit from these layout options. You can open Pages, put up your guides and frames, and then put some graphics and text boxes up to quickly eyeball what may or may not work in your design.
I have to admit that with all the power of the rest of this app, crosshairs left me scratching my head wondering what it was for, since the other portions of the program did this plus a whole lot more.
Basically, when you invoke this option, you have a crosshair that follows your mouse giving your precise location via x and y pixel coordinates. As sexy as that sounds, the use of this little feature alluded me until I read the help file (you’ll recall I mentioned how important this is when I started).
I found out you can establish where the starting point is for the crosshair. In other words, you can hit Command 0 and the x and y coordinates zero out– now you can move the pointer left and right to determine how many pixels you’ve moved away from that origin.
The last feature I want to cover is something that sounds so simple, you have to wonder why there aren’t 20 apps that do the same thing. I know of no other ones, and I’d bet they didn’t do it so well as this app.
Screens is a web designers friend. It creates an opaque window with guides to overlay over an image or web page to demonstrate spacing on different browsers set to different resolutions. Setup xScope with the screen resolution and different browsers you can tell how your layout or design will look vertically and horizontally on screen. Simple yet very useful!
xScope is all about precision – whether you are working on your own original design or looking at another design to get ideas. This app manages to get the advanced features right, while maintaining the ease of use and classy design elements that make a really good Mac applications.
It’s impossible in one review to cover all that xScope can do, so I’d advise downloading the free trial from the Iconfactory website. Even if you don’t feel the need for various advanced features at first, I think you’ll find yourself using it more and more as time goes on. You may even find yourself wondering how you managed without it!