Chapter 17 A Portfolio of Graphics from the Web

CONTENTS

Backgrounds
Montage Graphics
Buttons
Button Bars
Navigation Graphics
Logos and Icons
Eye Catchers
Rules
Jump Lists
Page Layouts with Text and Graphics Using Tables

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:

Site uniform resource locator (URL) names may change as companies become more savvy to the importance of matching a URL with their company name or product. What used to be found at http://www.product.com might be found at http://www.company.com.
The site simply doesn't exist anymore. Maybe it wasn't unauthorized. Maybe it wasn't profitable. No matter which, it's gone.
Server names may change due to competition among Internet service providers. What used to be found at http://www.company.com might be now be found at http://aol.com.
Backgrounds may change or disappear altogether. In version 2.0 of a company's Web site, readability might be more important than visual appeal.
JPEG or GIF graphics might be replaced by video or animations, necessitating a newer version of your browser and helper applications. Or what used to be in a table is now in an image map.

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!