13

I'm redesigning a website for a downloadable app. I'd like to create a Tour of the features which has screenshots pointing out how to use it.

What are the best tools for doing this?

For bonus points, how would I go about creating something as nice as what appears in Head First books or on Kathy Sierra's blog?

Result: I've given the answer to SnagIt. Jing is good and super simple but too limiting. I'm going to be using this tool a lot in the future. Is Jing or SnagIt the best? SnagIt wins because it's more comprehensive. Cost is not a consideration.

4

8 Answers 8

8

I use TechSmith SnagIt v9. You can easily capture screen shots and add a whole bunch of things - callouts, stamps, geometric forms. I find it easy to use and very effective in making professional quality screen shots.

alt text

5

Jing is what I use daily (PC or MAC). It will do stills or movies, and can upload either to Screencast.com for sharing.

Jing Sample Capture

1

As far as screenshots go, if you're on Windows, just hit your print screen button (on my keyboard, it's right next to F12). It will copy an image of your current screen to your clipboard, at full resolution. Usually Photoshop or Fireworks is your best bet manipulating the images and you can just paste your copied screenshot into a new document. If you don't have either of those programs, GIMP is an open source option. If you're really desperate, PowerPoint can export as an image.

I'd encourage you to also consider screencasts. Video almost always has a higher conversion rate. You can download CamStudio for free. If you don't like your voice, it also allows you to add captions.

5
  • 1
    Vista/Win7 also have a great tool called "Snipping tool" (just type it in the start menu) that allows you to take partial screenshots easily.
    – Rahul
    Sep 20, 2010 at 7:10
  • 1
    On Mac, it's Cmd+Shift+3 to get a screenshot, Cmd+Shift+4 to select part of the screen, and Cmd+Shift+4 followed by Space to select a window. (All of these put a PNG on your desktop. Add Ctrl to put it on the clipboard instead.) Sep 20, 2010 at 14:16
  • There are so many better options than using the built-in print screen button, particularly if you want to add call-outs.
    – Sam
    Sep 23, 2010 at 15:21
  • @Sam - Print screen is just is a quick and dirty way to get a screen shot, nothing more. Unless other options add the callouts automatically, I guess I don't really see the difference between using one of them or using print screen with something else. Thanks for the comment, though, and to each his own. Sep 23, 2010 at 15:42
  • 1
    you can also get a screen shot by taking a picture with your phone an e-mailing it to yourself. That doesn't mean it's a good option, certainly not a "best way to create screen shots with callouts".
    – Sam
    Sep 24, 2010 at 3:11
1

For a cross-platform web-based web page capture tool that works with Chrome, check out 'Awesome Screenshot' -- you can do marquee-selection based elements, entire web page (including not visible parts) and add annotations. Very slick.

1
  • Awesome screenshot is... awesome. It's been my choice for screenshots on the browser for quite some time. +1
    – Mike
    Nov 6, 2011 at 17:51
0

I use powerpoint, it has several styles of call-outs in the shape menu and nearly unlimited text and styling options (and in version 2010 it even has a built in screen-shot tool).

To get the image out of powerpoint I use simple print-screen into the free paint.net.

For simple editing tasks I do everything in paint.net, it has layer support so positioning the graphics on top of the screenshot is easy.

0

I use FastStone Capture. One cool feature is it can automatically scroll a window, like a web page, and create a large seamless image.

0

I use MWSnap. It can capture window, fixed rectangle, arbitrary rectangle. Good thing is, that It will freeze screen at the time of clicking (selecting what to screenshot will be done on static image from time of clicking at make-screenshot button).

Callouts can be added later, by MSPaint for example.

Or buy a tablet. NGS has Power Presenter RE II. You can draw and write on page. Callouts can be done by drawing. Other tables might have something similar ...

0

I'm the author of Bubbles. It's created for this exact purpose, you can capture any site and share your thoughts using comment annotations. You can easily share your page with your team and collaborate on top of it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.