o, you’ve decided to add some graphical pizzazz to your site: A dozen images, an animated GIF or two, a set of graphic dividers and bullets, and a cool background image to visually unify all your site pages. One obvious question looms large:

How do you get hold of the graphics you need to do the job? Remember, you can’t go about adding images into your Web site until you have those images!

Back when it started, the Internet was a text-only medium. Hard to imagine now, isn’t it? A bit like imaging TV with captions but no pictures or sounds!

Things were simpler back then, bandwidth requirements far less demanding ? by necessity, since bandwidth itself was so severely limited. It was an imageless, text-centric world.

Passionately visual creatures that we are, this situation soon changed … and changed with a vengeance! Along came the Web and and the web browser and suddenly the online world was teeming with graphics.

Uses of Graphics

You’ll find graphics incorporated in more ways than you might at first realize:

• Many are right out in the foreground, in the form of splash images, photographs, and logos.
• Others are part of a navigation system, used as image maps and icons.
• Others are a bit more difficult to spot and appear as background images, watermarks, graphic bullets and lines, graphic text, and invisible “spacer” graphics that are used to fine-tune page layout spacing.

Graphics Sources

There’s a wide spectrum of options for getting your graphic images?you can make your own, you can hire someone to make them, or you can use pre-existing graphics. (Whatever you do, though, don’t steal someone else’s! That isn’t nice, it isn’t right, and it can land you in a lot of trouble.)

Click on the options below to learn more about each.

• You can hire an artist.
• You can scan existing hardcopy images.
• You can use existing negatives and slides on a photo CD.
• You can take digital photos with a digital camera.
• You can download free graphics.
• You can purchase pre-made graphics, aka “clip art.”
• And, of course, you can create the graphics yourself.

Hire an Artist

Sometimes hiring an outside artist is the best option.

You want a great site, right? So you’ll need to be sure the quality of images on your site reflect the goal of the site. Sometimes that means hiring an artist to create your graphics.

For example, if yours is a business site and you aren’t an artist yourself, and you don’t have the time or temperment to become one, hire an artist to create your images. You’ll end up with original artwork, artwork to which you own either copyright or license, and artwork that matches the look and feel of both your company and your site.

There are many places to find good artists?network with people you know, email a company whose graphics you admire to see who did the work, check out online portfolios via one of the web directories.

When you work with the artist, make sure you agree on:

• Deadlines?When is the final art due and when is your input needed?
• Price?Are you paying by the hour or for a finished work?
• What you are getting for that price?What will the artist physically deliver to you: A Freehand file? A GIF? Hardcopy?
• What rights do you have to the art?Can you use it on any Web site? Can you use it in print? Can you use it in a video?
Scanning

A scanner turns printed images and real objects into a digital file.

A scanner digitizes a hardcopy image or whatever object you place in the scanner. Its beam of light captures the image by dividing the image into a very fine grid of cells (about 9,000 per square inch) and recording the value of each cell’s color. These cell-color values are then stored in the digitized-image file.

Don’t be afraid to experiement with scanned objects!

• Photos, hand-drawn art, historic documents, your nephew’s refrigerator masterpieces … these are all things that exist on paper that you might want to digitize for your site.
• Flowers, cloth, and other found objects are things you can scan to create new digital art for your site.

Once you have scanned the image, you’ll have a digital graphics file. We’ll teach you how to optimize the file (remember bandwidth!) to make it display more quickly on your page later in this section. You’ll want to have an image editing program or Web graphics tool, like Fireworks, to do this.

Using Negatives and Slides on a Photo CD

Outside services will digitize photos for you.

If you have a set of photographic negatives or slides, most professional photo shops can digitize them and store the digitized images on a Photo CD. Not only does this save you the trouble of scanning them in yourself, but the image quality is typically very good.

When you’re ready to use an image, you just copy it from the photo CD to your desired Web-site folder, optimize it, and insert it into your Web page. You’ll probably want to have an image or Web graphics tool as you optimize the file for Web use.

Digital Photos

