Phil Couling

Capturing screen shots of software products, web sites and other on-screen items to be included in your media productions, is a common enough task and may initially seem to be fairly straightforward. However, without some fairly simple preparation, the final results can look lackluster or just plain bad. I’ve read articles which focus solely on the software to use, but while selecting the right tool is a necessary prerequisite, it takes a bit more than that to get great screen captures.

Here are some tips for getting great screen captures for use in any kind of media production. Electronic forms of production (e.g. web and PPT) are a bit more tolerant of weaknesses in the process than print, but by aiming for a print standard of quality in the original screen capture, the resultant images will be great for just about any usage.

Contrary to popular belief, graphic images do not have a meaningful dpi (or ppi) measure. They have width, height and depth (color) yielding a pixel count with each pixel representing a unique color in a color model. The number of bits per pixel (bpi) is also referred to as color depth – more bits equals more available colors.

Some file formats include dpi information, along with other metadata, stored inside the file. This metadata however, merely provides guidance to software applications about the intended use of the image; it means very little in practice and can be changed very easily, with no actual change to the quality or size of the image.

It is important to note that dpi and ppi are not interchangeable measures (and they are frequently misused); generally speaking a pixel is comprised of several dots; on a conventional display for example, a pixel is made up of a red, a green and a blue dot. It is more common to speak of the “pixel” resolution of a screen, and it is more common to speak of the “dot” resolution of a printer. There is great variability between printer types and manufacturers and of course professional printing equipment.  dpi and ppi become relevant only when the image is displayed or printed as it is the resolution of the display device or printer which determines how large an image of fixed dimensions will appear. Despite the fact that dpi and ppi are not strictly interchangeable, you can use an approximate rule of thumb, as a 300×300 pixel image on a 150dpi printer will print as an approximate 2” square, on a 300dpi printer as an approximate 1” square, on a 96dpi monitor as an approximate 3” square. Common screen size today is 1280×1024 pixels called SXGA or 1.3 Megapixels. So a full sized screen capture at that resolution sent to a 300dpi printer will usually produce an image of approximately 4.3” x 3.4”. Bottom line: the more pixels you can capture at the very start of the process – the greater likelihood of getting good quality in the final production.

There’s a lot more to know on this subject, and I have eliminated a lot of details for clarity, but that should cover the essential items you need to for screen captures. A more thorough introduction to this subject can be found at: http://en.wikipedia.org/wiki/Pixel

1) The perfect screen capture setup

Use the highest resolution screen that you can find

Screen captures are a fixed number of pixels NOT a fixed dpi, so the more pixels you can capture, the better your captures will look. Many modern graphics applications, browsers and tools use vector-based graphics, so they frequently scale very well on displays of higher resolution. Look to use a 1600×1200, 1920×1200 or even larger display resolution if possible.

Adjust Windows dpi setting

Higher resolutions may not appear to work so well for full-screen captures where you need to get all of the menus and/or on-screen dialogues in the capture. This is because those elements are usually defined to have certain dimensions in terms of pixels; when you put more pixels on the screen, the menus, icons and other text appear small relative to the other content. There is a threshold where that becomes problematic for screen captures.

If a large, high-resolution monitor is used for capture, and fonts look too small, windows can be adjusted to compensate and display larger fonts at the same time as higher resolution images.

This adjustment can be found by clicking on the “Advanced” button of the Windows Display property dialogue. The Display properties dialogue can be accessed from Control Panel or by right-clicking on the windows desktop.

The default setting is 96 dpi. This can usually be increased to 120dpi or a custom setting. I recommend not using the Custom Setting, as that seems to produce intermediate scaling with less than ideal results. This property setting instructs Windows to scale up items it controls such as fonts, menus, title bars, icons etc. The 120dpi setting uses different system fonts so Windows will need to be restarted before they become visible.

These settings are system and graphics card/monitor dependent so some adjustment may be needed to find the best setting for the specific hardware combination being used. What looks best to the naked eye, may not be what is best for your screen captures, so some trial and error may be needed for your particular setup, but at least you now know what to tweak.

Switch OFF Clear Type Tuning

Before capturing anything with text, switch OFF Clear Type tuning. Clear Type Tuning is a windows feature that improves the appearance of on-screen text by using sub-pixel rendering and anti-aliasing techniques. While Clear Type tuning is good, and recommended, for on-screen reading, it is definitely not good for screen captures.

