Guidelines on Graphics Usage

By Uday Chava

Illustrations and technical graphics are essential to any technical documentation. They assist users' understanding by simplifying complex content through clear, understandable and effective information. A primary objective of technical documentation is to ensure that users use products effectively and safely. Graphics and illustrations assist in accomplishing this objective. Striking the right balance between text and graphics enables documentation to be effective support to product use. This article recommends a few guidelines and best practices to adopt when working with illustrations and graphics in technical documents.

Basic Rules

When planning for graphics and illustrations, first determine how the images will be used. Images must be designed based on their purpose. For instance, images developed for the web, for print, and for archival purposes are all different.

Following are some specific pointers for particular kinds of projects:

Rule 1: Always save a master image in a non-lossy/ lossless format

Always save master images in a lossless format. Some image formats lose image quality when compressed from their original size or when the image format is changed to a lossy format. A popular example of a lossy format is the JPEG. For example, if you save a master image as a JPEG. Every time you alter and save a JPEG, the quality of the image is decreased. However, if the master image is in a non-lossy format such as TIFF or PNG, the quality of the image is ensured.

Rule 2: Start with a good image, then reduce the quality to suit your needs

Use high quality images that are saved at high resolution as they are easier to customize. It may not always be feasible to use the master image in your document thus requiring you to compress the master image and save in a lighter format.

You cannot take a small JPEG and turn it into a high-quality print. However, you can take a high-quality printable TIFF or EPS image and save it as a small JPEG using a good image editor.

Rule 3: Manage the images

Adopting a systematic file naming convention is important for identification, system compatibility, and to demonstrate ownership of the image. Although not a standard, a general practice is to use an eight-character file name with a three-character (alpha-numeric, lowercase) extension to accommodate different systems;

The first two or three characters can be an alphabetical unit-specific identification and the remaining characters a numeric digital object identifier. For example: wh000421.png (write help, digital object number 421, PNG).

Rule 4: Use images and image formats that are non-proprietary and supported

This rule points to the intellectual property (patented ownership) issues around image formats and images themselves.

• Make sure the image formats that you use for publication in your documents are non-proprietary.

• Avoid reusing images that are already published and copyrighted by someone else.

Assessing Your Image Needs

While planning for your documentation, it is important to plan for your graphics and illustrations requirements. While the most common images that you use maybe screenshots, there is a likelihood of using images of the product (in cases where the product is a physical entity), logos of the product. An equally important factor is to have clarity whether the documents you develop are likely to be printed or distributed on the web and if distributed on the web, would they be in a PDF or a HTML format.

Using images in print documents

When working with documents and images that will be printed, you need to ensure that you use high resolution images. There are two factors to consider: the physical print size and the dpi (dots per inch).

1. Increase the image size to the maximum possible.

2. Set the image resolution to the maximum possible. This will result in a good quality print on almost any printer. The ideal resolution is 400 dpi.

3. Choose a standard format for your image. For print documents, TIFF images print well. If size is an issue, PNG format is a good compromise. If you are serving a printable image on the web, PDF offers good compression and excellent quality. For documents that will be converted into PDFs, PNG is a good, lossless image format.

Using images in online documents

Images for Web-based publications introduce newer limitations. In order to be easily viewed on the web, most images are served in JPEG or GIF formats, which are lossy and compressed. You must balance image quality with the size of each image. This depends on the audience and the purpose of the image. A logo should be very small, while a manuscript page should be large.

While some Help Authoring Tools (HATs) recommend against using images, it may be necessary for you to use images in online or Web-based help. Be sensitive to the fact that the application is the important part and not the help itself.

Caution: When preparing images for the Web, ignore all issues dealing with print. Don't look at the scale in inches or even in dpi. Use pixels instead, since this is how an Internet browser measures an image.

• Always design in RGB (red, green, blue) mode at 72 dpi (dots per inch) with an 8-bit maximum size. For example, 8 bits gives you 256 colors to play with, while 3 bits gives you only eight colors.

• Generally, Web images use a resolution of 72 dpi. This is not so much a rule, but a guideline.

• Converting high-resolution graphics usually means reducing the image from 300 pixels or more per inch to 72 pixels per inch. This makes a big difference to image quality, such as jagged edges, or gaps where colors are removed. Dithering or diffusion fills in missing colors in a uniform way to make the transitions between colors smoother. Dither an image only once. The more you dither, the blurrier the separations get between colors. In some cases, to get a clean result you may need to work on the GIF and touch it up pixel by pixel.

