For Windows®. Free.
Made for UI developers
Trust, but verify: when it comes to the realization of a design template, web designers and software developers usually have to work pixel perfectly and true to size. Depending on the browser or application, buttons, images and texts have to be aligned precisely. A sense of proportion isn't enough if distances have to be exact – a digital ruler is required.
The typical workflow could be characterized by taking a desktop or window screenshot, open it in an image editing program and measure distances with a selection tool – a time-consuming endeavor which has to be done many times before the product is finished.
This is where PixelZoomer comes into play: the application creates a desktop snapshot automatically and directly enables a pixel-based analysis. It will also capture the actual web browser so you can quickly measure distances and pick color values. You can enlarge the screenshot easily by using the integrated magnifier. A pixel perfect implementation of the user interface is an ease.
Intuitive and in real-time
The main purpose of PixelZoomer consists in measuring a distance or extracting a color value quickly. The strength of the desktop application is represented by its speed – that's why the program doesn't have a main menu. The application starts up, a distance gets measured, the application gets closed. Since the desktop screenshot is created on program startup, a manual screen capture is redundant. By the way: PixelZoomer supports several screens by design. If you are running a multi-monitor setup, the program lets you choose which screen should be captured.
All tools of PixelZoomer work in real-time: zooming by mouse-wheel, picking a color or creating a selection work fluently. The visible screenshot area can be moved around with the right mouse button or by holding down the space key (panning). A selection which is being created with the measuring tool can also exceed window borders – PixelZoomer moves the screenshot area automatically.
Cross-Browser-Testing
PixelZoomer is primarily made for web designers, frontend developers and HTML/CSS programmers. In these areas, developers have a powerful layout tool with CSS: typography, user interface elements or even visual effects can be realized according to a design template. But the pixel perfect alignment and centering is not always an easy task. A visual check along vanishing lines can't be done by using your sense of proportion only.
Furthermore it's important for a professional appearance that websites and web applications (web apps) look consistent in different browsers. Consistency can't be reached easily always since major web browsers may differ in some ways: distances can vary, font sizes and line heights can turn out differently – or effects like shadows and rounded borders are displayed in distinct ways.
One for all
With PixelZoomer, web developers have full control of different browsers. One click allows you to create a desktop screenshot including opened browsers and measure distances. If you align the browser windows side by side, you can check all required browsers in one step.
The fields of application reach further: even native programs or platform-independent apps which are created using JavaScript, HTML and CSS can be analyzed and measured easily.
Analyze interactive elements
Web applications and programs often contain context-sensitive interface elements. Those are flyout menus, icon overlays, tooltips or context menus for example. This kind of element only gets visible when a certain state is reached. This could mean moving the mouse pointer over a specific area. So mouse-over or hover effects count as that.
Don't move
Is such an element implemented already, it can be tricky to capture that element – since the element is being hidden when the mouse cursor is moved away. For this purpose, PixelZoomer allows you to paste images from the clipboard of the operating system. So you can prepare the needed state and create a screenshot with the PRINT key afterwards. Then you can open up PixelZoomer and paste that clipboard image via click.
For customizing
Adjustments may not miss in a software application: that's why you can change the keyboard shortcuts of all tools in PixelZoomer. Furthermore there are settings for the zoom tool, the measuring tool and the eye dropper. For example, the preceding number sign of the HEX color values can be disabled. You could also set a background color for the selection area of the measuring tool.
PixelZoomer also supports multiple monitors: is there more than one screen, you can choose which screen is being captured on startup.
