Print Documentation: Screen Captures

This tutorial covers two important tasks: making screen captures for use in your print documents, and adding text labels to those images.

See the FrameMaker resource page for additional study materials.

Got a question about this tutorial? Post it in the Online Print Doc FAQ

For software documentation, one of your most common requirements is screen captures. This tutorial shows you two ways to capture screens, convert them to GIF format, and then crop them—one, using Windows 95 or later. In this tutorial, you'll see how to capture a screen, save it as a bitmap graphic, convert it to a GIF file, and then crop it to the the appropriate size.

1. First, set up something for a screen capture. For example, you could open Word in Windows, click on the Tools button, and then on the Templates and Add-Ins button. (Imagine you are writing a tutorial on using Word templates.) But anything displayed on your computer screen, even the basic barebones desktop can be screen-captured.

2. Press the Print Screen button on your keyboard. This causes the entire screen to be captured. In some configurations, Alt-Print Screen captures only the currently active window. (In Windows 3, you can see the captured image Clipboard; I'm not sure where the Clipboard is in Win 95 and later.)

3. Try pasting the screen capture directly into an achored frame in FrameMaker. Or, open Microsoft Photo Editor or Paint, and then click on Edit and then on Paste as New Image to paste the screen capture into the viewing/editing area.

4. To crop an area of the image, click on the crop icon (the square with the dotted border). While holding down the left mouse button, draw a cropping border around the area you want to keep. (Make sure the mouse cursor is within the image area.) When you have the cropping border where you want it, click on Image and then on Crop. (Paint lacks a crop tool: select the area and cut or copy.)

5. To save the image, click on File and then on Save. Note that, by default, Photo Editor saves the image as a GIF file (by default, Microsoft Paint saves it as a .bmp file). If you want to reduce the byte count (file size) of the graphic, click on the More>> button and then on Convert to: and select Gray Scale (8 bit).

You should now have a nice GIF image suitable for use in web pages, online helps, or hardcopy documents. If your word-processing application requires some other graphic format, you can use Photo Editor to convert. However, most desktop-publishing software has import capability, which can take in a wide variety of graphic formats and convert them to the type required in that application.

You'll often need to add text labels to your screen captures. The following describes two ways to do that—the first, using PaintShop Pro exclusively, and the second using PaintShop Pro to capture the image and Microsoft Word to add the text labels.

Note: Try adding text labels directly into FrameMaker using the graphic and text tools it provides. Otherwise, try the folowing methods.

PaintShop Pro Method

Here's how to get screen captures and add text labels to them exclusively with PaintShop Pro:

1. If you don't already have PaintShop Pro, you can get an evaluation copy of it at this address: www.jasc.com/psp.html.

2. Click on Capture then on Setup. The defaults work just fine, but you might want to see how they are defined.

3. Get the screen set up the way you want it for a screen capture; then go to PaintShop Pro and click on Capture and then on Start. The PaintShop Pro window will be minimized, allowing you to capture the image you want.

4. Unless you changed the default setting, right-click the mouse in the area you want to capture. The PaintShop Pro window will be maximized again.

5. If it doesn't happen automatically, paste the image into a new window in PaintShop Pro. To do so, click on Edit, then Paste, and the Paste as New Image. This will put the screen capture in its own window within PaintShop Pro.

6. To add some white space around the screen capture in which to insert text labels, click on Image and then Add borders. Usually 100 to 200 pixels will be enough room for text labels.

   Note: In PaintShop Pro, you work in a rather "zoomed-out" mode, meaning that the images look smaller than they will appear in your web pages. Also, PaintShop Pro saves files in its own .psp format by default. You must specify .gif when you save these files.

7. To add text to the graphic, click on the text tool (it's a capital letter A in the toolbar along the left edge of the PaintShop Pro window, and then click anywhere in the image. When the dialog for the text tool open, type your text in the box labelled Enter text here. Notice that you can change font characteristics in this same dialog box.

   

   Note: To change the color of the text, you must select a different foreground color in the color-picker tool bar on the right edge.

8. When you've typed the text you want, click OK and then move the text to the spot where you want it. (You un-select it, click Selections and then Select none.

9. To draw lines from the text labels to related parts of the image, click on the line tool, which is located just below the text tool mentioned above.

10. Don't forget that when you save this graphic, you must specify .gif — by default, PaintShop Pro uses its own file format called .psp.

PaintShop Pro & Microsoft Word Method

If you prefer using Word to create the text boxes and arrows, here's how:

1. If you don't already have PaintShop Pro, you can get an evaluation copy of it at this address: www.jasc.com/psp.html.

2. Click on Capture then on Setup. The defaults work just fine, but you might want to see how they are defined.

3. Get the screen set up the way you want it for a screen capture; then go to PaintShop Pro and click on Capture and then on Start. The PaintShop Pro window will be minimized, allowing you to capture the image you want.

4. Unless you changed the default setting, right-click the mouse in the area you want to capture. The PaintShop Pro window will be maximized again.

5. If it doesn't happen automatically, paste the image into a new window in PaintShop Pro. To do so, click on Edit, then Paste, and the Paste as New Image. This will put the screen capture in its own window within PaintShop Pro.

6. Save the image as a .gif file; note that by default, PaintShop Pro saves it as a .psp file, which will not work for web pages. Make a note of the folder in which the image is saved.

7. Open Microsoft Word, and in a blank document insert the image you just saved: click on Insert, then Picture and then on From File. Find the graphic you just created and click on Insert to bring it into the blank Word document.

8. If it is not showing, display the drawing toolbar. Click on the textbox icon to create textboxes and type the text labels into them.

   

9. By default, text boxes in MS Word have borders; to get rid of the borders, click on Format and then on Format Text Box.

   

10. Click on Color in the Line section of the dialog box, and specify No line.

    

11. To draw lines from the text boxes to specific areas of the image, click on the arrow tool in the drawing toolbar.

12. When you've finished adding text and arrows to the image, use PaintShop Pro to capture your work from Word just as you did in the above.

13. Insert the next screen capture with the text and arrows into PaintShop Pro. This time you will need to crop the image (reduce it to just that portion that you want to show).

14. Click on the cropping tool (fourth icon down on the left-edge toolbar), and draw a box around the area you want to crop. You can size and move the box once you get started. When the box is in the position you want it, click Image and then Crop.

15. Save this image as a .gif file, as explained in the preceding.