URLs in this document have been updated. Links enclosed in {curly brackets} have been changed. If a replacement link was located, the new URL was added and the link is active; if a new site could not be identified, the broken link was removed.

Beyond Clip Art: Creating Graphics for the Web

Linda Absher
Reference Librarian
Watzek Library
Lewis & Clark College

Abstract

For many librarians and information specialists, the web presents a challenge, not only in terms of organizing information, but in creating a visual package that piques the user's curiosity and interest as well as provides orientation to a site.

This is an introduction and overview for those who do not have formal art or design training but are interested in creating graphics for the web. Topics to be presented are:

Determining a "look" for your pages
Essential software for creating graphics
Laying out pages for the web
Designing graphics for various platforms and web browsers

Handouts will be provided that list URLs and other materials referred to in the presentation and/or recommended as reference sources.

Introduction

Tired of using the same old clip art icons from the World Wide Web? Want to do something more than upload a scanned photo of your library? You may want to make your own unique graphics for your library's web site.

This presentation will not only cover the basics of graphic design and layouts for the World Wide Web, but will also how to avoid the pitfalls and problems designers encounter when creating for this unique medium.

Why Design Graphics?

How many times have you searched a library web site only to be confronted with the same clip art icons used on numerous other library sites? Although creating graphics can be time-consuming, they serve an important function: they give your site a unique identity. This may not seem important in a profession dedicated to providing information rather selling a product, but since the Web is a relatively new medium, we as librarians need to "sell" the library's services to generations accustomed to television and savvy advertising. In her article Top Ten Rules for Creating Graphics for the Web", Susan Jurist makes a timely point:

...the current generation uses the Web to decide everything from what movie to see to what school to go to. Students will look at a university's Web page to decide if it would be an exciting place to spend the next four years....They will stop at an arresting Web page--they won't read yards of plain text. (Jurist, 1996, p. 418).

Clip art, although a time-saver, has several disadvantages. How many times has one seen the "Under Construction" image, or the house icon to denote a home page link? Clip art also creates a "hodgepodge" effect since icons are created by different artists. Clip art icons suffer from a variety of limitations and drawbacks: are they too small? Too ornate? Can you find an icon that fits library-specific needs? In essence, clip art gives a site amateurish and non-professional feel.

Finally, creating original graphics forces the designer to consider the structure of the site more carefully. Because making graphics is more time consuming than downloading pre-made images, the designer must think carefully about the layout and hierarchies of the site before sitting down to create.

Ideas and Graphic Layouts: Be Derivative...to a Point

Structuring library web sites is a topic of endless discussions and seminars. There are several resources outlining architectural, hierarchical, and navigational tools for library sites; however, many are intimidated or at loss as to come up with ideas for original graphics and layouts. The solution? Don't! Or at least, don't feel compelled to come up with truly original ideas on your own. By doing some web surfing, one can conjure ideas for images that will enhance the look of a library web site. If you can choose what clothes to buy in a store, you can come up with your own ideas for images. For those of you who are unable even to do that, if you can discern what web sites appeal to you, you can create web graphics and page layouts.

The best way to come up with ideas is to look at other web sites. There are, however, factors you want to keep in mind before reviewing:

Your Audience: are they graduate students at a large university or teenagers using the high school library? A scholarly look may not go over well for those who are doing secondary-level work.
Your Resources: are you able to maintain a page that uses complex layouts such as frames? Do you want to provide alternatives to high-bandwidth pages or sites using exotic layouts? Can you or your staff spare the time to learn how to make complex graphic effects?

What to look for? First and foremost, look for images or layouts that strike you in some way, then examine why they appeal to you. Is it the color? The way it provides clear navigation? Think of the qualities that you find yourself drawn to and make a note of or print out the page or document source.

The most obvious choice of pages to review are other library web sites. Many, especially the larger libraries, have eye-catching images that invite the user to explore the site. The logo for the libraries at the University of California at Berkeley is particularly striking, containing distinctive icons that clearly lead the user to important links. Libweb at the Library Web Manager's Reference Site {http://sunsite.berkeley.edu/Web4Lib/RefCenter/} has links to various libraries around the world as well as links to the {Innovative Internet Applications in Libraries page}.

