Design Tidbits

back To Overview of Tidbits

Design Tools

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Miscellany

 

 

UI Toolbox: Capturing and Editing Screenshots – Part II

By Gerd Waloszek, User Productivity, SAP AG – 02/22/2005

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:

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

 

Cropping and Resizing

Cropping and resizing are common steps in editing screenshots:

In some image editors, both tasks can be combined into one step: you create a section of a screenshot and also change its size (useful for thumbnails).

Note also that screenshots and images in general can be cropped and resized in Microsoft Office applications.

Crop tool

Figure 1: The crop tool creates a section of a screen

  

resized screenshot

Figure 2: The resize tool changes the size of a screen

Soft and Hard Resize

A "soft" resize "resamples" an image by interpolating pixels (for example, by bicubic interpolation). A "hard" resize rescales an image by discarding or duplicating pixels. For thumbnails and previews, the soft resize is preferrable. Note that in some cases, the hard resize is the default (for example, if you resize images in Adobe Photoshop in indexed-color format).

Hard resize

Figure 3a: The result of a "hard" resize

  

Soft resize

Figure 3b: The result of a "soft" resize

Applying a sharpen filter may improve the visual impression of the resized image.

Note: For photos, the difference is not as dramatic as it is for screenshots.

See also My Design Tools – Part II for details on resizing screenshots and images.

 

Simple Editing – And a Short Glimpse at Advanced Editing...

For image editing tools, I find the following classification quite useful:

In most image editors, you can use modifier keys to change the behavior of the tools.

In the following sections, I refer to tools that are offered by Adobe Photoshop (Elements). Other image editors offer similar tools. But as there is such a large variety in the tools, I confine myself to providing a concise overview. For further details, please consult your image editor manual.

Paint Tools

All paint tools are so-called freehand drawing tools: You draw with them by dragging the mouse (or a pen on a graphic tablet). You can use modifier keys to restrict the paint direction and, for example, draw straight lines.

These are the paint tools that I use most often:

Pencil tool Pencil: Draws free hand figures (typically 1px wide) with the foreground color
Uses: To edit text or details pixelwise (use the zoom tool for more precision); to draw lines
Brish tool Brush: Paints an area with the foreground color
Uses: To paint with a uniform color, cover unwanted details, etc.
Eraser tool Eraser: Like the brush or pencil but erases the foreground color: Either colorizes with the background color or makes erased pixels transparent
Uses: To erase unwanted screen elements or details; to erase colored areas

Area Tools

All area tools manipulate areas, either of fixed geometric shapes, such as rectangles and ellipses, or of irregular shapes (created with freehand tools). With these tools, you can select areas, cut them out, fill them with a color or pattern, or move them to a different location. In addition, you can copy an area (typically a selection) and create multiple copies if you want to.

These are the area tools that I primarily use for editing screenshots:

Marquee tool Marquee: Selects a regular form (for example, a rectangular area); the form cannot be changed after releasing the mouse button.
The selected area can be cut out (deleted), filled, move, copied, etc. Further editing is restricted to the selected area
Uses: To select a regular area for further editing, such as deleting, moving, or copying it; to limit the effect of other tools on the selected area
Lasso tool Lasso: Selects a freehand form; the form cannot be changed after releasing the mouse button.
The selected area can be cut out (deleted), filled, move, copied, etc. Further editing is restricted to the selected area
Uses: To select an irregular area for further editing, such as moving or copying it; to limit the effect of other tools on the selected area
Bucket tool Bucket: Fills an area with the foreground color
Uses: To fill a (possibly selected) area with color
Move tool Move: Allows you to move or copy a selected area or text – this is one of the tools I use most often
Uses: To move or copy & move a selected area or text to another location in order to modify screen elements or assemble new ones

Advanced Editing: Working with Layers

Adobe Photoshop and many other advanced image editing applications offer the option of layers. Using layers is like placing several pieces of (transparent) paper on top of each other, each with its own image content. On the one hand, layers make working with an image editor more complex. On the other hand, they simplify many tasks dramatically. Some editing operations would not be possible without them.

Layers in Photoshop go far beyond the paper metaphor though, for example, by offering mathematical operations between two layers. These operations can be used for numerous purposes, mostly for creating special graphical or photographic effects.

For simple screenshot editing, I do not usually use layers explicitly – apart from those layers that are automatically inserted by the application, such as text layers and selection layers. Most often, I merge layers into the background image as soon as I have finished an editing step. This is performed automatically if the image is in indexed-color format.

Note also that the image editor can become quite slow when you keep each screen element on a separate layer. In addition, it may be difficult to find out the layer in which an object resides, and to access it. (Adobe Photoshop provides some tricks that simplify this task, though.)

 

Batch Processing and Galleries

