Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

UI Toolbox: Capturing and Editing Screenshots – Part I

By Gerd Waloszek, SAP User Experience, SAP AG – Updated: January 30, 2007

Screenshots and the redesign of screens are the bread-and-butter business of many user interface designers. Nevertheless, I often find that there are "knowledge gaps" that need to be bridged. Therefore, in a series of two articles, I want to help you avoid the greatest obstacles in dealing with screenshots:

  • Part I looks at what screenshots can be used for and where you can get them from. It offers some general recommendations for capturing screens and ends with a plea against the use of the JPEG file format for screenshots, with illustrative examples.
  • In Part II, I will briefly cover simple editing tools, comment on how to patch screens together, consider what to observe when dealing with screen text, and provide hints on batch processing and Web galleries.

Please note that this short overview is by no means exhaustive – it just scratches the surface...

 

What Are Screenshots Used For?

User interface designers often use screenshots in their daily work, for example, in:

  • Text documents, such as design specifications or guidelines (for example, Word, HTML files)
  • Presentations (for example, PowerPoint files)

They show what actual screens look like – or should look like, as is the case with specifications and guidelines.

Screenshots are also used for:

  • Screen redesigns (for publication in text documents and presentations, or use in prototypes)
  • Static or interactive Prototypes based on screens (HTML, Visual Basic, etc.)

Redesigns and prototypes are a useful instrument for discussing designs with colleagues or decision makers. Ideally in this situation, you can create design alternatives from which a decision can be made (or a compromise found).

 

What To Do with Screenshots?

The basic procedure for creating and using a screenshot is to capture it and publish it in a document or an application without modification. In its simplest form, this is just a matter of:

  • Pressing <Alt>-Print> or <Print> and pasting the clipboard content into a document, or
  • Cut-and-paste when retrieving a screenshot from a document and pasting it into another one

See Where Do I Get Screenshots from? for more information and some caveats...

More advanced processing of screenshots might include:

  • Cropping and resizing screenshots
  • Editing and redesigning screenshots (editing means minor changes; redesigning may involve a complete rearrangement of screen elements, the addition of new ones, the deletion of larger parts, and much more)
  • Creating simple or more advanced prototypes based on HTML, PowerPoint, or Visual Basic
  • Creating simple HTML-based screenshot galleries

I will address these topics in Part II of this series.

 

Where Do I Get Screenshots From?

Most screenshots originate from one of the following three sources:

  1. You capture it directly from a screen
  2. You receive it in a document and need to retrieve it from there
  3. You receive it as an image file (which may be the output of a screen capture or retrieve operation).

Directly from the Source: How To Capture a Screenshot

Windows offers two simple ways of capturing a window or screen:

  • <Alt>-Print captures the front-most window
  • Print captures the whole screen (it also allows you to capture open menus)

Dedicated screenshot applications offer far more options, such as showing or hiding the mouse cursor, capturing open menus, creating sections, saving the capture in a certain image file format, and many more.

Update: Joshua Vaughn drew my attention to Size-O-Matic: "It's a great little tool for making sure screenshots you capture are representative of a specific resolution when you're using a larger monitor." The tool offers a set of fixed resolutions from 640*480 pixels up to 1600*1200 pixels. You can download Size-O-Matic for free from www.pythoness.com. (The company whould, however, appreciate a donation of $3 to $9.)

Retrieving Screenshots from Office Documents

Most screenshots that I receive from colleagues are embedded in MS Office documents, such as Word and PowerPoint documents. In this case, however, you can run into problems:

  • Retrieving Images
    • In Word and PowerPoint, you can select an image and copy it to the clipboard. This works fine for exchanging screenshots between Office documents.
    • However, when pasted into an image editing application, such as Adobe Photoshop, the screenshot will often be distorted – particularly, if it had been rescaled in the source document.
      Workaround: See Trick below for a workaround.
  • Retrieving Additional Graphical Elements
    • Screenshots are often annotated with text, lines, boxes, etc. These graphical elements cannot be transferred into an image editing program easily.
      Workaround: You may capture a screenshot in presentation mode (PowerPoint) or 100% size (Word) to retrieve the screenshot together with its annotations from the Office document.

