19 Firefox Add-ons For Designers

Are you a web designer who wishes you could do more in one handy spot instead of having multiple programs open?  Well, thanks to the enormous Firefox add-on development community, your web browser can do almost everything for you. We already covered Firefox add-ons for developers , but we couldn’t leave out the people that sit there and actually design what the developers have to build.  These 19 add-ons will allow you to choose colors, measure dimensions, save screenshots and a whole lot more.  Be warned that you should be selective in what add-ons you add to your browser due to the fact that the more you add, the slower it goes, but can you really resist very many of these?

Color Tools

ColorSuckr: ColorSuckr will pick the 12 most common colors out of an image and allow you to build a palette out of them. ColorZilla: ColorZilla allows you to get a color reading from any point in your browser (not just the page), and you can adjust the color and paste it into other programs.  Besides identifying colors, this add-on will also allow you to measure the distance between any two points, choose colors from pre-defined sets, get information on DOM elements and more. FirePalette: FirePalette adds a color selection tool to Firebug’s CSS panel so you can easily pick CSS-compatible colors. Palette Grabber: Palette Grabber allows you to make a color palette from any page you visit and then export it to Photoshop, Flash, PaintShop Pro, GIMP, Adobe Fireworks and Mac OS X Color Picker palette formats.

Measurement Tools

GridFox: You can draw a grid on top of any page and measure the column widths and other items. MeasureIt: A quick and easy way to draw a ruler around a page element to see how big it is in pixels. Pixel Perfect : Pixel Perfect allows designers to overlay their composition on top of the developer’s progress to see how far off elements are and what adjustments need to be made.

Miscellaneous Tools

Firebug: Firebug is generally associated with developers, but the layout and CSS inspectors can be quite handy. Font Finder: This add-on will allow you to highlight any element in a page and see the CSS information for it. It’s especially handy if you want to identify a font. View Dependencies: View Dependencies adds a tab to the “page info” so you can see a break down of all of the files associated with the page you just loaded along with their sizes. This can be a handy tool for determining what may be slowing down the load time. Web Developer: Despite the name, Web Developer has many useful features for designers such as inspect, edit and disable CSS, as well as graphics.  You can also use it to measure elements, re-size the browser, display CSS by media type and more. Window Resizer:  Allows you to quickly view a page at different screen resolutions.  With just a click you can switch between 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200.

Screenshot Tools

Abduction!: Abduction! allows you to save a portion of a page or save the entire page so you can show potential bugs to other people.  You can also print or copy any images you saved. FireShot: FireShot gives you numerous options for how to shoot your desired images of a partial or full page, which you can then email, save or upload to a free host. Image Zoom: Choose the size you want to re-size an image to or reset auto scroll so you can use the scroll wheel on your mouse to zoom in and out on an image to check quality. Picnik: This add-on will allow you to save an image of the page you are on and send it directly to the online image editor, Picnik. Pixlr: You can edit and open images or screengrabs you’ve taken directly in the Pixlr online image editor. Screengrab: You can grab the entire scrollable document, just the visible bit, or a draggable selection. Screengrab will even save just the contents of an individual frame as well as taking images of Flash and JavaScript elements. Talon: Talon is an add-on by the popular Aviary.com that allows you to take screenshots that can be saved to your system, opened directly in the online Phoenix image editor, hosted on their site or copied it to the clipboard.

Frequently Asked Questions (FAQs) about Firefox Add-ons for Designers