Batch processing automates editing steps that would have to be repeated over and over for a set of images or screenshots. The most common editing steps for screenshots are converting the file type of images and resizing them. Note that image editing applications may vary in their batch processing capabilities.

Recently, photo galleries have become popular: On the Web, millions of photos are presented in galleries, be it private or public ones. But photo galleries have more uses: They are useful for presenting collections of screenshots that can be easily navigated, for example, in meetings with colleagues or decision makers. A variety of tools automate the process of creating the respective HTML pages, images of suitable sizes, thumbnails, etc. and can thus save a lot of work. On the downside, the templates and designs provided often fail to fit your needs or taste. Again, image editing applications differ in their capabilities of creating Web photo galleries. There are also dedicated gallery tools. Simply choose the application that suits your needs best.

 

Fonts

Despite all the graphics and colors, text still plays a prominent role on screens. Particularly, when redesigning screens, you may have to add, remove, move, or change on-screen text. The following section includes some tips and tricks for on-screen texts.

Font Size and Screen Resolution

You may sometimes wonder what size an on-screen text is and what the font is. If you are unsure, try different fonts and sizes and compare the results with the text on the screenshot. Finding the correct font size may be puzzling at times, because the physical font size (that is, the size in pixels, not in points) depends on the image resolution. Many image editing applications set files to an initial resolution of 72 dpi, as it is used on the Apple Macintosh. Microsoft Windows, however, uses a screen resolution of 96 dpi (or 120 dpi for large fonts). This difference may confuse you when checking the font size. The following example shows how the font size changes after a resolution change:

Start Resolution
->
Changed Resolution
Resolution 72 dpi (Macintosh) -> Resolution 96 dpi (Windows)
10 pt -> 7,5 pt
Resolution 96 dpi (Windows) -> Resolution 72 dpi (Macintosh)
10 pt -> 13,33 pt


The following figures demonstrate how the physical font size changes for the same font size after a resolution change (figure 4), and how different font sizes lead to the same physical font size at different resolutions (figure 5).

Text in 10 pt size at different resolutions:   Text in 14 pt size at 72 dpi (left) and 10 pt at 96 dpi (right):
Differences in physical font size   Text of the same physical size
Figure 4: Differences in physical font size for the same point size at different image resolutions   Figure 5: The same physical font size at different image resolutions

The above table also shows that there may be no exact font size match, because the font size can assumes fractional values after the resolution has been changed.

My advice: If you need to edit screen text on screenshots, make sure that the image resolution was previously set to 96 dpi.

Softening (Anti-Aliasing)

Do not use anti-aliased (softened) fonts on screenshots. If "anti-aliased" is selected by default deselect it.
Rationale: Screen fonts are not usually anti-aliased. Mixing aliased and anti-aliased fonts on a screen looks disturbing and unrealistic.

For figure captions, call-outs, etc. you may use anti-aliased text. Figure 6 and 7 demonstrate the different looks of normal and softened text:

"Hard" and "soft" (anti-aliased) text

Figure 6: "Hard" and "soft" (anti-aliased) text

"Hard" and "soft" (anti-aliased) text in 400%

Figure 7: "Hard" and "soft" (anti-aliased) text in 400%

Bitmap Text

As I already mentioned, I make little use of layers. While Adobe Photoshop creates a layer for each new text element, I usually flatten the image after the text is in place or has been corrected, which means that the editable text is converted into "non-editable" bitmapped text. Text in a newly captured screenshots is also bitmapped, as is text in screenshots that are imported from other documents. Thus, I often have to modify bitmapped text, which is – as any other element on the screenshot – just pixels.

Moving Bitmap Text into Place – Using Transparent Layers

For editing bitmapped text you have to use the simple editing methods described above: Type new letters or words in a free area (preferably of the same background color as the target area) and move the text patch over the target text. Here, layers come in handy: When you select a patch that is to be moved, it becomes a layer that can be made transparent. Transparency not only helps in aligning text – it simplifies any alignment task.

"Background Fill" Behind Bitmap Text

There is another puzzle that you may encounter: A background color behind bitmapped text may have to be changed. In Adobe Photoshop, an inconspicuous checkbox comes to your rescue: Use the bucket tool and deselect "Contiguous."

In non-contiguous mode, the bucket tool replaces the background color (depending on the tolerance setting) and thus also fills closed forms in letters. Select the area you want to fill with the marquee or lasso tool to prevent the color leaking into other areas.

Background filled behind bitmapped text - contiguous checked Background filled behind bitmapped text - contiguous unchecked

Figure 7: Background filled behind bitmapped text – "Contiguous" checked (left) vs. "Contiguous" unchecked (right)

 

This concludes my short series on capturing and editing screenshots. If you have any suggestions for better procedures or other improvements, or if you find errors, feel free to contact me, and I will gladly update the articles.

 

top top