Handy Measuring Tool for Web Design

Quite often, while designing a website, button or graphic I need to know the size of an existing graphic or width of a particular space. The Firefox add-on, MeasureIt, is a very handy tool for determining the size in pixels.

First you'll need to download the add-on tool from: Add-ons for Firefox

By clicking on the measuring tape button, located on the status bar or toolbar, a measuring tape tool appears, allowing you to click and drag a ruler box around a graphic, space or any element on a webpage. The ruler box shows the width and height in pixels.

measure_it

To nudge the ruler box hold the CTRL + Arrow Keys to nudge the ruler by one pixel. CTRL + Shift + Arrow Keys will nudge the ruler by 5 pixels. To move the ruler box just click, hold and drag.