This little program has been around for some time; however, I've just recently reached a skill level where I understand how I would use it well in my web development workflow! In fact, having forgotten about this program, I've been wishing I had a program that would just... Now, I love this program!
So what does Xscope do? When would you ever need to use Xscope? Well, if your answer to any of the questions is "yes," then Xscope may be just what the doctor ordered!
Have you ever needed to:
- know the exact HTML color code for a specific color you see on your screen? (or the HSB code, or the RGB values)
- know the exact dimensions of a window on your screen? (maybe the size of a video)
- know what a web design would look like on a monitor of a specific size in a specific browser, on a Windows machine or a Mac?
- know the exact length and/or width of two points on your screen?
- know the angle (in degrees) between two points on your screen?
- know the size of any design elements on your screen?
- know the exact pixel location on your screen of your cursor?
- easily create a quick design layout grid for your web work?
I have to agree with the IconFactory's description of their application: "Xscope is an application that is ideal for designing, measuring, aligning, and inspecting on-screen graphics and layouts." The 7 tools include:
- Dimensions: Quickly (and elegantly, I might add) determines the size of design elements on screen
- Rulers: On-screen rulers that measure distances and angles
- Screens: An overlay of smaller screens and browser content areas
- Loupe: A magnifying glass for a close-up view of your work (pixel by pixel) that includes color values
- Guides: Movable markers for precise horizontal and vertical alignment
- Frames: Movable markers for precise alignment based on width and height
- Crosshair: Measure and align locations on screen with pixel precision
In the past, to get the HTML code for a specific color, I would take a screen shot into Photoshop and using the color picker restricted to HTML safe colors only find the color values, write them down, and then type them into my HTML code. With XScope, you just click on the Loupe tool sitting in your menu bar and mouse over the color on your screen. My previous workflow for determining the size of a graphic element was even more contorted. Suffice it to say: trial and error with more error and lots of trial.
My favorite tool is the Dimensions tool. I could write a lengthy description of it, but that would do it a great disservice. You simply must see it in action by clicking on the apple podcasting graphic to the right. Web designers, this is a great set of tools to add to your workflow. If you are a Windows user and know of a comparable product for your platform, please share it in a comment below!
