Sometimes, you've got to get things pixel perfect in a design. Like the days when layouts were done on acetate, it's essential to have a tool that lets you magnify your work. Enter the Loupe tool.
By default, the Loupe follows your mouse as you move it on screen, updating the popup with the color value underneath the pointer. You can quickly change the color format display by selecting another item in the popup menu. You can also toggle the Mouse / Magnifier button to have the Loupe zoom the image underneath the tool (like a true magnifying glass.)
The magnification level of the Loupe starts out at 800%, but you can make it as little as 200% or as much as 1600% by using the Loupe menu. The keyboard shortcuts ⌘= and ⌘- can also be used.
-
Sampling Colors
A common use for the Loupe tool is to collect colors from a design composition and use them in another context (like an HTML document.)
When you use the tool's ⌃⌥⌘C hot key, the current color will be copied to the clipboard and saved in a color palette at the bottom of the Loupe Options panel. After you have collected the colors you need, you can click on the items in the palette and the color value popup will update. You can also use ⌘C to copy the color to the clipboard.
The palette can be saved or loaded using an .ACO file: this file format is compatible with other design applications (like Photoshop.) To remove a color from the palette, select it and press the Delete key. The entire palette can be reset using the menu item.
-
Measuring Pixels
Another common task with the Loupe is measuring pixels: no one likes a button whose alignment is off by one.
To help with this, the Loupe allows you to draw a rectangle over the preview. The rectangle can measure offsets between objects or the width/height of an object.
The (⌘D) and (⌘L) items in the Loupe menubar can also help with measurement. When you freeze the Loupe, you get a snapshot of whatever is currently displayed. Locking the Loupe continues to update the display, but ignores any further mouse movements. The magnified image can also be copied to the clipboard using ⌃⌘C.
Locking is handy if you are making changes to a design and want to see an update without repositioning the mouse. A locked Loupe also helps when you are doing pixel measurements: preventing mouse movement makes it easier to drag the rectangle on the magnified pixels.
Another approach is to turn on Dimensions in the Options panel. When turned on, measurements from the center of the Loupe are displayed along the left and top edges of the magnified image. This makes it much easier to check small distances.
If you're working on a Mac with a small screen, you may find the option useful. When turned on, the Loupe window will automatically move away from the current mouse position. This helps when you are examining a large design—it keeps the Loupe's display out of the way.
The Loupe preference panel contains various options that let you format the color values according to your preferences. The default for hex colors is in lowercase with a hash mark. App colors default to the parameters used by UIColor.
A reference color can also be displayed in the Loupe using the menu item. This allows you to work with a color in one format while viewing it in another. For example, you can work with hex colors in an HTML document while checking that the color value is the same as Photoshop's 0-255 RGB value.
Finally, like the Screens tool, the Loupe can simulate how colors will appear to users with vision defects. See that tool's help for more information on the different settings. The Loupe can also be configured to display with or without the grid or center lines.