Note: In PowerPoint, you can select a screenshot or any other bitmap graphic and save it as an image file (see below for image file formats). This is not possible in Word.

Trick: Rescuing Screenshots from Word and PowerPoint using MS Photo Editor

Note to Office 2003 users: Regrettably, Office 2003 no longer includes the MS Photo Editor application, which is used in the procedure below as an intermediate stage for retrieving images from Office documents (Word, PowerPoint). Read more below.

Obviously, the Windows clipboard preserves unwanted meta information about the screenshot. My "trick" (with thanks to Kai Willemborg!) is to use the Microsoft Photo Editor as an "interim storage" to get rid of this information. Here are the necessary steps:

  • Select the image in the source document
  • Copy it to the clipboard (<Ctrl>-C)
  • Paste the image into the MS Photo Editor (Insert New Image from Clipboard)
  • Select the image in the Photo Editor (Select All - <Ctrl>-A) and copy it again (<Ctrl>-C)
  • Paste the image into the image editor (<Ctrl>-V)

Other programs might do the trick as well; for example, you can also use an older version of ThumbsPlus for this operation (read more).

Note Continued: Currently, I cannot offer a universal solution to this problem. I returned to an old strategy of mine, namely to paste images into an older version of ThumbsPlus (I use version 3.2) and retrieve the bitmap (Image -> Extract Bitmap). This works in nearly 100% of the cases. Read more about this procedure in an older article on mine.

Screenshots as Image Files

Depending on your needs, you can:

  • Either load the file into an image editor. There, you
    • Select it (Select All - <Ctrl>-A) and paste it into the target document
    • Edit it. The edited images should be saved as a new image file, not just pasted into another document (so you preserve your changes).
  • Or import it directly into the target document. Note that Office applications allow for minor retouching, such as cropping and sizing.

 

Recommendations for Capturing Screenshots

When capturing screenshots, keep the following recommendations in mind:

  • Set the screen properties to the Windows default settings, if applicable – do not use obscure settings (colors, fonts, sizes)
  • Set the window to an appropriate size, particularly if you want to capture a series of screens that is to be presented in sequence:
    • If a screenshot of a full window is needed, use a standard size, such as 1024*768
    • Preferably, you should use full screen mode for pages that appear in a browser window
    • Otherwise, resize the window so that it shows the relevant area only. (You can also crop the screenshot later.)

In general, you should remove unnecessary elements from the screenshot, for example, by cropping it. This helps people to focus on the relevant features of the screen, instead of being distracted by irrelevant elements.

 

A Plea: Fighting the JPEG Format for Screenshots

Without going into the details of image file formats too deeply, I would like to discourage the use of the JPEG format for screenshots for the following reasons (the same applies to the PNG-24 version that uses a lossy compression):

  • Artifacts: JPEG images contain artifacts, especially around text and edges – the more artifacts, the more the image is compressed. Even uniformly colored areas can be affected by artifacts.
  • Wrong Color Values: As the JPEG compression clusters colors, the compression introduces hue shifts that can be more or less subtle. As a result, you may not be able to pick a correct color value from the image (some GIF color palettes may also introduce subtle hue shifts).
  • File Size: Depending on the object, the JPEG compression may – contrary to many people's beliefs – not lead to smaller image file sizes. While the JPEG format can lead to dramatic reductions of the file size for photos, this may not be true for screenshots. Uniformly colored areas compress much better with the LZW algorithm used by the GIF, PNG, and TIFF formats. I found cases where the GIF file was only a third of the size of the corresponding JPEG file (see example below).

Recommendations

The drawbacks of the JPEG format lead me to make the following recommendations (which also apply to PNG-24 images that are saved with a lossy compression):

You Can Use the JPEG Format...
  
Do Not Use the JPEG Format...

... if the only purpose of an image is to provide a visual impression of the screen or screen prototype. In this case, you can use it in:

  • Presentations and office documents
  • Screen galleries or navigable HTML prototypes on the basis of unedited screens

Be careful not to use a compression rate that is too high, because this may severely impair the visual impression of the screenshots.

     

