Julian

This is my blog. My aim is to help and inform people of things that happen and influence my life. I hope that someone out there will benefit in some way!

Posted by on in IT Tips and Tricks
  • Font size: Larger Smaller
  • Hits: 24741
  • Print

Capture an entire website page as an image [HOW TO]

Whilst developing website, there have been times where I have needed to add an image of a web page in a document. If the web page is really long and exceeds the screen display, I found myself taking sequential screen dumps, copying and pasting into Photoshop and then trying to marry up the images to give me one image - what a pain that was!!

Screen Grab - Firefox Addon

 

ScreenGrab is your answer! ScreenGrab is a Firefox add-on that allows you to capture an enitre web page, irrespective of how long it is, as an image. It also allows you to capture just the window, a selection of the window (visible portion) or the window.

So, to install this add on an start using this feature, follow the steps below.

 

Open Firefox (for the purposes of this HOW TO, I am using FireFox 5.0.1 on Mac). Once opened, Select TOOLS > ADD-ONS Select Tools > Add-ons
Conduct a search in the Add-ons screen for ScreenGrab (press enter after entering the search word) Search Add-Ons

 

A few results will come back, find the one called Screengrab (with the same icon as above), and click on the install button. This will install the add-on


 

Once the add-on is installed, you will need to restart Firefox so it can work. There is a restart link next to the name after it has installed, just click this link. Don't worry if you have any other pages or tabs open, these will re-open when Firefox restarts.

 

Restart FireFox

 

Your add-on will now be visibile in the Tools > Add-ons page. There are some preferences for this add-on. Click on the Preferences button where you can set the image format and include the date time stamp in the file name

My Installed Add-ons

Add-on Preferences

 

To capture and image, open a new tab in Firefox and navigate to the web page you want to copy / save. In this case, I'm using my complete Blog page located at http://www.juliandavis.com/blog as it's fairly long.

You will notice there is a new icon in the bottom right of your Firefox window, this is the icon you need to click on for the different options. When clicked on, you will get 2 options - SAVE and COPY ScreenGrab Menu Icon. They both have the same sub-menu, so for this instance, I am selecting SAVE

ScreenGrab Menu

 

I am going to select COMPLETE PAGE / FRAME to save my complete page as an image. Hover over the option you want, and click on the one you want. As I selected SAVE, a save dialog box opens.

Give your file a name, you can select the file format of PNG or JPG and click on SAVE. (I have noticed that you may need to add an extension to the file name if using a Mac, just something to look for!)

Save an image from ScreenGrab

 

Once saved, you have a complete image of your webpage that you can modifiy, resize or whatever to add to your document! (The image below has been reduced to fit on the page and for loading purposes)

Complete Saved Page
 
To checkout more of what this great little Add-on can do for you, visit them at http://www.screengrab.org/

 

 

 

 

Rate this blog entry:
  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest Thursday, 21 August 2014