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.
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 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).
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.Io, Bounce), 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.