Screen capture tools: Getting a view of an entire Web page

Occasionally, it’s  useful to show a screen capture of an entire Web page to give people a holistic sense of an interface and to point out multiple features at a time.

There are 2 free tools you can use. One is a Firefox add-on (Screengrab) (the developer does ask for a contribution if you can make one) and the other is a Google Chrome add-on (Awesome Screenshot).

Screengrab

Screengrab is a fairly basic tool. Once installed on Firefox, you right click on any page you want to capture.

Click on either “Save” or” Copy” to grab the complete page you’re interested in.

The tool provides you with an image that’s about the same size as the Web page (1500 x 2000 pixels in this case).  You don’t have a way to annotate the image with this add-on, so you’ll need to use another application for that (e.g., Photoshop), which you may also want to use to resize the image.

A resized version of a capture is shown below.

Awesome Screenshot

Awesome Screenshot allows you to obtain images of entire Web pages or select portions of a Web page. It also allows you to annotate your Web page to call out specific features of interest.  The drawing tools are pretty simple and you can’t do much editing once you’ve added an annotation, but it’s quite serviceable. The video below shows you how it works.

You can save your screencapture as an image (a PNG file) or upload it to obtain a link (which is the better way to show your annotations). Your linked page will also direct a viewer to the original Web  page.

A resized version of the  image is shown below. (The original image is the about the same number of pixels as the Web page (1023 x 1544 in this case).

Instructional strategies

Sharing screen captures of a full web page can help give viewers a holistic sense of the Web page and show more interface features at a single time and in relationship to each other. You may also want to use an image of a full Web page in an eportfolio  project.

There are better tools for collaborative Web design (e.g., such as RedMark, MarkUp.IoBounce), but if you need a quick way to get a full page screen capture of a Web page, Screengrab or Awesome Screenshot may just do the trick.

5 responses to “Screen capture tools: Getting a view of an entire Web page

  1. Hi Dianne,

    I just wanted you to know that I really like your website and blog entries…great stuff!

    Greg Williams
    http://www.umbc.edu/isd
    http://www.gregwilliams.net

  2. Hi Dianne…
    This is great add on… Thanks a bunch for sharing. Enjoy your posts!

    Vytheeshwaran Vedagiri

  3. Pingback: Tweets that mention Screen capture tools: Getting a view of an entire Web page | Instructional Design Fusions -- Topsy.com

  4. Pingback: My Google Chrome Conversion (and PLE on Chrome) | Instructional Design Fusions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s