• If an image contains large text, it may have jagged edges. Try anti-aliasing to smoothen the jagged edges you get when working with fonts in digital graphics.

As a general rule of thumb, scale your image to a maximum of 800 x 600 pixels (the size of an average computer screen), and go on from there.

Photo editing tools such as Photoshop, PaintShopPro, and Fireworks offer features that will enable you to create good images. Photoshop is the industry standard and is excellent for fine detail manipulation and image creation.

Archiving images

To ensure the images are well preserved for archival for a long time and they are in a reusable state, the following needs must be addressed:

Metadata: For an image to remain useful, it must have information attached to it, such as the place, the date, the subject, and the original medium. Ideally, this information should be searchable and easily accessible.

Storage Medium and File Formats: The best way of ensuring that your images remain accessible is to use an open standard format instead of a proprietary format. In addition, ensure that all images are migrated to new media and formats when needed. Save uncompressed TIFF images, if possible.

Quality: Archived images must be of a very high quality. The purpose is to ensure that these images are available and can be easily adapted to many purposes without returning to the physical format (microfilm, slides, paper, etc.).

Bitmap vs. Vector Images

There are two basic storage structures for graphics: bitmapped and vector-based.

All images display on a computer screen as a grid of pixels of various colors. Image files store the image data in one of two fundamentally different ways:

• Bitmap image files store image data as a map of individual pixels. GIF and JPEG are popular bitmap formats. The resolution of a bitmap or scanned image is expressed in terms of dots per inch or dpi.

• Vector-based image files store image data as a set of mathematical formulas that instruct the computer how to draw the image. Popular vector image formats include encapsulated postscript (.eps) and Adobe Illustrator (.ai)

File formats such as PNG, contain both bitmapped and vector-based image data.

Creating Images

When creating images to use in technical documentation, make sure you adhere to the style prescribed by your organization.

Screen Capturing Images

This is an important task that technical communicators perform. Although there are fairly efficient screen capture tools, the easiest procedure to capture screen images is using the Prnt Scrn option.

1. Open the screen image in an image editor and choose the part of the screen that you desire to include in the document.

2. Save the image in a standard format. Give it a name that is standardized.

Screen capture tools such as SnagIt and FullShot are popular and easy to use.

Hardware Images

You may need to digitize an image of a piece of hardware. There are a few ways to do it:

• Take a picture of the hardware using a camera and then scan the image.

• Develop an illustration of the image using Adobe Illustrator or Macromedia Freehand.

Graphics Tools

Here is a list of tools that is worthwhile knowing:

Illustrations

There are many kinds of illustrations used in technical documentation, including:

• Block diagrams and flowcharts: These illustrations demonstrate the relationship between functional units or processes.

• Line drawings: Drawn in two or three dimensions, these images emphasize the relative position or placement of the object or concept portrayed.

• Screen images: A representation of terminal or computer screen output, used to show users what they see before or after certain operations.

Editing Images

When editing an image, do not edit the master image. Create a copy of the master image for editing.

Sequence Diagrams

A sequence diagram shows a series of events that occurs within a system. A sequence diagram can add considerable value to technical documentation, since it shows logic flow visually. They help readers understand a sequence of events in a program.

Importing Images into Documents

The procedures to import images into documents vary depending on the publishing tool used. And then there are multiple ways of inserting the images. Irrespective of the tool, always import images into a document, rather than copy and paste them to the document. This has an advantage – you can import all images for an images folder. And when an image is modified, in the archived location, the changes in the image are made in the imported image too.

Using Images from the Web

The fact that an image is freely available on the Internet does not give anyone the right to copy it and reuse. Most images on the Web are either copyrighted or have a claim of ownership and are subject to some restrictions. There is seldom a problem printing out a picture for reference purposes, but any re-use or re-publication of the image will usually require permission from its owner. Images such as workflows are sometimes patented.

Make sure you do one of the following before you use an image from the web:

• Consult with your legal department about its use.

• Request to purchase if the image is for sale.

• Ask permissions of the owner of the image. Besides, moral or copyright reasons, most people making images available on the Web will retain a larger, better quality master image. They may actually be happy to provide you with the master image.

• Create a new image using the Web image as reference.

Conclusion

Working with graphics can be fun and allows for a lot of creativity in presenting technical information. It is also a good idea to explore further to improve the graphics you use.

Uday Chava is Technical Writer based in Hyderabad. If you want to contribute to this column, please contact the column editor, Ramesh Aiyyangar.

STC India | Home | Contact Us

Copyright © 2005 India Chapter STC. All rights reserved.