« Back to Fireday


November 23rd, 2007 at 3:00pm — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox no pointLink

It's amazing how when someone asks for a screen shot of what the error looks like from a web application, you notice that everyone hits the old Alt-PntScrn button and pastes it into an email and sends it on its way.

Another necessity of being a designer is that you may need an entire view of the canvas, not just the visible area of what the user is looking at. On top of that, you may want to comment on what needs to be modified on the page.

This is where you need a great capture utility for viewing the entire contents of the viewing area. This week's extension: FireShot!


FireShot is strictly built for capturing whole web pages, visible web pages, or sections of web pages. This is free portion of the Screenshot studio.

FireShot is segmented into two parts. One part screen capture utility and one part basic editor. It gives complete control over what you want to capture and also allows you to create annotations or notes for elements that you want to draw attention to on the page.


FireShot needs a little work on the installation part. When I clicked to install the extension, it asked me if I wanted to download the extension as if it was a regular download as opposed to a familiar Firefox extension.  UPDATE: My mistake. It seems the familiar extension download dialog box was definitely apparent.

After double-clicking on the extension in Windows Explorer and associating it to Firefox, the extension was installed and asked if I would like to restart Firefox.

When you restart Firefox, the extension is visible in the top right-hand corner with a big red 'S' icon. As soon as you want to grab a screen shot, click the button.


Once you click the button to capture a web page, you will notice that another modal window appears with your captured web page.

Here is where the fun begins. The first section of the window contains the primary functions dealing with the screen:

FireShot Editor-Section 1

  • Save - Save the image as a PNG, JPG, BMP, or ZIP (compresses bitmap).
  • Copy - Copy the image to the clipboard.
  • Mail - EMail the screen shot.
  • MS Paint - Export the screen to MSPaint for more editing.
  • Select - Determine the select shape (Rectangle or Ellipse).

The second section of the window includes the drawing tools for editing your screen shot, the preferences, and the About box.

FireShot Editor-Section 2

  • Shape - Hilight the area that you want to draw attention to.
  • Drawing - Free-form drawing (think of the brush in Photoshop or MSPaint).
  • Pointer - Draw a line from one shape to another with an arrow on the end.
  • Text - Create text for a certain area.
  • Options - Preferences for FireShot.
  • About box - Information about the extension and author.

The annotation part of FireShot is what really excited me about this extension. Most of the browser capture extensions don't have this ability from what I've noticed.

Another feature that is definitely welcome is the way to extract just a section of a page. Granted, you can copy it and paste it into MSPaint, but FireShot gives you the ability to crop and edit right inside the browser. This is a feature coo for FireShot.


The one thing I was uncertain of was the configuration settings for FireShot. If you click the dropdown next to the red 'S' in the right-hand corner and select Preferences, this dialog box is different from the "Options" button on the editor.

The idea behind this design is that the FireShot extension in Firefox has it's own "preferences," but once you are in the editor (after you take a snapshot), the editor has "options" for how you want the editor configured.

If there was a way to avoid this type of confusion, it may make the options a bit more on the usable side. The editor's configuration box has a number of options on how you want the screen shot issues handled, specific default colors and shapes, and the ability to define specific graphics packages when you want to edit the screen further.

Even though the list control on the left provides just one option, this allows for additional features for expansion in the future. This is great for when future preferences appear to enhance the extension.


Overall, FireShot delivers on its web page capture ability. I've seen certain software packages that don't do what FireShot does.

Aside from the configuration options and an unfortunate installation process, FireShot has a definite advantage over other web page capture extensions. In addition, designers will absolutely love FireShot when they need to add entire web pages to their portfolio or for creating annotations when talking to users about a test site they built and want to jot down notes regarding the web page.

FireShot makes me wonder if I should stop and look at their Screenshot Studio for $24.95. Hmmm....

This weeks rating for FireShot is a solid 4 out of 5.