The Daily Designer: Two time-saving Firefox tools


If you ever design and prepare graphics for the web, you know that getting the image sizes and colours to match up with the site can sometimes be an ugly process. We’ve found that using a couple super easy Firefox extensions has pretty much eliminated the hassle of combing through source code or working with screenshots to get the images right.

The first one is called MeasureIt. It’s a ruler device that tells you the height and width of any area you highlight. Just click on the icon in the corner of your browser, and you are given a translucent blue box that you can drag to fit any element you’re looking to measure.

MeasureIt: discovering dimensions in Firefox

MeasureIt was created by Kevin Freitas, and can be downloaded right here.

The second tool is called ColorZilla. This gives you an eyedropper tool that will tell you the colour values of any element in your browser – whether the colour you want is the background on a page, one part of a photo, or even the colour of an icon in your browser’s bookmarks toolbar.

ColorZilla is a colour-picking monster

ColorZilla then gives you the RGB and hex values of the colour, and lets you copy it to the clipboard for use in other applications.

This link will let you download ColorZilla, which was developed by Alex Sirota.

Those are a couple of the best Firefox plugins that we recommend for web designers: quick, easy ways to grab the info you need to let your graphics work better on the page.

And that’s all for our very first Daily Designer tip.