Microsoft provides a couple of tools to tune this feature and switch it on or off. Use either one to disable it for your captures.

On-line tuner:     http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx

PowerToy tuner: http://www.microsoft.com/typography/ClearTypePowerToy.mspx

Set the display to the native resolution or higher

This shows you exactly what will be captured pixel-for-pixel, and prevents video drivers from interfering with the capture through their own scaling of the graphics. For example, this means if you are using a monitor with a resolution of 1920×1200, set the Windows Screen resolution to 1920×1200. If your graphics card can go to a higher resolution than the native resolution of your monitor, but can still be viewed, try that (less common with modern digital displays). Screen captures work from the graphics card, not what is on the monitor, so even though it may look bad on-screen, your captures should look good. Experiment.

2) Capturing and Cropping

Snagit is probably the most popular commercial screen capture software, and it has a lot of extra features to help you manipulate the image after you capture it, but is probably an unnecessary expense for most users. There are better free alternatives and two that I highly recommend are: IrfanView and Cropper

http://www.irfanview.com

http://blogs.geekdojo.net/brian/articles/Cropper.aspx

IrfanView is just about the best image viewer available and is indispensible even if you are an experienced or frequent PhotoShop user. It has capable screen capture tools and can quickly and easily perform rectangular cropping of captured images.

Cropper, however is just about the best free purpose-built screen capture tool. It provides very precise control over exactly what parts of the screen you need to capture, and allows you to repeat steps and captures easily and accurately.

3) Always save in PNG format

Graphic images are large and there are two approaches to compressing them for efficient storage: lossy compression and lossless compression. Screen capture images should always be saved in a lossless format to preserve detail and avoid generational loss between successive edits.

JPG is a lossy format, great for photographs, but dreadful for computer graphics and screen captures. Use of JPG is one of the main reasons that typical screenshots look so bad in print. In case I wasn’t clear: never use JPG format for screen captures!

BMP is a well known lossless file format but offers minimal to zero compression, so file sizes can be huge.

TIFF (TIF) is a lossless format but is inconsistently implemented and most people do not have tools to manipulate it.

The preferred lossless format is PNG which offers a great combination of efficient lossless compression and comprehensive support for transparency. Transparency is important for non-rectangular images which need to be displayed on top of colored backgrounds or other images professionally.

4) Use “Nearest Neighbour” enlargement for screen captures

Once you have the image captured and saved, you will probably need to manipulate it somehow. If resizing, try to avoid using any Lanczos, fractal, bilinear or bicubic resizing for screen captures. These are sophisticated techniques that are perfect for photographic and other classes of complex images images and they are often the DEFAULT setting for enlargement and reduction in popular graphics applications. The mathematical techniques used by these methods however, introduce too much noise and visual artifacts into screen captures and computer generated graphics images. See the examples below which highlight the cumulative effects of Clear Type tuning and resizing on a fragment of text.

You probably do not need to show text as big as these examples (4x scaling), but if your SXGA screenshot needs to be professionally printed on a high resolution press, it will HAVE to be scaled up to just look “normal” sized on the printed page.

Examples:

4x Enlargement	ClearType OFF	ClearType ON
Bicubic Resampling
“Nearest Neighbour”

Text and computer generated graphics enlarged with the “Nearest Neighbour” method can have a “pixelated” look, but that is usually clearer in print than the other techniques and is somewhat expected by an audience when they look at a screenshot. The text still looks crisp with well defined edges.

If a combination of text, computer graphics and photographic images are present in the same screen capture, an experimental approach may be needed to find the technique or algorithm which yields the best results, but this approach works best for most situations.

5) Perform all non-rectangular cropping and masking in PhotoShop

For images that may find their way onto the web or into PowerPoint slides, the principle objects should be isolated and masked against a transparent background before saving as PNG and making available to others. Most of the desktop tools users have available to perform masking are horrible and produce amateurish looking results. There are a million horrible PPT slides to prove it! Tools such as PhotoShop or The Gimp are required to get a professional result if you need more than a basic rectangular crop.

This can be a fairly specialist subject area, so if you are providing screen captures to others for layout and production, just give them your raw PNG file captures and leave all the scaling, cropping and post-processing work to the experts.

I hope these few tips will help you get better results.