Do you ever 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!

STEP-BY STEP INSTRUCTIONS for commonly-needed edits on screenshots.

These instructions assume you are working with a specific screenshot.
Click here to open a browser window showing it.

• Eliminate excess background.
• Re-draw elements of the image.
• Add text to the image.

• Recolor areas of the image.
• Resize it for print output.
• Resize it for online output.

In your web browser, you may want to copy the BEFORE file to your hard disk, and use it to experiment with these instructions.

Lauch Photoshop 6.0 and open your file.

Make sure you start with a file in RGB mode. If you have a GIF, first chose Image > Mode > RGB; then choose Save As... and specify Format as Photoshop document (.psd).

Choose Edit > Preferences > General. In the Preferences dialog, click Reset All Tools, then OK.

Choose Image >Trim..., and in the Trim dialog, click Bottom Right Pixel Color, then OK.

Choose the Eyedropper tool. In the document window, position it over a pale-blue pixel of our main box’s background, and click. Observe that the foreground color swatch (at the bottom of the tool palette) changes to pale blue.

The demo at right can playback as animation.....

Choose the Rectangular Marquee tool. In the document window, draw a small area around the cursor.

The demo at right can playback as animation.....

Choose Edit > Fill to fill with the pale-blue foreground color.

Choose the Eyedropper tool (as you did before), and pick up the darker color of the vertical line.

Choose the Pencil tool (it is a pop-up choice under the Paintbrush on the tool palette).

The demo at right can playback as animation.....

Use the Pencil to draw a continuation of the darker line over your selection. While drawing, hold the shift key to constrain your drawn line to vertical.

Choose Select > Deselect.

Change the foreground color back to black.: next to the color swatches on the tool palette, click the little black/white icon.

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.

Choose the Move tool. In the document window, position your cursor over the type and drag to reposition it.

Choose Layer > Flatten Image.

Choose the Magic Wand tool.

In the Options bar, set Tolerance to 0 and uncheck Anti-aliased.

In the document window, position your cursor over a pale-blue pixel, and click.

Choose Select > Similar to include all other pale-blue pixels.

Choose Image > Adjust > Hue/Saturation.... In the Hue/Saturation dialog box, drag the Hue slider (I moved it to +45 to get lavendar).

Do not change the actual number of pixels! You should scale the image in a way that simply makes each pixel occupy a larger or smaller area on the page.

Note: This guideline applies only to jaggy-style screen captures, not to photographs and other images.

Either (a) do the resizing in your page layout software, or (b) use Photoshop’s Image > Image Size but uncheck Resample Image.\

Be sure you know the exact pixel dimensions the image will occupy, and Choose Image > Image Size. In the Image Size dialog box:

• Check Resample Image.
• Set Interpolation Method (the adjacent pop-up) to Bilinear.
• Specify the new dimensions in pixels at the top of the Image Size dialog.

After resampling an image, always try sharpening it (it usually looks clearer), as follows....

Use Filter > Sharpen > Unsharp Mask.... In the Unsharp Mask dialog, specify settings that depend on the degree of resampling (for a reduction to 75%, I used Amount 60, Radius 0.7 and Threshold 10).