Web Graphics - Grabbing the Viewer's Attention

Web Hosting by Netfirms | Free Domain Names by Netfirms

The author is
a member of

Web Graphics:
Grabbing the Viewer's Attention

Photos and Graphics
Using Graphics on the Page
Multimedia
Resources

Photos & Graphics

Your page needs graphics to grab the viewer's attention. Think about it as the sign over your storefront that beckons your customer inside. You'll want to illustrate your products or services to help tell your story and you may also want to put your whole catalog on-line. Here are a few guidelines:

Black and White Images. B&W photos and drawings are generally less expensive, and can be scanned by most gray-scale hand scanners. Clipart for Desktop Publishing on computers is widely available and may be all you need. Black-and-white images can be tinted slightly blue or brown in a computer graphics application to give an antique flavor.
Color Images. Color grabs people. Obtain professional-quality photos of your products locally on a floppy disk or Kodak Photo CD-ROM and then send your Web designer the photos either attached to an e-mail message or on a floppy disk. Your Web designer can convert them to the proper format and manipulate them as necessary to fit the design of the page. You can also obtain stock photography from inexpensive CD-ROMs, or professional stock photograph on-line from PhotoDisc (http://www.photodisc.com). Clipart designed for the Web is available for free, or a nominal cost, either on-line or with the purchase of a computer graphics application. See the "Resources" section below.

Selecting the Image Format

GIF. Graphics Interchange Format can be viewed by all Web browsers. You can have from 2(B&W) to 256-colors. Best for continuous-tone Clipart and drawings as it compresses these images best.

JPEG. Joint Photographic Experts Group compress photos better and thus load faster. All modern (later than mid-1996) browsers can use this format. Most photos will be in True-color (16 Million colors) or High-color (32K colors).

PNG. A new format not widely used yet but has possibilities for the future. Better compression than GIF and has more "bells and whistles".

Image Properties

Transparent (GIF only). Transparency allows the background to show through the image for a more professional look. Your Web designer will know how to make transparent backgrounds that make images appear to "float" over the page. Do-it- yourselfers can accomplish this using L View Pro or Paint Shop Pro for PCs or Adobe PhotoShop, available for both PC and Mac.

Interlaced. Using interlaced GIF images helps keep your viewer's interest as the graphic gradually displays over four "passes." The total time is about the same for interlaced or non-interlaced images but the rest of the page will display faster.

Animated (GIF only).

Clickable Image (with or without a Border).

Image Map. The viewer clicks on the subject in the graphic that interests him or her and is linked to the appropriate page. Browser-side Image maps can be made by some HTML editors, but not all browsers can use them. Server-side Image maps are more expensive as they take more programming skill, and require a special interface with your host computer, but they will work with nearly all browsers. Your best bet is to leave Server-side Image maps to a professional Web page designer.

Using Graphics on the Page

Here are a few tips and ideas for using graphics on your Web pages.

Tip: Keep the size down so that your customer doesn't have to wait all day to be able to see them. Generally you want to keep the file size under 35K for people with 14.4K modems.

Thumbnails. Display the picture in a miniature sized image on the page to download fast. If the viewer wants to, they can click on it to display the full-size photo. Give the image size, such as 57K, in the caption so the viewer can decide whether or not to download it.

Tip: Use the ALT="..." parameter to the < IMG ...> tag so customers who don't have graphics, or have graphics turned off (for loading speed) will know what the image shows. Also, always use the HEIGHT=... and WIDTH=... parameters so that the browser can determine the graphics size early on and place the text correctly -- that way your viewer won't have to wait for the entire page to load to see the text.

Text-As-Graphics. You can "Set" your Main Heading in any text font, color and size available on your (or your Web designer's) computer as a graphic. This is the easiest way to go and can be quite effective if you select a font and color that defines your message. With more sophisticated graphics applications you can distort your text in the many ways you see on TV to create a unique message. You can also place this image on the page in many different ways.
Clip Art Graphics. Perhaps you have access to black-and-white or color clip art from a graphics application or CD-ROM that you can use for your business. Make sure your image is copyright free; you don't want your company to be sued. Then manipulate it as necessary, convert it to a GIF image and try placing it on the page in several different ways (image centered, image flush-left, image flush- right, text at top, text at middle, text at bottom, etc.) until you get what you want.

Tip: Not all your viewers have 256-color capability, some have only 16 colors. What does your graphic look like with 16 colors? If you do use a 256-color image convert it to the "Netscape --safe Palette" -- this wont "dither" the colors.

Scanned-In Image. You may already have a company logo or an artist's drawing. You can scan this in and convert to a GIF image. Use your own scanner, or have a local computer service bureau do this for you.

Tip: Try using a scanned in photograph with text superimposed on it. You can find some great scenic collections on the Internet, for example. Download one of these and superimpose your company's name or logo over it using Paint Shop Pro or Adobe PhotoShop. Or let your Web designer do it for you.

Tip: Not all your viewers will have True or High-color capability, some have only 256 or 16 colors. What does your graphic look like with 16 colors? 256 colors? 32K colors?

Original Computer Art by a Computer Graphic Artist. This may cost you a few bucks, but the right graphic sets the tone for your site. There are computer artists on-line who can produce beautiful work tailored just for your company's needs. See the "Resources" section below.

Multimedia

Multimedia is getting more common and more Web browsers and computers support it, either directly or through "plug-ins" (small downloadable software add-ons for your browser), so you might want to include:

Sound.
Animation.
Video.

For now, however, the "bandwidth" or modem speed of 14.4K or 28.8K bps is really too slow for most multimedia formats except perhaps for Real Audio.

Resources:

There are many graphic resources available for web pages on the Internet. A good starting point is Yahoo -- Try Computers_and_Internet/Graphics/ for a start. Here are some others:

Microsoft's SiteBuilder Network: Has a variety of images that you can download for FREE. They include rules, buttons, backgrounds, bullets, icons, clip art images, and photographs. Also can find sounds, activeX, Java, fonts, tools, and a whole lot more.
The RocketShop: Tons of free clip art and animations. If they don't have what your looking for, they will build it.
PamBytes: This site is home to a large collection of FREE and original web graphics available on the internet. Here you will find backgrounds, buttons, texture fills, banners, page themes and border patterns. Currently there are over 1000 images.
MediaBuilder: If you are building a website, or creating a multimedia presentation, they have all the materials you need. Their Image Library is one of the biggest on the Internet, and you won't find a better collection of power tools and software anywhere else.
ArtToday: A huge collection of ready- to-use graphics you can download any time you want (NOT FREE!).
Barry's Clipart Service: over 400 animated images, tons of FREE clip art and so much more.
The Wizard of Draws' Graphic Treasury: Hundreds of cool graphics, listed a-z
Corel's Home Page
Free Photoshop - Adobe Photoshop plugins & Photoshop filters
The Icon Browser
Texture Land
The Backgrounder
Netscape basic background collection