Do not feel bound to review library-specific sites for ideas, however. Many non-library sites use clear yet imaginative graphics and color combinations to provide users with effective navigation tools. {Wired} is a spectacular example of using vivid color combinations and imaginative graphics to lead users to various pages and services on their site. Another site that uses color and layout to an advantage is Lycos, a search engine on the web.

If a page layout appeals to you, feel free to look at the document source code to learn how the page was created. Using someone else's source code is not frowned upon; many designers begin (and continue to learn) layouts by incorporating the HTML source codes of other pages. To look at a web page's source code in Netscape, simply pull down (or click) the View menu of a browser and highlight "Document Source"; the code will then appear on the screen. Another resource for web page layouts is Lynda Weinman's Deconstructing Web Graphics; in it Weinman takes several distinctive web sites and takes them apart, explaining how certain graphics were created and how layouts were developed. In one site, DreamWorks Interactive, she discusses how the design team put together a flowchart that links the images and lower-level pages thematically. (Weinman 1996, pp. 17-36 )

Although borrowing layouts is acceptable, borrowing non-public use images are not. That does not mean, however, that you cannot take an aspect of an image and incorporate it into your graphic. Like a drop shadow behind a particular icon? Use it! Contrasting-color text in a menu bar? Fine! Any idea that appeals to you should be used if you think it is appropriate for your site.

Tools

Adobe Photoshop:

