The Web Graphics Toolkit

by Gary David Bouton

Unless you have specifically changed the options in your Web browser to turn off the display of graphics, you're sure to have noticed slick-looking sites all over the Web. It's the secret ambition of every Webmaster to create Web pages that are every bit as appealing and professional-looking as the multimillion-dollar sites created by the "big boys.'' The truth is: Your pages can compete graphically with the megasites for mini-dollars. All it takes is creativity and a helping hand from some of the wallet-friendly tools I'll introduce you to. I'm sure you will want to add at least one or two of the following Windows or Macintosh programs to your personal graphics toolbox.

Summary

• An introduction to Web media and a discussion of the difference between bitmap and vector files.
• File formats: Which should you use?
• Windows graphics tools
• Mac graphics tools
• Cross-platform graphics tools - graphics essentials
• Recommendations for graphics programs under $250
• Conclusion

An Introduction to Web Media

When you sit down to create a graphic image, you can use either a vector drawing application or a bitmap painting program. Most graphic design tools save the files you create in either a vector (lines and curves) drawing file format or in a bitmap (pixel-based) format. Some programs can save your work in either format. When your work is bound for the Web, it is critical that you save your work in a format that can be widely displayed in the browsers your visitors use to view your site.

Bitmap files

Up-to-date, graphics-capable Web browsers can display graphics that have been saved in the following bitmap-based file formats: GIF, JPG, and PNG, without the need for special browser plug-ins. Older browsers only supported GIF and JPG file formats. There's a lot you can do with a GIF or JPG image—the visual part of the Web is built almost entirely from files in these two formats. GIF and JPG graphics are very useful as stand-alone images, and sequences of GIF files can be used to create animations. The drawback to using GIF or JPG images is that if you don't compress them properly, they will take a long time to download and may not look all that great.

Vector files

Vector-based files, on the other hand, are by their nature very small, quick to download, and not subject to visual degradation. Unfortunately, vector graphics aren't really very practical to use on a Web site because Web browsers can't display these kinds of images unless a plug-in or helper application has been installed on your visitor's computer. That means not everyone who visits your site will be able to see these images. But just because vector graphics aren't yet good choices for placing on your Web pages doesn't mean you should avoid designing with a vector graphics creation program.

Major vector drawing applications such as Illustrator, CorelDraw, and CorelXara can export your work as GIF or JPG images. Paint-type programs such as Painter and Photoshop also export to these same Web-friendly file formats. If you already use any of these programs, you have a good, solid core for your graphics toolkit. But no one tool is the best tool for every situation. I'll introduce you to some great, "must have" additions. And if you're just starting out and your toolbox is empty, I'll lead you to tools that are both within your financial reach and won't become obsolete overnight (so your investment is long term!)

File formats

GIF and JPG file formats come in different flavors. For example, a GIF file can be animated or it can be a still image. A GIF file also can be interlaced so it starts to form a recognizable image as it is downloading.

Similarly, JPG files come in three types: baseline, baseline optimized, and progressive. Baseline is an option in most of the tools we'll see here that you don't really have to use. It was designed for browsers that we'd consider to be ancient these days (such as Internet Explorer version 1). Baseline Optimized, when offered by a program as an option, is usually the way to go. Baseline Optimized offers more compression over standard baseline, and practically every browser today can read such an image.

A progressive JPG, like an interlaced GIF file, builds as it downloads, going from a crude representation of the image to its finished look. While this is a nice format for the Web, not all browsers support progressive JPG images, so I discourage you from saving an image in this format. Ninety-nine percent of the graphics programs discussed here can save images to GIF or JPG format using all of the options listed above.

Graphics Programs

There are about a zillion programs available that you can use to create Web graphics. Some are cross-platform, meaning the program is available in both Windows and Macintosh versions—. And, some are available only for Windows or only for the Mac. The ideal graphics toolkit is composed of tools that are cross-platform and platform specific. I've broken this roundup into three sections that reflect the platforms the software runs on. Then you will find a section that shows you how to put together a very capable graphics toolkit for under $250. All the sections are linked to each other, so feel free to read these sections in any order you like.

• Click here to read about Windows-only programs and utilities listings.
• Click here for Macintosh-only programs and utilities listings.
• Click here for cross-platform programs and utilities listings.
• Click here to find out how you can get everything you really need for under $250.

I recommend checking out both Windows and Mac listings—even if you are running a specific operating system and don't think you'll ever switch. It'll not only give you a better idea of what is possible, but it's useful to know about programs "on the other side" when you are working collaboratively with another designer or with a client who uses a different platform.

The Web is platform independent. Everyone can learn from exploring all the possibilities for graphics creation.

Recommendations

To begin your adventures as a Web designer, at the very least, you need a host application for plug-ins, and this host should be capable of importing and exporting to a number of file formats. You'll also want some special-effects plug-ins for making navigation buttons, a GIF animation program, and a program or utility that makes seamless tiling background images.You should collect freeware and cheapware where you can find it.

For Windows users, I recommend CorelXARA 2 as the drawing application, and if you like to paint instead of draw, PhotoImpact 4 as your host graphics application. On the Mac, I recommend Painter Classic, or Image Ready if you have a few more bucks.

So our minimum total cost so far is $99.

If you can only afford one Adobe standard plug-in for your host application, on the Mac it should be Alien Skin Eye Candy version 3. For Windows users, I'd recommend Total XAOS. My reasoning is that Mac users don't have a decent button maker, and Eye Candy makes decent buttons. My reasoning for recommending TotalXAOS for Windows is that it makes seamless tiling patterns for Web page backgrounds and also creates 3D text. And it does this better than PhotoImpact.

So we're talking $200 to $250 so far.

GIF animation programs are free, as are applets that optimize JPG and GIF programs on both platforms. So all four of the criteria—a background maker, a button maker, a host application, and a GIF animation maker have been met for around $250. You want frills, you pay more.

Conclusion

• I've covered some graphics staples, some exotic programs, and some basic graphics programs that are outstanding for their price when you count their features.
• I believe CorelXARA 2, SPG WebTools, Graphics Converter, and Painter Classic are some of the best buys you can entertain.
• Figure on spending $200 to get started with Web graphics tools that will not become outdated and are not a piece of junk. There's a lot of stuff out there for free, and for programs that cost $39 and up, both platforms can "try before you buy".
• Finally, entering the Web is exactly like entering any new profession. You must persevere if you want to go anywhere, and don't give up, regardless of the learning curve that accompanies doing anything new.

About the Author

Gary David Bouton is a seasoned advertising art director who is familiar with traditional design tools and their electronic equivalents. He has written over 14 books on computer graphics, from modeling to multimedia. Mr. Bouton, along with his wife and co-author, hold four international awards in desktop publishing and design. Visit his web site.

Illustration: Business Constructions by Russell Thurston at www.artville.com