A great website requires many details working together in harmony, and not all of these details appear “above the fold.” Many elements, from header to footer, must come together in order to effectively communicate a message. Whether you’re presenting your own work in a portfolio, or saving inspirational work from a designer that redesigns too often, why would you want to take a screenshot of just the thin slice of a site that you can see in the view port at any one time?

A while back I was admiring an incredible site and decided I wanted to save it for inspiration. I briefly considered the prospect of taking a bunch of screenshots and cobbling them together in Photoshop, but figured there had to be a better way. Fortunately, I was able to find one; I’ve been using the Pearl Crescent Page Saver extension for Firefox ever since. It is compatible with Firefox 1.5 and higher on Windows, OSX, and Linux.

Page saver comes in a free version and a $15 pro version with some extra features, including built in FTP to automatically upload your screenshot to a web server. I’ll focus on the free version, which is fully functional on its own and never nags you about upgrading. If you want the extra features, consider buying the pro version.

To install Page Saver, visit the download page and click the “Install Page Saver Basic” button. If Firefox blocks the install, click “Edit Options” info bar that drops down at the top of the viewport window, and add the current site to the list of allowed sites. After that, click the download button again to begin the install. After installation you will have to restart Firefox for the extension to be available—this is the case with other extensions as well.

Taking a screenshot is as simple as clicking the camera icon that should now appear in the top-right portion of your browser. This will open a save dialog that will allow you to specify a location and file name for your screenshot. Before taking your first full page screenshot, however, you’ll have to visit the options to do some minor configuring. Click the arrow to the right of the camera icon and edit “page saver options…”

Change the first option to “the entire page” to get a full page screenshot, otherwise you will only get a shot of whatever is currently visible in the view port. Another option found here is automatic scaling by percentage or width. This is useful for creating smaller captures for an online portfolio, for example. There’s also a second tab in the options panel that allows you to specify a keyboard shortcut for quickly taking a screenshot. I like using the icon just fine, but you have the option in case it appeals to you.

After configuring these options you are ready to take full-page screenshots with ease. Just click the camera icon, enter a file name, and you’ll have a .png file of the current page you’re viewing, scaled to your chosen size.