Digital cameras are a quick and easy way to capture images for use in your site.

If you are a photographer (or aspire to be one), consider investing in a digital camera. Since the photos are already digital, you can often use the images straight from the camera with minimal or no editing, except for optimizing the files for Web display.

Digital cameras vary dramatically in quality and price; you can spend anywhere from a few hundred dollars for an entry-level model to a few thousand for a professional one.

The good news: If you intend to limit your digital photo output to the Web, you can get excellent results from a relatively modest digital camera, since Web images don’t require the high resolution that printed images do.

You’ll also want to own an image or Web graphics tool to make the process of optimizing easier.

Downloading Graphics

There are many online sources for pre-made graphics.

There are many Web sites that offer collections of free graphics: backgrounds, buttons, bullets, bars, animated GIFs, “Under Construction” flags, clip-art, photos, etc. In most cases, these graphics are completely free for personal use; developers of commercial Web sites must either pay a fee or sign a licensing agreement. So before appropriating graphics from such sites, be sure to read the fine print in their usage policy!

Here are some prime free-graphics sites:

• Art Today
• FreeImages
• Icon Bazaar
Buying Clip Art Collections

Check out commerical clip art collections.

A convenient way to acquire graphics is to purchase a collection of digital images, also known as “clip art.” (Once these graphics came in books on glossy paper and you’d clip the art you needed, put it in your graphics camera, and resize it for your page … hence the term “clip art.”)

You can find general-purpose collections on CDs in many places. These graphics range illustrations, to buttons, to photographs, and come in a multitude of styles and prices.

For more specialized graphics, especially photographs, you can turn to a photographic stock house that sells collections of single images, such as:

• Corbis
• Photosphere
• Photodisc
Creating Graphics

To create your own images all you need is a graphics creation tool and a little willingness to play and experiment.

Do-it-yourselfers, rejoice! There are many options for creating your very own graphics and you don’t even need still life drawing skills to make nice images for use on the Web.

Illustration software contains various drawing and other graphical tools that lets you create illustrations, charts, logos, text effects, line art, and cartoon-like images.

This image was created with Fireworks. Click on it to learn how it was made.

The two most commonly used illustration programs are Adobe’s Illustrator and Macromedia’s Freehand. Both programs are full-featured, professional-strength graphics illustration programs suitable for all media. There are passionate adherents of each, just as with Netscape and Internet Explorer! If you are focusing on the Web, you might also want to consider one of the new hybrid tools, such as Fireworks, which offers good basic illustration features.

Image-editing programs were designed to let you modify or enhance existing graphics, typically for print production. Image-editing programs are rooted in photo retouching, but have grown to become full-fledged graphics tools.

Here’s a photo taken with a digital camera.
	Here’s the same image after being manipulated.

Adobe Photoshop and Paint Shop Pro are two commonly-used programs in this category. Photoshop is a high-end tool for image manipulation …de rigueur for print graphics professionals. If you are producing photos for print reproduction, you’ll probably own Photoshop. Paint Shop Pro is an entry-level, but still very powerful and popular, image editor that offers much of the same functionality as Photoshop for a fraction of the cost. As with illustration, if you are creating photos for the Web, you may be just as well off with a Web graphics package, like Fireworks.

Web graphics software packages are designed to meet the needs of Web developers. This new category of tool is a hybrid program designed specifically for the production of Web graphics. If you’ll be making your own graphics more than once, it is worth investing in one of these tools.

The majority of graphics you see throughout this zone were produced with Fireworks, from Macromedia.

[Editorial disclaimer: Macromedia is helping to underwrite the cost of creating this section about Web graphics, but that’s not why we use Fireworks. We liked Fireworks first?Glenn Davis was a beta tester for it?and then came to conclusion that Macromedia would make a good partner because it obviously understood Web graphics.]

Web graphics packages provide tools for editing and manipulating existing graphics, creating animated GIFs, exporting to appropriate file formats, and creating Web effects, such as image maps and Javascript rollovers, as well as for creating graphics from scratch.