When it comes to the realization of a design template, web developers usually have to work pixel perfectly: 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 would help in this case.
The workflow of measuring pixel distances on a website could be characterized by taking a screenshot, open it in an image editing program and measure distances with a selection tool – a time-consuming task that has to be done multiple times before the product is finished.
That is where PixelZoomer comes into play: the Chrome extension creates a website screenshot and directly enables a pixel-based analysis. You can enlarge the screenshot easily by using the integrated magnifier. Measuring distances and picking colors is a short task from now on.
All tools of PixelZoomer are integrated in one sole toolbar which is located at the top of the window. The toolbar is separated into three parts: tools for analysis, information and zoom settings. The extension is developed in a way that the toolbar is just an assistance: the actual work with the screenshot is done via mouse and keyboard. Every function can be accessed through a keyboard shortcut and the interaction with the mouse works intuitively. You can scroll into a screenshot by just using the mouse wheel.
The virtual ruler of PixelZoomer is activated by creating a selection: create rectangular regions at will and you can read the width and height of the selection in the toolbar. A selection is also possible when the website screenshot is enlarged. A created selection can also be moved accross the window border – the visible image area is moved by the extension automatically. You can also create square selections by holding down the SHIFT key.
Finally, you can move around any selection in real-time: by pressing the SPACE key and moving the mouse, you can change the position of the current selection easily. So you don't have to recreate a whole selection if you missed a pixel edge.