Everyone is exposed to graphic images through film, television, games, and traditional print media. It seems that among people who don't make graphics with a computer, two opinions prevail: It's either automatic (it's computerized, isn't it?), or it's too difficult or too expensive for ordinary folks to do.
Well, the truth, as is often the case, lies somewhere in between. Computer tools foster a completely different mind-set than do paper and pencil. With computer tools, you can accomplish things that are very difficult (sometimes impossible) with paper and pencil. For example, say you wanted to see what a design looks like rotated through 5-degree increments and scaled 10 percent each time. This isn't impossible using traditional methods, but you might avoid trying these iterations just because it's too time-consuming.
A major benefit of computer graphics is the ability to entertain a greater number of alternatives (see Figure 3.1). This gives you a better chances of getting closer to an optimum solution. If you try only two solutions (out of an infinite number of possible solutions) your chances of hitting the best one are slim and none. If you can quickly try hundreds of solutions, your chances are much better.
Are computer graphics difficult? They can be if you have no idea what you want to accomplish. You have to have a purpose, as well as tools, a good eye, and the ability to identify resources that help you see the end goal.
This chapter introduces you to the types of graphics found on Web pages, and to methods and tools commonly used to create them. After reading the chapter and studying its examples, you may not be the next graphics whiz, but you should have the tools to evaluate, plan, and maybe prepare Web graphics yourself.
It doesn't take a rocket scientist to figure out why computer-generated images are important in Web graphics. There is only one delivery technology for Web publications-an analog raster scan display device. If you create your graphics using the same technology that will be used to view it, you will have better control over its final form.
What's a cool Web page? Realistically, it's a page that accomplishes its purpose with style and panache. Here are some general guidelines:
Just about everyone knows that a computer monitor is comprised of rows and columns of dots called pixels. Just like cylinders in a car engine, the more you have the more powerful you feel. But on the Web, it's not so much what you have (you know what's coming next), but how efficiently you use it. When making graphics for the Web, the following constraints are important:
The relationship of these factors controls the amount of memory required to store and display your graphic (see Figure 3.2). For example, create a great graphic at 1280¥1024 (raster dimension) and your file size looks like the national debt. Increase the resolution to 1200 dots per inch and the raster dimensions stretch across the room. Increase the bit depth to 16 or 24 bits per pixel and the file you used to transport around on disk requires you to learn names like Zip and SyQuest and investigate technologies like magneto-optical storage and writable CD-ROM.
Figure 3.2 : The effect of raster dimension and resolution on actual image size (from Photoshop).
Just keep this etched on your cortical matter: Always create the smallest, tidiest, most efficient graphic that does the job.
It's totally frustrating to watch an accomplished illustrator who has made a fine living using vector tools struggle to relearn illustration techniques in raster land. Some do it well. But for others, not having end snaps, trimming tools, tangents, and the like is instant death.
Let's quickly compare raster and vector graphics. A raster graphic uses a table of data addresses and instructions to light each pixel. This is commonly called a bitmap. A vector graphic uses objects-lines, circles, curves-with instructions as to where to place them in space.
For the same image, a vector graphic requires considerably less memory than does the same raster graphic. So why don't we use vector graphics on the Web?
Figure 3.3 shows the result of saving a graphic file, in this case a tire and wheel, in various file formats. The .fh5 file is the original graphic in Macromedia FreeHand native format. The .eps file has been exported from FreeHand in Encapsulated PostScript format. Both of these file formats are vector files. The .tiff file is a Tagged Image File Format raster (bitmapped) graphic with compression. The .gif (Graphic Interchange Format) and .pcx (PC Paintbrush) are also raster files.
Figure 3.3 : Comparison of raster and vector graphic file sizes in a graphic originated in FreeHand.
File formats contain data, program-specific information and may carry inherent size overhead just due to the nature of the file format. For example, the .tiff file is smaller than the .eps vector file because of the overhead of .eps.
Accept the fact that no matter what form of the data (raster or
vector) you are looking at, a raster graphic is on the screen.
A raster display device is capable of only displaying raster information.
To view vector graphics on a raster device, the vector information
must be rasterized, which is no small task. Every computer operating
system does this differently. Macintosh computers differ slightly
because they use a standard display language (QuickDraw) for rasterizing
vector information. But the Web isn't just one type of computer,
is it?
| Note |
This reliance on raster graphics is changing. Several companies, including FutureWave Software (http://www.futurewave.com), have developed plug-ins to aid the rasterization of vector information. This would bring to the Web the abundant supply of available EPS, PICT, WMF, and CGM vector files. But how would you like to be the person without the plug-in? Without the plug-in, you don't have access to the great graphics. |
The Web is a new publishing medium (but because it stretches over into film, television, and radio, it's so much more). As a way to publish documents, the Web causes us to rethink many of the things we thought were set in stone. For example, consider the PostScript page description language. Without it, there would have been no desktop publishing. In fact, current electronic publishing of almost all printed matter would not be the same. There would be no FreeHand, no Illustrator, no PageMaker, no Quark. We might still be spitting out metal type like we did a hundred years ago.
But so far, PostScript-the most important advance in publishing since movable type-has had minimal impact in Web publishing. This is ready to change because powerhouses like Adobe are moving to consolidate printing strategies for Web documents.
Web documents are intended to be consumed interactively via display technology. We print Web documents because we belong to the generation that printed everything it saw. We run the risk of being the butt of the next generation's jokes.
The resolution-independent nature of PostScript graphics is lost on the Web where screen resolutions are fixed. Could this be the impetus for rethinking the display of PostScript as a standard for computer displays?
To reach the greatest number of possible clients with your Web publication, you should design graphics at 72 dpi and in 8-bit 256 colors (see Figure 3.4). I don't see this standard changing in the foreseeable future. Because all color monitors use Red, Green, Blue (RGB) color technology, always use the RGB color model when you make graphics for the Web.
Situations when you might entertain the use of graphics at higher resolutions and bit depths include the following:
8-bit color is sometimes called indexed color. Let's assume that your Web graphics are stuck at 72 dpi and 256 colors. What can you expect?
First, expect to design your graphics using the palette of colors (usually called the system palette) that is most representative of the target client's systems. For the most part, this means Macs and Windows PCs. If your graphic uses a color not in the 256-color palette, it will substitute the closest color. This can yield results from odd to ugly.
To overcome this 256-color limitation, a technique called dithering is applied to the image. This is sort of like halftoning in traditional publications. Dithering (see Figure 3.5) approximates intermediate colors (colors not on the palette) with a pattern of dots that, when viewed from afar, blend together in glorious shades. Some programs, such as Photoshop and Debabilizer, produce well-dithered images. Illustrator produces credible results when its .eps files are rasterized. FreeHand produces less than desirable results, as does CorelDRAW!.
Figure 3.5 : A comparison of diffusion and pattern dither.
| Tip |
The best results are achieved when using a diffusion dither, which produces smooth transitions. A pattern dither produces geometric patterns that may be less desirable. |
Traditional publications made careful use of color partially because color meant more expense. With display publications, color isn't any more expensive than black and white. Unfortunately, when color is so easily available it is often misused and overused.
Color was also carefully used because even though everyone loves it, there isn't much evidence that color increases the effectiveness of communications where color isn't the subject. (Color would be critical, for example, in recognizing changes in skin color with chemical exposure or identifying the RED tag.)
In fact, judicious use of grays can be almost as effective as color for making visual discriminations. Unfortunately, Web graphics are limited to using the grays available in the indexed color palette. In-between grays can be dithered to give the impression of having the full 256 grays available in 8 bits of color depth.
A black-and-white graphic has a strong appeal on Web pages. This type of graphic can be reduced to 1 bit of color information. This makes for extremely small file sizes and, correspondingly, rapid load times. To reduce a color graphic to black and white in Photoshop requires several steps:
There are several rules of design to be followed that will keep you out of major trouble. They won't make you any more creative, but they will establish a strong foundation for your creativity.
Figure 3.6 : Effective (top) and busy (bottom) designs.
Figure 3.7 : Effective (left) and ineffective (right) eye flow.
Figure 3.8 : Effective and ineffective font choice. Which font projects the desired feeling?
Figure 3.9 : Design may exhibit tension to increase interest.
Figure 3.10: Effective use of color in a design.
Figure 3.11: Elements that build a sense of depth.
Hexadecimal is another example of yesterday's technology today (along with picas and points, radians, and angle by grade). No one, other than a real wirehead, can convert ASCII numerals to hex in his head. At best, you might remember white (FFFFFF), black (000000), and Netscape gray (CCCCCC).
Fortunately, graphics you bring onto your Web pages as raster files communicate their RGB values automatically. Figure 3.12 shows two RGB colors and their hexadecimal color values. It's only when you want to set the color of HTML elements (backgrounds, text) that you have to concern yourself with the hexadecimal specification of RGB color.
Figure 3.12: The RGB color mixer in Photoshop several hexadecimal equivalents.
Each RGB color contains three sets of values each for the red,
green, and blue components. The numbers can range from 0 to 255.
Since RGB is an additive color model, no amount of each would
be the value 000,000,000 or black. Full intensity of red, green,
and blue (255,255,255) results in white.
| Web Work Shop |
Background color should be carefully chosen. White text on black background was abandoned years ago for extensive reading. This example uses a tan background (EAEAAE) with black (000000) linked text and brick red (FF0000) instructions. Note the use of a menu that links to options. |
Scientific calculators have ASCII-to-hex conversion functions. Or, if you want to use a Web resource, cruise by http://www.bga.com/~rlp/dwp/palette/palette.html for a palette of colors from which to select.
By far the easiest way to convert RGB color into its hexadecimal equivalent is to use a calculator. Scientific calculators usually have this function, or you can use a scientific calculator utility right on your computer (like the one on your CD-ROM):
Here's an assignment. By using the RGB color mixer in Photoshop and a hexadecimal scientific calculator, or by visiting one of the hex conversion sites on the Web, answer the following questions:
Graphics Interchange Format (GIF, either hard or soft G, I like my Gs soft) is a platform-independent intermediate raster format limited to 8 bits of color depth (256 colors). Get the point? Most computers have 8-bit video. GIF is 8 bit. Matches pretty nice, huh?
GIF graphics can be compressed using Lempel-ZivWelch (LZW) lossless
compression. (See Chapter 6 "Presenting Effective Web Graphics,"
for more information on file compression techniques.) GIF files
can be also be interlaced. Interlacing begins with a low-resolution
image and increases detail as the file continues to load, mollifying
those who can't defer gratification, and allowing designers to
use heavier graphics than they need to.
| Tip |
Like most things in life, more is usually better, and in bit depth and resolution this is also true. Although you will be displaying graphics in 8 bit, 256 color, you will want to start with more color and resolution than you need. This gives you greater flexibility in making the image look the way you want it to when you reduce the color depth and resolution. Suggestion: Work in RGB color and 288 dpi. Reduce to 8 bit (256 color), 72 dpi GIF for most needs. |
Graphics in the Joint Picture Experts Group (JPEG) format are capable of much greater color depth than is GIF, but, of course, this comes at a price. This price is charged in slow download times for larger file sizes. Files in JPEG format can contain up to 24 bits of color information (16.7 million colors).
Files in JPEG format are compressed automatically and then decompressed when they are brought onto a Web page. The compression is variable-the greater the compression, the greater the level of degradation in the final image.
The question is, does a 24-bit JPEG graphic look any better on
an 8-bit color monitor? The answer is, generally, no. The answer
could even be that the JPEG file ends up looking a lot worse because
its 24 bits (16.7 million colors) must be mapped into the 256-color
palette used by the client's computer. You have no control over
how this is done.
| Note |
William Horton, in his book Illustrating Computer Documentation, reveals the hype involved in 24-bit color. Only 7.5 million colors are actually measurable. Trained colorists (people who work for paint companies, for example) can distinguish only 1 million colors under ideal conditions. The average person can only distinguish 50 colors within a given visual field. Makes 8-bit color seem all the more advisable, doesn't it? |
Reserve the use of JPEG graphics for specialized applications. See the earlier section, "Life at 72 dpi and 256 Colors," for more information.
We have already addressed the topic of dithering, where intermediate colors and values are simulated by a random array of dots or patterns. Another technique important in display graphics is anti-alias. Figure 3.13 shows an example of this anti-alias effect.
Figure 3.13: The use of anti-alias to give the appearance of smoothness.
Anti-alias is especially effective when displaying text above 24 points. Because most text will be a solid color, the stair-stepping around curves is often distracting. By applying the anti-alias technique, intermediate pixels are calculated on either side of the normal outline, giving the appearance of a smoother curve. Figure 3.13 shows the detail of a serif, without anti-alias on the left and with anti-alias on the right.
Blurring is another technique that yields slightly different but effective results. Blurring an area alters all the pixels within the selection, not just those on the outside.
An anti-aliased letter like that shown in Figure 3.13 can break apart when reduced because original pixels may not match up with pixels at the new scale. When enlarged, the image may become unsightly when its anti-aliased pixels are enlarged. If you can, avoid this by creating your graphic at display resolution and at its intended size. If you have a graphic that's already anti-aliased and you want to resize it, do the following:
Everyone can learn to recognize and appreciate good music. Most can learn to play simple tunes on a piano. Some can learn to read music and play credibly. A very few become concert pianists.
Such is the case with visual art. Not everyone needs (or wants) to make their own Web graphics. But everyone should be able to recognize when good design principles are followed, when text is used effectively, and when color adds and doesn't subtract from a page.
The key to all this is developing what I call "a good eye." I used to tell my students that it isn't the answers they don't know, it's the questions. Invariably I would look at a student's drawing and start a question-like, where is the…?žand not even get the rest of the question out before the student realized why their drawing was wrong and told me the answer.
The trick to developing a good eye is to have a continuous dialog with yourself concerning the design. This technique can be applied to the design of the Web site itself as well. For starters, ask yourself the following:
Where does it start?
Where does it stop?
Is it aligned?
Is it straight?
How do I get here?
How do I get out of here?
How many are there?
Is it symmetrical?
Is it asymmetrical?
What is it called?
What color is it?
How important is it?
Some of the best samples of graphic design still remain in traditional print publications. Remember, as Web publications go more mainstream, they will be subjected to the same evaluation criteria as traditional publications. The following is a list of sources you might look at:
If you're serious about Web graphics, you'll want to make an electronic swipe file of things you see while surfing. You may be able to download the graphic directly from the Web site. But since you wouldn't consider using the graphic directly (read about copyrights later in this chapter), it's a lot easier to just to do a screen grab with a Mac product like Capture or a PC product like HiJaak. This resolution is fine for use as a visual reference.
Every graphic element you place on a page must have a function.
Either it adds to communication efficiency or…remove it!
Each visual element on a page must be processed and either used
or discarded. The more visual elements a viewer has to discard,
the less efficient the communication.
| Web Work Shop |
If a graphic isn't a button, it's often difficult to know what has been linked. Our Web Workshop graphic is used here to link to a file named Example.html by making use of the <A HREF></A> structure. With a default blue border, the reader knows by convention that this is a linked graphic. With BORDER=0, a text instruction helps identify the graphic as a link. |
| Note |
Under no circumstance should you throw the latest whiz-bang graphic plug-in, multimedia interactive, virtual experience, scratch and sniff add-on onto your Web page just to demonstrate how much on the technologically bleeding edge you are. You will impress no one of importance, even if you impress yourself. |
Recognizing the demand for effective Web graphics, many companies offer extensive artwork libraries. Use the following as a starting place for possible sources:
A copyright is a grant of exclusive use for a period of time. For something to be copyrightable, it must embody unique intellectual property. If something doesn't pass this test of uniqueness, it is considered to be a common design of industrial utility. That's why automobile shapes can't be copyrighted. That's also why font shapes can't be copyrighted.
Every copyright carries with it a presumption of fair use. That is, a copyrighted graphic can appear in a news report or a magazine article without infringement because that's considered fair use.
Copyright protection is granted upon the simple act of making something of unique intellectual property. There is no search-as there is when applying for a patent. You don't have to prove anything when applying for a copyright. You don't even have to apply for the copyright as long as you can prove creation date.
It's fair to estimate that less than half the material carrying copyright notice is actually copyrightable, that is, would be deemed unique intellectual property in a court of law.
How can you get around this? Use the following guidelines when planning Web graphics:
The likelihood that your use of some material carrying a copyright will be challenged in court is directly proportional to the economic resources available to the copyright holder. Like Clint Eastwood would say, "Do you feel lucky?"
The ease with which you get graphic images ready for the Web depends somewhat on the application program you choose to do the job. Make a poor choice early and you'll just make the job more difficult.
Because your images are going to be displayed in raster format on a raster display device, it would seem silly to use a PostScript drawing program for the majority of your work. That doesn't mean that you shouldn't use a PostScript drawing program (like Illustrator, FreeHand, or CorelDRAW!) to do what it does best-technical line draw-ing. Figure 3.14 shows a line illustration originally created in PostScript and rasterized in Photoshop where it was used as the basis for a Web graphic.
Program type: Raster out, Raster and Vector in
As the granddaddy of image manipulation programs, Photoshop will filter a large number of vector and raster formats and output GIF and JPEG formats. However, some postprocessing is necessary to make backgrounds transparent. Use Graphic Converter, Transparency, or Debabilizer.
Program type: Raster
Corel's answer to Photoshop, PhotoPaint matches Adobe's product almost feature for feature and has extensive import and export filters. It even has the same problem with transparency that Photoshop has.
Program type: Raster
A more painterly approach to raster graphics with extensive file conversions, Fractal Painter will create transparent GIF and progressive JPEG files. Its recent release also allows image maps to be created in Painter.
Program type: Vector PostScript
Vector PostScript is limited to EPS and PICT export on Mac, and EPS, WMF and TIFF export files in Windows. Files rasterize well for Web inclusion.
Program type: Vector PostScript
PostScript is limited to EPS and PICT export where dithering is pattern and not diffusion on Mac, also 24-bit TIFF in Windows. It's good for converting PostScript or TrueType fonts to outlines and exporting them as EPS files to a raster editor where the outlines are rasterized.
Program type: Vector PostScript
CorelDRAW! has the same strengths as FreeHand and Illustrator.
Program type: Multimedia
Macromedia Director creates interactive Director or QuickTime movies for inclusion on Web pages using Shockwave. It's useful for buttons, bullets, and small animated graphics.
Program type: Multimedia
Authorware creates interactive applications that can be included in Web pages using Shockwave.
Several Photoshop plug-in filters are of great help when making Web graphics. Everyone loves blurred drop shadows, and the Blur/BlurMore/Gaussian Blur filters really do the job.
The other filters I find I can't live without are KPT's Glass Lens and Glass Lens Bright. Although these have been replaced by KPT's Spheroid Designer, I like their simplicity and effectiveness. Figure 3.15 shows examples of using these two filters to create interactive buttons.
Figure 3.15: This button started out as a sphere.
Personally, I wouldn't put anything of real creative value on the Web. The ease with which images and page source code can be captured is part of the Web's allure, one of the reasons its potential is difficult to estimate.
The Web can be a teaser, though. Put enough information out there to generate interest. Want the real thing? Send $9.95 by midnight tonight.
The flip side of this is that some of the information found on the Web is of no value whatsoever, even dangerously incorrect. Buy a book of conversion standards from a publisher, and you can almost guarantee that the numbers were checked by outside reviewers, proofread, edited, and backed by the author. Much information on the Web should carry a "Consumer Beware" disclaimer.
If you want to add some protection, put the copyright (©) symbol and a statement of ownership beside anything you think you want to protect. This will scare the timid away.
Now that you are tuned into the world of graphics on the Web
| All of my company's graphics are in EPS and TIFF format. Will I have to redo everything to put it on our Web site? | |
| The TIFF files can be reduced to 8-bit GIF using an image editing program, like Photoshop, or a graphic utility, like Debabilizer or HiJaak. The EPS files are more problematic, though. Try opening them in Photoshop to see how they are rasterized. If they look good, convert to indexed color. I've had some luck in screen-grabbing the EPS file as a raster PICT or TIFF and playing with it. | |
| You seem set against colored backgrounds on Web pages. I've seen some that are nice. Why don't you like them? | |
| If the purpose of the Web page is to communicate information, colored backgrounds distract from reading. It takes extra effort to make bright white paper. So why don't we just use the gray-buff unbleached stuff? Because the higher the contrast between foreground and background, the more efficient the visual task. | |
| What's the best way to view a swipe file of Web graphics? | |
| First, use intelligent filenames, like rndbut.gif for a round button in GIF format. Then create a directory structure that organizes the images by functional type (buttons, panels, people, cars, and so on). Finally, you might want to use a graphic browser like that found in HiJaak Pro or Fetch to quickly search and retrieve the examples. | |
| I'm not an artist and can't afford to purchase clip art libraries. What can I do? | |
| Do you have a scanner? Go to the library and check out old books circa 1900. These have expired copyrights and should be okay. Clip art books are relatively inexpensive. Ask friends who may be artists to "donate" their own work. You'd be surprised how willing friends are to help. | |
| I want to try and sell greeting cards over a Web site, but I'm afraid that if I put some of the cards on my Web pages, they'll show up on other people's pages as well. What can I do? | |
| You can almost count on someone grabbing your images-especially if they're really nice. My suggestion is to keep resolution just high enough to sell the products. Try increasing dimensions and resolutions out on co-workers. Stop at the lowest quality image that does the job. Include your name and address directly on the image. Remember, there is fair use associated with your greeting cards. |
