• ARTICLES
SEARCH

How-To Geek

Take Awesome Screenshots of Webpages in Chrome

Would you like to take great screenshots of a webpage, annotate them, and share them, all from Chrome?  Here’s how you can do it with the Awesome Screenshot addon.

Whether you’re a budding tech writer or just trying to show your Mom how to send an email, there are many reasons you might want to take a screenshot of a webpage.  Want to show a friend a neat webapp or you found, or tell your Twitter friends about a new Google feature you discovered? One of the best ways is to take a screenshot and share it.  Many of us have tried to save a purchase receipt page or product key, only to find that the web page looks scrambled when you later open it.  Take a screenshot, and it’ll always look picture-perfect.  There are many ways you can take screenshots, but let’s look at a great way to take and annotate screenshots of webpages directly in the Chrome browser.

Getting Started

Install the Awesome Screenshot addon (link below) from the Google Chrome Extensions gallery as usual.

sshot-2010-07-26-[16-51-49]

Now you’ll see a new lens icon in your toolbar.  Click it and then choose to capture the visible part of the page or to capture the entire page.

sshot-2010-07-26-[16-52-57]

If you choose Visible Part, it’ll only capture exactly what you can see right then in Chrome.  If, however, you select Capture Entire Page, you’ll see a Capturing notification while the page automatically scrolls down.

image

The capture will only take a moment, and then will open in a new tab, complete with tools to help you annotate your screenshot.

image

Here’s a closeup of the toolbar.  You can crop your screenshot, or add a variety of shapes or text to it.

sshot-2010-07-26-[17-14-27]

The crop tool is very useful.  Drag and select the area you want to crop, and it’ll automatically tell you the pixel dimensions of the selection.  Drag the corners to enlarge or shrink the region, and then click Crop to crop the screenshot to that size.

image

Once you’ve cropped the screenshot, you’ll be able to add annotations as before, all from a very nice UI.

sshot-2010-07-26-[16-56-55]

The Blur tool is very useful.  Select it to get a blur brush that you can use to hide sensitive information on webpages.  Here we’ve used it to hide our Gmail address; this would be great if we were making a tutorial on using Gmail.

sshot-2010-07-26-[17-11-33]

Saving and Sharing Your Captures

Once you’ve made all the edits you want, click Done.

image

You’ll be presented with a preview of your screenshot ready to save or share.

sshot-2010-07-26-[16-57-14]

Right-click on the image and select Save image as… to save the screenshot to disk.  Currently all screenshots are saved in JPG format, but the developers plan to add PNG support in the future.

sshot-2010-07-26-[16-57-26]

Alternately, if you’d like to share your screenshot online, click Share and your screenshot will be uploaded to an online photo storage service.

sshot-2010-07-26-[16-57-33]

Once it’s uploaded, you can share the picture on a variety of services with one click.  Note that the image URL is rather long, so if you’re sharing on Twitter you may want to copy the address and shorten it with a service such as Bit.ly.  To do this, just click the address box at the bottom and it will automatically copy it to your clipboard.

sshot-2010-07-26-[16-57-55]

Conclusion

If you’d like to take quick and informative screenshots from the web with Chrome, the Awesome Screenshot addon is one of the best ways to do it.  It’s easy to use, and takes great looking screenshots on almost all webpages.  Note that it cannot take screenshots of Flash content, but almost everything else came out great. 

Install the Awesome Screenshot addon in Google Chrome

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 07/26/10

Comments (2)

  1. rascal

    Really its helpful for me to take quick screen shots. Thank you.
    I ve a question.
    what are changes or effects occur while installing a software program, than creating a folder under program files and copying required files in it.

  2. Koowie

    wow. this is pretty cool. very helpful and useful.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!