Thursday, July 10, 2014

Capture the web with Chrome screenshot tools

Add screenshots to your training materials with any of these four screenshot tools for Chrome.
1_chrome_frame_hands.jpg

When we use a screenshot to explain a web app, we're putting the picture superiority effect into practice: people remember images better than words. For example, take a look at navigation icons. Google Apps experts know that icons called the "app launcher", "Mr. Jingles" and "the sprocket" link to apps, notifications, and settings, respectively. A picture of these icons helps us remember those icons better than words alone.

a-AnnotatedScreenshotsExplain.png

Creating a web screenshot takes four steps: we capture, annotate, save, and share an image. You can complete the process with system tools, but isn't elegant.

First, capture a web screenshot with your system:

Windows: Windows key + Print Screen (or, use the Snipping Tool to capture a region)Mac: Command-Shift-4Chrome OS: Shift + Ctrl + Windows switcher key

Each of these tools saves the screenshot to your local drive (in Pictures, the desktop, or Downloads, respectively).

Next, annotate the image with a meaningful arrow or note in your favorite image editing software. Rename the file something other than "Screenshot_2013-11-30_09:09:15.jpg" to make it able to be found in the future. System tools all save captured files to local storage.

Finally, upload or email the image to share it with other people.

Five more apps for screen capture in Windows

Web screenshot tools make the whole process faster. The tools save the captured image to online storage, which eliminates the manual upload of a file. Many tools also offer annotation and sharing options. If you use Google's Chrome browser, here are four screenshot tools worth a look (pun intended).

b-FourChromeScreenshotToolsChart.png

For simple web image capture, Google offers the "Save to Drive" extension for Chrome. Once installed, click the extension to capture an image of a web page (or the visible portion of the page) and save it to Google Drive. The tool captures and saves a screenshot, nothing more. It's the simplest - and least powerful - tool of the four.

c-SaveToDrive-Google.png

Evernote users should use the "Evernote Web Clipper" extension. Web Clipper is smart: it can capture article content as text, in addition to taking a screenshot. Web Clipper also provides powerful annotation tools: it includes annotation features initially offered in the Skitch Android and iOS markup apps. (Skitch is an excellent tool for screen capture and annotation on mobile devices.) You can share a link to the captured content via email, Facebook, Twitter or LinkedIn.

d-WebClipper-Evernote.png

Awesome Screenshot offers a huge number of screen capture, annotation, save and share options. It is the only tool of the four that offers to save files to Diigo (a web bookmarking and knowledge-sharing tool). Annotated screenshots may also be saved locally, to Google Drive, or temporarily shared at AwesomeScreenshot.com. You can also Print the captured screenshot. The extension includes a promotion for the "SearchAll.com" seach tool, which may make it less appealing to schools and companies. Otherwise, power users should appreciate this tool.

e-AwesomeScreenshot-Diigo.png

The Chrome version of SnagIt from TechSmith requires you to install both the web app and extension. Once both are installed, click the SnagIt extension icon, then select any rectangular area or capture the visible page. The captured image opens in the app, where you can annotate, rename the file, and (after the image automatically saves in the "TechSmith" folder on your Google Drive) share the image. Selecting "Share" changes the file permissions for the image so that the images can be viewed by anyone with the link. SnagIt for Chrome offers a solid set of annotation tools in an extremely well designed workflow.

f-SnagIt-TechSmith.png

These aren't the only four Chrome screenshot tools: a quick search at http://chrome.google.com/webstore will turn up many others. But these four do address a wide range of web screenshot needs. Choose a tool that makes the workflow of creating, annotating, saving, and sharing a screenshot easy.

Your next "how to" document should have pictures (screenshots!) as well as words.

No comments:

Post a Comment