|
Understanding Bitmap File Formats Avoiding That Funny Pattern In Screen Captures Screen Captures for Black and White Print
|
Graphics for Technical Communicators Introduction: Understanding
your monitor: On most PCs you can determine the resolution and the number of colors that your monitor will display. Simply press the start button at the bottom left of your screen and select Settings / Control Panel. In the Control Panel select Display. In the Display panel select Settings. Here you can choose the number of colors your monitor will display and the pixel dimensions of your screen. (You can also right click on an empty spot on your desktop and choose Properties.) My computer allows me to set my monitor's display to one of the following: 32-bit 16.7 million colors
plus an *eight bit masking channel.
A common denominator used in design for the web is 8-bit color. That should allow us to work with 256 colors. But because Macintoshs and PCs display color differently we actually have 216 colors that we can safely assume will display correctly on all monitors, Macintoshs and PCs. Your monitor displays a bunch of tiny dots. To display images we divide the monitor into pixels, tiny squares that can be filled with color. It is possible to change the number of pixels that your monitor's screen is divided into. My computer allows me to change the screen to: 640 pixels wide x 480 pixels high, 800 pixels wide x 600, or 1024 pixels wide x 768 pixels high. When designers create graphics for the web they define the size of the image in pixels, instead of in inches or centimeters. A graphic that was defined as 250 pixels high by 250 pixels wide will appear larger on a monitor set for 640 x 480 than on a monitor set for 1024 x 768. Technically speaking you can set your monitor at any of the previously mentioned choices but if you set a 15 inch monitor to display 1024 pixels wide x 768 pixels you'll probably find that it displays pictures and text too small. Page 2: Graphics for Technical Communicators, by Tom Balazs, BestEnglish123.com Understanding bitmap file formats: Often a technical communicator does a screen capture and brings it into a graphic editing program. But then they have to choose what format to save the file in. Remember, there is no one format that is best for all screen captures. What suits your situation best depends on what you are trying to do. Lets begin by reviewing some of the common image formats. In Eric Ray's excellent article
on file formats he wrote that it is important to consider: Transparency - PNG-24 and GIF formats support transparency. This can be important, for example, if you have a circular logo. In many formats you will have no choice but to display a square image with a circular logo and some background color of your choice. In GIF and PNG-24 you will still have a square image but you can define the area outside the circular logo as transparent. Portability - Portability
refers to how many operating systems, software programs and web browsers
will be able to display images made in a particular format. WMF (Windows
Meta File) may be a good choice if you know you will not have to take
the image to a non-Windows computer. Other formats like GIF and JPEG
can be viewed on nearly all platforms and on nearly all web browsers.
The most common bitmap formats are: BMP (Bitmap, filename.bmp) Bitmap format is a lossless file format often used for images whose color quality must be preserved. According to the Photoshop 5.5 help file, "BMP is the standard Windows image format on DOS and Windows-compatible computers." So this format will give you great portablility as long as you are using Windows and DOS computers. Using this format might result in better quality but will also result in larger file size. Remember that if you are starting with an image which only has 256 colors (such as a screen capture from a monitor that is set to display only 256 colors) you could create a smaller size file with almost the same color quality by saving it in GIF format. Many web browsers cannot display the BMP format. BMP images can be inserted into Word. GIF (Graphic Interchange
Format, filename.gif)
Lossy vs. Lossless. The GIF format is a lossless format, that means you can re-save a GIF image as a GIF without risking further loss of information. This is a little confusing because if you save a photograph in GIF format you will definitely lose information, the millions of colors will be reduced to 256 colors. But unlike JPG format resaving the image in this format (saving a gif as a gif) does not result in further loss of quality. GIF is one of the formats that supports transparency. GIF has one-bit transparency (completely visible or completely transparent). That means a selected color can be made transparent. But because one-bit transparency can be a crude tool it is important to use it carefully.
Animated GIFs are simply a series of GIF images that have been joined together to play like a flip book. This is an important ability because it allows you to create simple animations that can be viewed in almost all web browsers. The weakness is that these animated files can be large. If the first "frame" is 5 kilobytes then a five frame animation will be 25 kilobytes. JPEG (Joint Photographic
Experts Group, filename.jpg)
JPEG is a Lossy format. Every time you save an image as a JPEG image you lose a little more information. If you save a PNG as a JPEG you lose information. If you save that JPEG as a JPEG you lose information again. So when working with JPEGs it is best to have one original saved in a lossless format and always return to that when you want to change something. Then save the changed original as a JPEG. PNG (Portable
Network Graphic, filename.png) TIFF (Tagged Image
File Format, filename.tif) Program Native Formats Page 3: Graphics for Technical Communicators, by Tom Balazs, BestEnglish123.com Understanding Vector Formats EPS (Encapsulated
Postscript Format, filename.eps) SWF (Shockwave
Flash, filename.swf) WMF (Windows Metafile,
filename.wmf) Avoiding Screenshot GIFs that have a strange pattern The strange pattern often seen in GIFs is called dithering. Dithering is sometimes incorrectly referred to as a moire pattern. The GIF file format is capable of displaying up to 256 colors. So if you have an image with more than 256 colors and you save it as a GIF the program you are using has two options: 1) change the extra colors to a similar color that is one of the 256, or 2) use a mixture of colored pixels to approximate the color.
This can happen when a GIF is created that uses fewer colors than the image that was captured. This can also happen on the Web when a GIF contains colors that the user's computer cannot display (i.e. colors not part of the 216 web-safe colors). The GIF format has only two options when this happens: to replace areas of similar color with one color or to use dithering to "fake" it . GIF can "fake" it, for example, by using a mixture of white and red pixels to give the illusion of a light red area. Sometimes this works well, other times it is distracting. There are ways to prevent dithering: A) Before you do a screen capture set your computer's display to display 256 colors so you can see what the image will look like in that environment, B) Use a program like Adobe ImageReady or Macromedia Fireworks that let you carefully control what changes are made as you export to GIF format (many other programs make the changes automatically and often badly) or C) save the image in a format that can display more colors (maybe JPEG or PNG-24). To set your computer monitor to 8-bit color (256 colors) right click on your desktop and select properties. Select the Settings tab and set Colors to 8-bit or 256 Colors. Mark L. Levinson also posted a creative way to get rid of the dithering on Techshoret.
Page 4: Graphics for Technical Communicators, by Tom Balazs, BestEnglish123.com Screenshots for black and white print When designing anything you can be the most efficient if you begin knowing what the finished product will look like. While color screenshots can be printed in a black and white publication they will look the best if you carefully prepare them to be printed black and white. If you don't do this then the windows that have white text on a blue background may print as a hard to read light gray on medium grey.
Yisrael van Handel at Tech-Tav Documentation Ltd. posted excellent instructions on how to change the color of the windows so the text will be readable when printed in black and white. "When making screen captures for black and white printing, you can greatly improve the quality by changing the Windows colors to black, white, and gray only. In fact, I work this way all the time. I'm color blind, and I find that I get better contrast when using only black, white, light gray, and medium gray. To change Windows colors: 1. From the Start menu, select Setting, Control Panel, Display, Appearance tab. 2. In the Item drop-down box, select the item whose color you wish to change. There are very many items, and this is work. I would do it once, and leave it that way. 3. Set the color. You have the choice of one of four colors: black, white, light gray, and medium gray. Dark gray does not print well. For instance, you probably want the Active Menu Bar to be black (with white lettering); the desktop light gray; Inactive Menu Bar medium gray (with black lettering); and Message Text black. Except for black lettering on white or light-gray background, make all lettering bold. By the way, many items have a color gradient (gradually changing color). By setting Color 2 the same as Color, you can get rid of the gradient, and further improve the quality of printed screens." (Yisrael van Handel) Conclusion There are many types of file formats and many ways to create quality graphics. Each format has its strenghts and its weaknesses. By learning what each format is best at and by keeping in mind what your final product will be you can consistently make high quality graphics, whether for print or for the web. Tom Balazs is a web designer and instructor who works closely with technical communicators. He has worked for many prominent Israeli hi-tech companies including Nice Systems, Marconi Medical Systems, and BlueBird Optical. He teaches classes in Dreamweaver, Fireworks, Flash and other web related topics at In Other Words. Additional Resources Websites Optimizing Your Images, by Tim Ziegler, Webmonkey Graphic Design Resources Center, File Formats Web Page Design For Designers, Graphics Formats Gif.com, Making Great GIFS With Photoshop WebMonkey.com, Graphics Overview WebMonkey.com Optimizing Your Images Books Taking Your Talent to the Web, by Jeffrey Zeldman
|
||||||||||||||||||||||
|
Copyright © Tom
Balazs 2001
|
|