How to take screenshots

To write computer-related documentation, one often wishes to include screenshots—instructions and hints appear below. If the resulting images will be put on a webpage, then it is worth expending the one-time effort with some pre-processing and post-processing to make them as small as possible in the following three ways:

• small dimensions (to fit in unknown browser window);
• few number of colors (to reduce conflicts with other color needs of unknown browser or operating system);
• small filesize (to reduce loading time, especially over dial-up connections).

Furthermore, the <img ...> tag should always specify the width and height attributes, so that the browser can format the webpage prior to loading the images.

Pre-processing

Rounded windows, shading, aqua effects, colorful icons, and so forth may look great on-screen, but do not always come out well on paper, and eat up a lot of precious bytes of image size for web display. Prior to taking screenshots, it is best to simplify the desktop in the following ways:

• Turn off pixel smoothing, LCD effects, anti-aliasing.
• Turn off shading/aqua in window borders, window title bars, buttons, and so forth.
• Change window border shape to be rectangular.
• Use a solid color (no image, no gradient) for the desktop background.

How to do this in Microsoft Windows XP

The easiest approach is to create a separate Windows XP account for taking screenshots and install this theme in that account.

How to do this in Ubuntu GNU/Linux

In Preferences/Theme, click Details, change the Window Border to Mist, and the Controls to one of Mist, BlueCurve (this one may be best), Metal, or Simple. In Preferences/Font, try Monochrome, or Best Shapes if necessary, but do not use LCD subpixel stuff. Finally, right-click on the desktop background, and change the settings to a solid color with no gradient.

Setting up for the screenshot

Take a moment to reflect on what you are trying to convey with the screenshot. You don't want to take an image of the entire desktop, if you're only trying to show what is happening in one window. Often much of a window is blank, so make the window smaller, just big enough to contain the important information you wish to convey. If you are trying to show which menu item to choose, you might want to take an image of just the menu, with the item in question highlighted.

Generally speaking, you'll have to take a screenshot of more than you want, and then you'll clean up the result during post-processing.

Taking the screenshot

Microsoft Windows XP

• Don't forget the pre-processing.
• Pressing Alt-PrintScreen places an image of the frontmost window on the clipboard. Pressing PrintScreen by itself places an image of the entire desktop on the clipboard.
• Open MS-Paint. (From Start/Run, issue the command "mspaint".) Create a new empty image, and use Edit/Paste to bring in the screenshot you just took. (If the screenshot is smaller than the default Paint canvas, you'll end up with white areas. Start over: create a new empty image, change its dimensions to 1x1, and Paste again. The canvas will grow for the Paste, but it doesn't shrink.)
• Use MS-Paint to Save As, using PNG as the file format (it is superior to all the rest).
• Don't forget the post-processing.

Apple Mac OS X

Pressing Command + Shift + 3 creates a PDF (or PNG in Tiger) file on your desktop containing a capture of the whole screen. Pressing Command + Shift + 4 lets you select the area to be captured. To take a capture of a menu or a window, press space bar after Command + Shift + 4. To copy a screenshot into a clipboard, hold CTRL key when issuing the commands above.

Ubuntu GNU/Linux

• Don't forget the pre-processing.
• Pressing Alt-PrintScreen grabs the frontmost window, while pressing PrintScreen by itself grabs the entire desktop image. You'll be presented with a SaveAs dialog to save the PNG image.
• (If you want to take an image of the mouse doing something, like selecting a menu item, you'll need to take a delayed screenshot. You do this by issuing the command [comming soon].
• Don't forget the post-processing.

Post-processing the screenshots

One-time post-processing can not only improve the aesthetic appearance and functional quality (what information is being conveyed) of the screenshot, it can also significantly reduce the image filesize. (For example, it might go from 40K down to 3K, which for dial-up users translates into going from 8 seconds down to half a second of loading time.)

You'll want to use a powerful bitmap image editor, such as The GIMP in Linux, or PaintShopPro in Windows.

• First of all, do some cheating on the image, if applicable. For example, the window you took a screenshot of might have had a fixed width, but part of the window is empty, and the corresponding part of the titlebar and frame doesn't have anything interesting, so you can manually reduce the window width.
• If you want to highlight something, such as which button to push, this is a good moment to manually draw in a red outline or other suitable indications. If you use a text tool to write in text, be sure to disable anti-aliasing: the tool should lay down clean boring one-color pixels.
• If you want transparency, you'll have to turn on an Alpha channel and setup the layers appropriately. Generally speaking, you'll want to replace the desktop background in your image with full alpha transparency. If your image is of a single window, there shouldn't be any desktop background at all. But if you are showing a couple nested menus, or one window overlapping another, then you'll need to eliminate the desktop background in certain spots. The only time you don't need to introduce alpha transparency is when you're intending to have a screenshot of the entire desktop (this is rare) or you just have an image of a single rectangular window.
• Change the image type from TrueColor to Indexed, and try this with or without dithering. You'll have to pick the number of colors. Try 4 (or 3 if you've got alpha transparency). You probably won't like the results, so undo, then try again with 8 (or 7). Next try 16 (or 15), then 32 (or 31), then 64 (or 63). Stick with the smallest number for which you are satisfied that the colors convey the important information to the user (even though there may be less color brilliance than in the original image). Keep in mind that a screenshot is supposed to quickly convey useful information to the user, not be a pixel-for-pixel color-perfect identical reproduction that takes a long time to load.
• Use "Save As" to again save as a PNG but under a new name, turn off the extra data saved with the image, and increase the compression level to 9.
• Run optipng -o7 imagefile.png on the file.
• Compare the file sizes between old and new, and be proud of the reductions you achieved!