... if it is known or expected that the screenshot will be edited later for:

  • Corrections of the layout or other errors
  • Redesigns, that is, major changes of the screen content
  • Use in prototypes (for example, in navigable HTML prototypes) that contain edited screens

In some cases, artifact may be barely noticeable. In others they can be very disturbing, particularly if an image or parts of it are to be reused for designing new screen prototypes.

Rationale for the "Don'ts"

  • Artifacts in bitmap texts make later text changes difficult
  • Artifacts and hue shifts in colored areas make patching images a hassle:
    • Areas may not fit together because of hue differences
    • Patterns and borders may not fit, etc.
  • Hue shifts make it hard to pick the correct color from a screenshot (if it is not known from other sources)

Alternative File Formats

These are the most common Web file formats that can be used for screenshots:

  • GIF: 2-256 colors (8 bits), lossless LZW compression (direction dependent)
  • PNG-8: 2-256 colors (8 bits), lossless Deflate compression (no direction dependence)
  • PNG-24: 16 million colors (24 bits), lossless Deflate compression, considerably larger file sizes than PNG-8 or GIF, preserves all colors

In most cases, I use the GIF file format for screenshots; PNG-8 leads to slightly smaller files, though. The screens themselves rarely require more than 256 colors. Only window titles or banners usually introduce more colors. Dithering is acceptable here. There is a problem with the color palettes, though: In Adobe Photoshop it is hard to find out, which of the color palettes (perceptive, adaptive, selective) does not introduce subtle hue shifts and preserves the exact colors. (I opt for "selective.")

Comment from Martin Rieger: Based on my experience it is therefore the best to use PNG-24 for lossless compression of images (e.g. screenshots) or saving screenshots uncompressed (Windows Bitmap).
(Thanks, Martin for some corrections regarding the PNG format!)

Example Image

The following example demonstrates why JPEG is an unsuitable file format for screenshots:

GIF example screenshot      JPEG example screenshot
File size for GIF: 1.3 KB   File size for JPEG: 4.7 KB

Figure 1: Comparison of screenshot saved in GIF and JPEG

GIF image vs. JPEG image (30% compression rate). Note that even though the JPEG compression rate is fairly high in order to make compression artifacts more visible, the lossy JPEG compression leads to a larger file size than the lossless LZW compression in the GIF image.

Enlarged JPEG screenshot

Figure 2: Enlarged JPEG screenshot

The JPEG image was enlarged to demonstrate the compression artifacts. Most noticeable are the artifacts around text and at edges. But even the color values of uniform areas are not guaranteed to preserve the original values. (The compression can lead to subtle color shifts.)

See also the section of the screen partially filled with yellow color to demonstrate the hue artifacts (tolerance 1 – tolerance 4).

Further Examples

The following examples demonstrate artifacts around edges and text, hue shifts, and the creation of "block areas" in JPEG screenshots.

Preview (Click for Large Version)
Enlarged Section

GIF format
GIF Format

JPEG format
Same screen saved in JPEG Format (quality 30%)

See also section of the screen partially filled with yellow color to demonstrate hue artifacts (tolerance 1 – tolerance 4)

GIF format enlarged
GIF Format

JPEG format enlarged
Section from the JPEG Format image

Section showing artifacts around text and block artifacts and hue shifts in uniformly colored areas

Screen saved in JPEG format with artifacts

Screen saved in JPEG format with artifacts (See also enlarged section to the right)

See also screen partially filled with yellow color to demonstrate hue artifacts

Enlarged section showing artifacts

Enlarged section showing artifacts

Screen section saved in the JPEG format to demonstrate block areas

Screen section saved in the JPEG format to demonstrate block areas

Section partially filled with yellow color to demonstrate hue artifacts

Section partially filled with yellow color to demonstrate hue artifacts

Enlarged section showing color blocks

Enlarged section showing color blocks

Ditto with yellow color

Ditto with yellow color

 

This concludes Part I of my article series on screenshots. In Part II, I will briefly address simple editing tasks, comment on how to patch screens together and how to work with text, and finally provide some hints on batch processing and Web galleries.

 

References

 

top top