Without doubt, {Adobe Systems' Photoshop 4.0} (and earlier versions) is the most versatile tool to use when creating graphics. Photoshop is an imaging software package for creating graphics as well as processing photographic images. The 4.0 version has the advantage of including options that are advantageous when designing web graphics, such as a web-compatible color palette, transparency capability, and compression formats.

However, there are some drawbacks of using Photoshop: ease of use and type manipulation. Because Photoshop is such a facile package, it can be complex to use, necessitating a long learning curve. It is unique in that the more one learns Photoshop, the more complex it becomes. Techniques such as masking or paths that can be used in a variety of effects are invaluable but are difficult to grasp, much less master. Fortunately there are a several ready-made software or plug-ins that provide filters or programs that automate image effects, which streamline such time-consuming effects as drop shadows (shadowing objects) or beveling. The more popular plug-ins for web design are Eye Candy from Alien Skin and {Kai's Power Tools} from MetaTools.

For Photoshop 4.0 the ability to record a series of editing steps into what Adobe calls an {action} is now available; ready-made actions are available from vendors and various web sites.

Photoshop also has limitations regarding typography; it creates fonts as a bitmapped image, which means the type is created as an image rather than an object. This limits the ability to manipulate the font, such as having the type follow a wavy path, etc. Photoshop type also tends to have a ragged edge unless created in an anti-aliased mode, which softens the pixels around the perimeter of the image, smoothing the edge. If one wants to create a smoother type, Adobe's Illustrator, a painting software package, is the better tool; however, since most web icons are small, with clarity and simplicity being favored over complicated designs, Photoshop is more than adequate to handle the task.

At present there are dozens of reference books for Photoshop. If one needs to learn Photoshop quickly, Weinmann and Lourekas' Visual Quickstart Guide: Photoshop 3 for Macintosh is an excellent resource, especially as a quick reference. For a more detailed resource, McClelland's Macworld Photoshop 3.Bible, 2nd Edition is highly recommended. As of this writing, the author has not evaluated any resources for Photoshop 4.0.

GraphicConverter

GraphicConverter 2.8 is a shareware program created by Thorston Lemke. For $35 one can perform a surprising array functions, everything from cropping photographic images to creating transparent GIFs. It is also an excellent tool for manipulating color depth or saving images in a variety of formats, important features for creating web-friendly graphics. However, GraphicConverter handles type even poorly than Photoshop, creating type that is extraordinarily ragged and difficult to maneuver. The documentation accompanying the software is very limited and there are very few web sites that provide help, the most notable of which is the Queen's University Department of Film Studies web page, Editing Graphics With Graphic Converter. GraphicConverter can be downloaded at a variety of sites including {http://members.aol.com/~lemkesoft/index.html}.

Bandwidth: Avoiding the World Wide Wait

Image file size is the eternal dilemma of web designers: how does one make a graphic that is attractive and clear, yet loads quickly? There are many tricks of the trade that help reduce image file sizes, mainly image compression and color manipulation, but the most important tool is understanding the issues, concepts, and limitations when dealing with bandwidth and the World Wide Web.

Growth of the World Wide Web According to the latest {National Science Foundation} statistics available, the Web has and currently undergoing explosive growth. From March 1993 to March 1995, World Wide Web usage went from 2,933,158 megabytes to 9,731,474 megabytes (NSF). Indications are that the growth will continue at incredible rate: according to Gerry McGovern of {Nua Ltd.}, an internet marketing company, as of November 1996 there are some 25-30 million online in North America (the United States and Canada), and another 5-10 million online in the rest of the world. The company estimates approximately 200 million online by 2000 (McGovern, 1996). McGovern also brings up the biggest problem regarding growth, which is whether the present internet architecture can support current growth rates (McGovern, 1996). As we all have experienced with increasing frequency, the web is and will continue to carry more bandwidth. For an interesting and highly informative perspective regarding bandwidth and web images, visit the Bandwidth Conversation Society site at {http://www.infohiway.com/faster/}.

As a web designer, it is imperative to keep image file sizes as small as possible. In Designing Web Graphics, Lynda Weinman estimates that it takes approximately one second per kilobyte for an image to download (Weinman, 1996, p. 33). For many graphic artists who have moved from print media to the web, this is difficult since computer graphic images have often meant large file sizes. Photographs are scanned at a very high dpi (dots per inch) resolution to ensure a high-quality image in print; this is unnecessary for the web since the resolution for most computer screens is 72 dpi. Reducing scanning resolution alone to the maximum computer resolution should bring the size down considerably.

Compression

Most web graphics are in two file formats: JPEGs and GIFs. Each has their advantages and drawbacks depending upon the image type and objects of the designer. Photoshop and GraphicConverter support both formats, converting other formats (PICT, TIFF, or EPS) into the Web-friendly formats.

JPEGs

JPEG stands for Joint Photographic Experts Group, the group that created this format. It works with 24-bit color images while reducing file sizes. Developed with photographic images in mind, it is excellent for compressing images without sacrificing the detail inherent in photographs; conversely, since JPEGs use lossy compression techniques (meaning the image degrades slightly), it does not handle flat-colored images or other non-photographic images.

Photoshop and GraphicConverter allow the user to vary the compression level of a JPEG; however, the more an image is compressed, the worse the image quality becomes. Compare these {two toy duck images}: the first image is a low-level JPEG compressed to 22 kilobytes. The color tone is smooth, with a faint blotchiness in the progressive halo that surrounds the duck. The color in the second image, compressed to 13 kilobytes, is rougher, with patches of color instead of a continuous, smooth tone. The halo is now more pronounced, with each ring having a distinctly jagged edge. One should experiment with compression levels to determine the maximum compression level acceptable without noticeable degradation.

Another drawback is JPEGs do not support transparencies, often a necessity when layering images on a web site.

Due to the fact that most computer monitors display only in 8-bit color (creating a total of 256 colors), most JPEG images will be dithered, or reproduced whereby colors will be simulated by the juxtaposition of selected 8-bit colors. This creates a faint spotted pattern; however since photographic images often contain a multitude of colors in continuous tones, this is not seen as a problem as with GIF images. Dithering will be discussed in more detail in the Color section of this paper.

GIFs

GIF is the acronym for Graphics Interchange Format, an 8-bit file format that uses a lossless (no degradation) compression method to reduce file size. GIF images can only contain 256 colors (the 8-bit color range), perfect for graphic-type web images since most computer monitors can only distinguish 8-bit color images.

The desired GIF format for the Web is the GIF 89a format, which supports transparency, or the ability to mask out a defined color. This is critical when creating images that will layer seamlessly on the Web. The current version of Photoshop comes with a plug-in that converts files to the 89a format; the plug-in is available for downloading on Adobe's web site at http://www.adobe.com/.

One can reduce file size even further with GIFs by converting the color of an image to an 8-bit color mode. This is done easily by using a color palette designed specifically for web graphics (to be discussed in the Color section of this paper), or experimenting with the bit depth of an image. One can experiment by reducing the bit-depth to a 6-bit or even 3-4 bit colors to see if the file size can be reduced without degrading the image. This capability is called "Indexed Color Mode" in Photoshop; a plug-in called PhotoGIF gives the user greater accuracy when indexing colors and is available from {BoxTop Software}.

An easy way to convert images is via {Raspberry Hill Publishing's GIF Wizard} web site ; a user enters the URL of a web site or of an image. GIF Wizard will convert images while reducing it to its optimal file size; the image is then redisplayed to be saved in its new format.

The Color Dilemma or "But It Looked Okay on the Mac!"

Color is perhaps the most vexing problem a web designer can face. Factors such as computer monitors, system platforms, and browser software can turn a that looked vibrant in a graphics package on a Macintosh into a complete mess on Internet Explorer via a PC. This section will delineate the pitfalls and provide workarounds and solutions to the problems.

Monitors

As discussed in the previous section, most computer monitors distinguish only 8-bit colors, creating a color palette of 256 colors. To emulate colors not included in the palette, computers will simulate or "dither" by placing a combinations of available colors in close proximity, thus tricking the eye into seeing non-existent colors. Unfortunately, this emulation creates a moiri effect, whereby dots are seen scattered throughout the image not unlike the dots one sees when looking at the Sunday comics in a newspaper. While not a overwhelming problem with photos, it can be disconcerting with flat-color graphics, with problems ranging from a scattering of dots to giving the image a murky color.

Platforms and Browsers To complicate matters, due to the fact that they use different color cards and monitors, Macintosh and PCs do not share the same 256 color palette. What may look clear and crisp on a Macintosh may be much darker in a Windows environment. A good example are these {two color bars}. On the Macintosh, both bars are light yellow and khaki green. Tested on various brands of PC monitors, the colors are a much darker yellow and a very dark (almost black) brown. This problem necessitates the designer to check an image on various platforms to ensure the color stays reasonably true to the original intent.

To make matters more interesting, web browsers also use their own 8-bit fixed color palette separate from the ones used by Macintoshes or PCs. Netscape and Internet Explorer will convert all graphics to its own palette regardless of what color they were saved in, even if the color is one shared by the two major system platforms. This means that Netscape, Internet Explorer, Macintoshes, and PCs share a total of 216 colors. As mentioned in previous sections, if a web browser comes across a color not included in the browser palette, it will compensate by dithering browser colors to create a simulated color. Using the {color bars} again as an example, one may see in the left bar a faint dotted pattern running through the colors.

How does one determine these "safe" colors? Lynda Weinman has created a web-safe CLUT (color look-up table) that is available for downloading on the Web at http://www.lynda.com/; it is also available on Adobe's web site. The CLUT is easily importable into Photoshop or GraphicConverter; it is also included in the {latest editions} of each software package.

When dealing with color for the Web, following a few simple rules will prevent endless hours of frustration:

Always create graphics in the RGB (red-green-blue) color mode.
Use the web-safe CLUT when creating images to be save in the GIF format.
Because photos have color and tone subtleties and will always be displayed in a dithered, 8-bit format, do not try to save it using the web-safe CLUT colors and GIF format. Save the image as a JPEG.
If for various reasons (file too large, etc.) a photograph needs to be converted into a GIF, an adaptive palette should be created whereby the graphic software chooses a group of colors to represent the image. This may be done in Photoshop by clicking on the Image menu then clicking on the Mode option, then the Indexed Color option. For greater accuracy and more options, the PhotoGIF plug-in by {http://www.boxtopsoft.com/} is an excellent application.
Check to see how your image looks on various browsers and platforms. A green icon that made a striking contrast against a blue menu bar on a Macintosh may barely be discernible on a PC.

Browsers or "It Looked Okay on the PC!"

Another factor designers should be aware of is the variable HTML support different browsers provide. Although HTML was devised as a standard, cross-platform language to display text and graphics on the web, companies developing browsers do not conform to the standards, instead developing options not recognized by the HTML standards committee. To see how a commercial developer uses non-standard HTML as a way of touting their browser, visit {Microsoft's Internet Explorer 3.0 HTML Enhancements} page. Another good example are frames: used in thousands of web sites, frame tags are not currently supported in the {HTML 3.2 Reference Specification} by the World Wide Web Consortium.

To complicate matters even further, the same browser may render HTML tags differently on different platforms. Tags that determine the same font size or table borders will render in different sizes; in some instances, some objects will look radically different. Here are examples of what the same HTML coding on the same browser version (Netscape 2.0) looks like on a {Macintosh} versus {Windows '95}. (ThreeToad, 1996) Notice the significant difference in font size and the form button.

There several resources that discuss browser discrepancies in greater detail. Lynda Weinman devotes an entire chapter, complete with examples in her book Designing Web Graphics. For a visual (though somewhat dated) comparison of web browsers and platforms, visit the ThreeToad Browser Comparison page at {http://www.threetoad.com/main/Browser.html}.

It is virtually impossible to design a site that is compatible with all available browsers; however, there are ways of ensuring that the majority of users see an uncorrupted page:

Decide which browsers you will support in your HTML coding. A factor in your decision is the audience: does your campus use mostly Netscape on Macintoshes? On PCs? Do you also want to support text-only clients such as Lynx? Limiting your support to the more popular browsers seems to be the sensible solution; however the drawback is may be that some users using increasingly popular and more problematic browsers (such as AOL) will be left out. {BrowserWatch} on the web gives estimates as to what percentage of the online population uses which browser.
Creating different pages for different browsers: this ensures that virtually anyone who visits your site will have access. However, would you be able to support several different versions of your site, especially if it is a large one?
Create a compromise by using both solutions: design pages for the popular browsers, but create alternative text-only or lower-bandwidth pages for pages that may employ more exotic HTML tags such as multicolumns or frames. This is also an excellent solution to users who are impatient with slow-loading pages.
Use the ALT tags when coding graphics; if a graphic does not appear on a page, the user will at least be able to identify the icon; this is especially important for graphical search buttons, links, etc.

Conclusion

Although making graphics for the web presents the designer with unique pitfalls and obstacles, it can nevertheless be very rewarding. If you are in the position of having to create a web site, creating the graphics is your opportunity to give your library a unique identity in a new medium. Once piece of advice, however: have fun!

References

Garlock, K.L & Piontek, S. 1996. Building the Service-Based Library Web Site. American Library Association, Chicago.

Jurist, Susan. 1996. Top 10 Rules for Creating Graphics for the Web. College & Research Libraries News 57(7):418-421.

McGovern, Gerry. "State of the Internet: A Nua Synopsis of the Internet." [{http://www.nua.ie/surveys/state.html}]. November 11, 1996.

National Science Foundation. "Directory of /statistics/nsfnet." [{ftp://nic.merit.edu/statistics/nsfnet/}]. n.d.

Ragett, David. "HTML 3.2 Reference Specification." [{http://www.w3.org/TR/REC-html32.html}]. January 14, 1997.

ThreeToad Multimedia. "ThreeToad Browser Comparison." [{http://www.threetoad.com/main/Browser.html}]. 1996.

Weinman, Lynda. 1996. Deconstructing Web Graphics. New Riders Publishing, Indianapolis, IN.

Weinman, Lynda. 1996. Designing Web Graphics. New Riders Publishing, Indianapolis, IN.