Putting Screen Shots into Tutorials and other Documents

Manfred Kuechler
Hunter College

Version: March 10, 2000

Special thanks to Robert Wood and Brian Cotter (both Rutgers, Camden) for some useful suggestions on using Windows' internal resources which I have now incorporated. Thanks also to two students in my class who did not listen to my instructions and, coincidentally, found yet another way to make do with existing resources.

While the focus of this paper is on getting starting without needing to invest into additional software, regular use becomes much easier with special utilities. One of these, ScreenShot 2.0 is discussed towards the end of this paper. However, judging from published reviews, another utility seems to offer even more convenience (at a somewhat higher price), SnagIt. The latter also allows to capture screen movies, it has a "VCR" as well as a "photo snapshot" mode. A more elaborate program for producing screen movies (in both .avi and two "streaming video" formats) is Camtasia from the same company, TechSmith. Unlike "Lotus Screencam" which uses its own proprietary format and requires a special (though free) viewer, Camtasia screen movies can be viewed using widely used (free) viewers like the Windows Media Player and the RealPlayer. I will start my own review of the TechSmith products very soon and may switch from the software I use currently (ScreenShot and Lotus Screencam) to these products. Stay tuned and check back before you buy anything.

Putting Screen Shots into Tutorials and other Documents

In guiding students to do anything computer-related, be it handling e-mail, checking online library resources, or just about anything that can be done on the Web, a picture often says more than a thousand words. So tutorials and web guides become much more effective, if they include pictures (in the form of screen shots). And this document should demonstrate this point -- by using pictures itself.

Fortunately, it is very easy for an instructor to add this visual dimension. This brief tutorial will describe two methods, both assuming that you run Windows (I assume that things on a Mac are not too different):

Only using tools (software) that you have available anyway
Using an inexpensive utility for even greater convenience

Using already available tools only

