There's nothing like seeing examples of great graphics to spur your creativity. The following pages contain a portfolio showing the range of graphics currently found on the Web. Each example is accompanied by its Web address so you can go out and look at it in its true environs.
This portfolio is reproduced at screen resolution so you can see the raster techniques and dithering patterns. We think you will get a better idea of your own graphics if you see examples, warts and all.
The Web represents a dynamic, fluid, and evolving publication environment. The authors acknowledge that the best sites are constantly changing and that the graphics used today might not be the graphics used tomorrow. Go ahead and visit sites of interest, but expect the following:
Pages of the portfolio are arranged in a somewhat logical order. That is, we start with backgrounds, tiles, and textures, add montage images, buttons, button bars, directional icons, graphic text, and finally text layout.
You'll find the address for each site below its graphic. Use these URLs with the reservations previously listed. You might want to rapidly peruse some of these examples by editing the URL line in your browser. For example, I go to http://www.yahoo.com whenever my browser starts up. By editing the address after http://www., I can quickly jump to the various sites.
Along with the URL for each portfolio entry, we have referenced the subject back to specific sections of this book so you can flip back and see how to create the graphic. Enjoy!
Reference: Chapter 15, "Designing Backgrounds That Make Sense."
Figure 17.1 : Background textures.
Reference: Chapter 15.
Figure 17.2 : Montage graphics suitable for image maps.
Figure 17.3 : Additional examples of montage graphics.
Reference: Chapter 13, "Designing Buttons That Work."
Figure 17.4 : Buttons used on Web pages.
Figure 17.5 : Additional examples of Web buttons.
Reference: Chapter 13.
Figure 17.6 : Button bars used for navigation.
Reference: Chapter 9 "Providing Visual Cues to Web Navigation Through Page Design."
Figure 17.7 : Navigation graphics.
Figure 17.8 : Additional examples of graphics used for navigation.
Figure 17.9 : Still more navigation graphics.
Reference: Chapter 12, "Using Text in Design."
Figure 17.10: Web page logos and icons.
Figure 17.11: Additional Web page logos and icons.
References: Chapter 2 "Designing an Effective Web Site," and Chapter 9.
Figure 17.12: Graphics used to attract your attention.
Reference: Chapter 15.
Figure 17.13: Graphics used as horizontal rules to separate the page.
Reference: Chapter 8 "Creating a Map of Your Web Site."
Figure 17.14: Combinations of graphic icons and linked text in the form of a jump list.
Reference: Chapter 5 "Using Multimedia and Special Effects on the Web."
Figure 17.15: Page layout that combines text and graphics inside cells of a table.
Figure 17.16: Another example of text and graphics together inside a table.