
	The Willamette Galley A Bi-Monthly Newsletter Volume 4, Issue 3, July 2001

PhotoShop Tips: Working with Screenshots

Nancy Wirsig McClure, hand2mouse

Note: This article describes Photoshop 6.0 but can be adapted to earlier versions or similar software tools. Before following these specific instructions, first choose Edit > Preferences > General, and click Reset All Tools.

As a technical writer you may often find yourself documenting software interfaces. You capture screens from an interface and incorporate those screenshots into documents. If the software is still being developed, you may have to simulate the final appearance of the interface. If you have Photoshop, it's a handy tool for editing screenshots, but you may have to forget things you know about editing photographs and illustrations!

Starting with a screenshot of software (Figure 1), let's clean it up to simulate its final appearance (Figure 2). Make sure you start with a file in RGB mode.

Figure 1

Eliminate excess background around our boxes. Use Image > Trim …, and in the Trim dialog, click Bottom Right Pixel Color.
Redraw elements of the image. Let's cover the stray cursor you can see mid-image:

Choose the Eyedropper tool, position it over a pale-blue pixel of our main box's background, and click. Choose the Rectangular Marquee tool and draw a small area around the cursor. Use Edit > Fill to fill with the pale-blue foreground color.
Choose the Eyedropper tool and pick up the darker color of the vertical line. Choose the Pencil tool (under the Paintbrush) and draw a continuation of the darker line over your selection (hold the shift key to constrain it to vertical).
Use Select > Deselect, and change the foreground color back to black.

Add text to the pop-up for Categories. Choose the Text tool. In the Options bar, specify our box's font and size (on my Mac, it's Geneva 10 pt), and set the anti-aliasing method pop-up to None (to simulate jaggy screen text). Click the cursor over the target area, type "Choose a Category …" and hit the Enter key on the numeric keypad. Use the Move tool to reposition the type, then use Layer > Flatten Image.
Recolor the blue box's background. Choose the Magic Wand tool. In the Options bar, set Tolerance to 0 and uncheck Anti-aliased. Position your cursor over a pale-blue pixel, and click. Use Select > Similar to include all other pale-blue pixels. Use Image > Adjust > Hue/Saturation …, and drag the Hue slider (I moved it to +45 to get lavender).

Resize it for print output. Do not change the actual number of pixels! You should scale the image in a way that just makes each pixel occupy a larger or smaller area on the page. Either (a) do the resizing in your page layout software, or (b) use Photoshop's Image > Image Size but uncheck Resample Image. Note: This guideline applies only to jaggy-style screen captures, not to photographs and other images.
Resize it for online output. Ideally, a screenshot is displayed pixel-for-pixel in online designs. If you must resample it for online use, it will get blurry and, at smaller sizes, unreadable. Be sure you know the exact pixel dimensions it will occupy, and use Image > Image Size, as follows:
- Do check Resample Image.
- Set its adjacent pop-up (for interpolation method) to Bilinear.
- Specify the new dimensions in pixels at the top of the Image Size dialog.

Figure 2

After resampling an image, always try sharpening it (it usually looks clearer). Use Filter > Unsharp Mask, with settings that depend on the degree of resampling (for a reduction to 75%, I used Amount 60, Radius 0.7 and Threshold 10).

Sample files and more detailed step-by-step instructions can be found at http://www.hand2mouse.com/guru/screenshots.html. Nancy Wirsig McClure can be reached at nancy@hand2mouse.com.