The key to the whole operation is the "print screen" key on your keyboard. Depending on keyboard type, its location varies, but on many keyboards this key is located in the top row to the right of the function keys (labeled "F1" to "F12"). In most cases, this key will be labeled "Print Screen" or some abbreviation thereof. It is hard to miss. Pressing this key does not seem to do anything, but -- in effect -- it copies the whole contents of your screen to the Windows clipboard. (Don't worry if you are not sure what this is.). That's all, so

Step 1: Produce what you want to show on your computer screen, then press the "Print Screen" key

Alternatively, if you hold down the ALT key while doing this, you capture the contents of the active window only. If your active window is not full screen, this is a convenient way of getting a smaller size image right from the start. Some keyboards (labtops, notebooks) may require the use of the ALT key to capture anything at all -- not offering the full set options of a regular desktop keyboard.

Now, we need a way to turn the contents of the Windows clipboard into a graphics file -- which then can be included in your tutorial document. You have at least one suitable graphics program already on your computer, Windows Paint, which is part of the standard Windows installation and which can be found under "accessories" ("Start"/"Programs"). This program does not offer a lot, which makes editing the raw screen shot a bit difficult (like you cannot zoom to below 100%, you cannot crop an image (screen shot) directly), but there are work arounds.

Another option is to paste the (graphic) clipboard contents directly into your regular word processing software. This may not work with all such software, but it works with MS Word 97 and WordPerfect 8 (and, most likely, with even newer versions of these products as well). Both MS Word 97 and WordPerfect 8 offer an option to save a file in "html format" or as a "web page" (html support for MS Word 97 may require an additional installation from your software CD). Using this option, the text is saved in a file with an ".htm" extension and the screen shot as a separate graphics file. In some ways, this is the easiest solution, but it also gives you only limited options to edit (e.g., crop) the screen shot and in general limited control over the layout and design of your final web page.

The latter is avoided by pasting the screen shot (saved on the clipboard) into html editing software instead, like directly into Netscape Composer. Composer saves the screen shot automatically in jpeg format and offers a choice of "low", "medium", and "high" quality (higher quality, of course, comes with the price of larger file size and slower download). Beyond this, there are very limited image editing options in Composer, so I recommend to use a genuine photo-editing program first, as described below:

Chances are that you have a convenient graphics program already on your computer -- though you may not even know it -- if you are using one of the two most popular office or word processing applications, MS Office 97 or Corel WordPerfect Suite 8 (or better):

With the MS Office suite comes a program called "photoed.exe" though it is not much advertised and you may have to look for it; the most likely spot to find this program on your computer is in the following directory (if you cannot find it and if you have an installation CD for MS Office check this CD for components you have not installed yet).

Part of the Corel WordPerfect suite is a program called "Photo House". In contrast to MS Office, this gets installed as part of the standard installation and it is prominently displayed; no easter egg hunt here.
In addition, you can use a large number of photo editing software. If you have a scanner, some such software probably came with your scanner.

The actual steps are very similar, no matter what specific software you use. As WordPerfect has been the standard word processing software at Hunter, I will use Corel Photo House for the demonstration.

Step 2: Create a new image in a photo editing application, paste the clipboard contents, and edit as you please

A. Create a new image in the dimension of your current screen resolution (e.g., 600x800 or 480x640). To produce a screen shot you may want to reset your screen resolution to lower level (say 480x640) and then display your document at 600x800. This way you achieve a nice shrinkage of the screen shot without the distortion you typically encounter when resizing a (bitmap) graphic later on. But don't worry about this for your first try.
You do this by selecting "new" from the "File" menu in the upper left corner. Changes the measurement unit to "pixels" -- if necessary -- and use a resolution of "100". Whether you want to use 256 colors or more colors depends on your taste. Keep in mind that lower color resolution means smaller file size in the end, and often "256 colors" gives images that look good enough.

After clicking okay, an empty frame for the new image will appear. Use "Edit"/"Paste" or CTRL-V to paste the clipboard contents (your initial screen shot) into this frame.

B. Now we need to trim ("crop") the image so that only part we are interesting shows. In Photo House, the "selection tool" is activated automatically; in other software, you may have to activate the selection tool yourself. In Photo House, you see the red-and-white frame indicating the currently selected area. Simply click the mouse on the upper left point of the area you want to select and drag to the lower right point of the area you want to show in your screen shot, then crop the image to this part. In Photo House, select "crop to selection" from the "Image" menu.

And you get (after getting rid of the "notebook" to increase display space and choosing a different zoom from the "View" menu) your final screen shot. Never mind that it does not look quite right; this because the screen shot is not shown at 100%:

C. Now you just have to save this image in a suitable format. If you are working on a document for display on the web, the ".gif" format is your best choice. To get to the "save" window, select "save as" from the "File" menu (as with many other Windows applications):

Make sure to note in which document you save your image file. Also, you may want to change to extension (GIF) to lower case (gif) as unix web servers are case sensitive -- and its more customary to use lower case (but this is not necessary).

D. Now you are ready to put your screen shot into your document. The details, of course, depend on what software you use to produce your document. For web document, I usually use Netscape Composer and it is very easy to include images. I spare you details, you here is the final screen shot as embedded into my document:

Now this may look a little too big, so here is a version (screen shot) captured when the screen resolution was set to 480X640 pixels. Most video cards allow you to switch the screen resolution easily. Usually, you have an icon related to this in your "tray" (the area on the very right of your "task bar", usually the bottom line on your screen. Move your mouse over these icons and little boxes with explanations (against a yellow background) pop up. Once you find the right icon, go to the tab that says "settings" or something similar. There you can choose the screen resolution. It is usually not necessary to restart Windows. So, here is the alternative version of this screen shot (the cropping is not exactly identical, but you get the idea):

Using a special utility

The whole process of copying to the clipboard (pressing the "Print Screen" key), pasting into a photo editing program, editing (cropping) the full screen shot, can be simplified, by using a special utility. There are several such products on the market, I am using Screen Shot 2.0 which currently sells for $29 .95 (as of January 2002, Version 4.0 is available, the price is still the same). Most of the images in this document have been produced with Screen Shot. You may noticed some imperfections like a little too close cropping at the top? This is a glitch in this utility that I have not been able to straighten out (but I have not been trying very hard either). Anyway, here is how it works:

After you have downloaded (buy online with credit card) and installed the program -- all very easy -- you load the program into memory (a little icon depicting two monitors shows in the tray). Then you activate it by a number of "hot keys" -- giving you a range of options as to what kind of screen shot you want (choice of a particular area, rectangular or oval shape, etc.). You use the corresponding hot key combination in place of pressing the "Print Screen" key. Your screen shot gets transfer directly into the Screen Shot editing window where you can do some additional cropping and resizing (if necessary) -- and add some annotations if you like (text as well as arrows and similar "pointer" graphics). When finished with editing/annotating your screen shot, you save it (on your hard drive) using your preferred graphics format. Alternatively, you use just the flexibility in defining the initial screen shot, stored on the clipboard, and then paste directly into Netscape Composer or a similar html editor. In any case, you have more options and more flexibility.

Here is quick screen shot of the screen shot program in action:

If you are going to use this technique more often, it is probably a good idea to invest the money for a specialized utility. But for occasional use, any of the approaches simply using existing resources may meet your needs.