Graphic artists who create images for the Web or for CD-ROM have different demands from those creating artwork solely for print. Like print designers, Web artists must understand all the elements of commercial art--composition, texture, form, shapes, text layout, font legibility. However, Web artists also need to understand file formats, file compatibility, file-type limitations, colour palettes, Web-browser compatibility, font availability, the depth of the colour palette, and, most importantly, compression.

Currently, compression dominates and dictates graphics for the Web. The size of a graphic directly impacts the viewer's Web-surfing experience more than anything else; if the page takes too long to download, the viewer is off to another site.

For that reason, there are many tools designed to prepare art for Web sites. These tools offer the flexibility to create the best-looking image possible, yet still yield the smallest possible file. Additionally, they offer tools such as colour palette compatibility, automatic viewing in a Web browser, automatic generation of HTML code, and image slicing for using a graphic as a series of images in an HTML table. The best of these tools even let you play with compression settings and output different file formats, so you can preview images to see how they look and how small the file is before actually writing anything to disk.

Image formats

There are two basic types of image formats: GIF and JPG. The GIF format's strength and weakness is that it is limited to 256 colours (8 bits). This makes the GIF format a poor choice for photographs or files with subtle gradient tones; however, it's perfect for an image with large areas of solid colour. The GIF format limits (indexes) the number of colours used in the file and drastically cuts down the size of the file. Also, GIF files can have multiple embedded frames suitable for low-resolution animation.

Adobe Photoshop

Adobe Photoshop ( Mac version) is the application most likely to be found in the tool chest of most Web artists. Photoshop is the grandfather of digital imaging tools, and the yardstick against which all other imaging tools are measured. Version 6.0 comes with a majorly overhauled Adobe ImageReady, a solid and integrated application that works hand in hand with Photoshop to convert native Photoshop files into GIF--or JPG-compressed images.

ImageReady--and Photoshop to a certain degree--can show you "previews" of the image based on various compression schemes. Some images compress better than others, depending on the content of the image. Being able to preview the image saves a great deal of time--you don't have to save out the file, fire up your Web browser, load the image, make notes about what you like and don't like, and go back to the original to start again. ImageReady also enables you to "slice" a single image into HTML table-ready graphics and to optimise the compression of each section selectively.

Also, ImageReady can create rollover graphics (graphics that visually change when you move your cursor over them). For example, when you move your cursor over a button on a Web page and the button changes from red to green in colour, you are actually looking at two different graphic elements--one red and one green. ImageReady facilitates the process by helping you build both graphic elements in position in one file and by generating the necessary JavaScript code that references those graphic elements for the Web page's HTML file (the source file that the Web browser loads and reads).

Jasc's Paint Shop Pro

Although it is only available for Windows, Jasc's Paint Shop Pro is another popular imaging tool. Paint Shop Pro has nearly all the features of Adobe's Photoshop, and even some that Photoshop doesn't have--including a lower price.

Paint Shop Pro has tools for built-in vector drawing (similar to Adobe Illustrator), including text on a path, and is compatible with Photoshop plug-ins. In fact, this software is fully compatible with Photoshop since it can read and write Photoshop-native files. Like Photoshop, it allows you to reduce the colour palette and save files as full-colour compressed JPG image files. Paint Shop Pro is also extremely versatile and works with most scanners and digital cameras.

Macromedia Fireworks

Macromedia is determined to be the software tools company that Web developer's love most, and its Fireworks software (also available in a Mac version) is certainly an endearing step in the right direction. Fireworks is a tool for creating, editing, and saving graphic images specifically for the Web. Unlike the other tools mentioned, which can accommodate large images and non-RGB colour models, Fireworks works only with RGB colour models and smaller images.

Fireworks is vector-based, which allows for tremendous control of edge sharpness at any resolution or scale. Images are drawn using a pen-and-bezier-line method, as in Adobe Illustrator, but you can apply bitmap filters to these shapes. And since text in Fireworks is vector-based, you can add it and edit it later. Fireworks can handle image "slicing" and can assign URLs to each slice, as well as generate the HTML table code. It also supports MacroMedia Dreamweaver cascading style sheets and is designed to integrate with Dreamweaver.

Fireworks saves its images in a native format, as well as in GIF and JPG formats. The advantage to using a tool such as Fireworks is its unique "one-stop-shopping" production method. If you were using another software package to create clean vector art for the Web, you would have to start creating your image with a tool such as Illustrator; then you would have to import your image into Photoshop for resizing, rasterizing, and colour-palette matching; and, finally, you would export your image from Photoshop using your preferred file format. Fireworks allows you to do all of that from one application.

Corel Draw 10.0

Corel Draw 10.0 delivers vector-illustration, layout, bitmap-creation, image-editing, painting, and animation software--all in one package. This new version includes Corel R.A.V.E., a powerful new animation application that lets you change live effects over time, generate a time line of edited work, create rollover graphics, and convert images to Macromedia Flash SWF format.

Ulead's PhotoImpact 6

Ulead's PhotoImpact 6 offers a valuable set of features for the Web designer, and at a reasonable price. It has all of the basic bitmap-editing tools and layers, and supports the Photoshop format for plug-ins. PhotoImpact also can export image slices, JavaScript rollovers, and HTML code. A feature that is unique to PhotoImpact is a set of built-in tools that assist in creating such things as banners and Java rollover buttons.

Tools Overview

All of these tools work in their own native mode, which supports full 24-bit colour and multiple layers. These modes, when saved to disk, are often uncompressed formats, and require the originating application to open, although you should be able to open and save files in a common format, such as Photoshop (*.psd).