Designing graphics for use on websites can be a quite lengthy and frustrating matter. Often one has to use a variety of specific editors to achieve the desired results, and it isn't easy keeping track of tens, or hundreds, of graphic files while doing this. Macromedia Fireworks is specifically tailored for building web graphics and provides the "99 percent solution" to these problems.

Raster and Vector

Graphic files come in two distinct flavors: Raster and Vector. Raster graphics are the kind you'll probably be most familiar with, since web pages under the current standards will carry only raster images. These images are made up of dots called pixels, and the relevant file formats contain information about the color of each pixel that makes up the image. When editing a raster image, you change the color of certain pixels.

Vector graphics, on the other hand, are made up of so-called objects. If you place a red square on a white background, the file format will describe the image consisting of two objects: The white background, and a red rectangle having its corners located at certain coordinates. A rendering engine uses this information ("vectors") to display the image.

The advantage of vector graphics over raster graphics is that vector graphics can be easily and precisely edited at any time, since each separate object can be selected and modified. This cannot be done with raster graphics as the very moment you draw something in a raster graphic, this becomes merged with the rest of the image and cannot be manipulated as a separate object - the only thing you can do is "undo" the action and return the file to it's previous state.

Those who design graphics usually prefer vector editors like CorelDraw and Adobe Illustrator. However, at some point almost all vector graphics must be converted in some sort of raster format - mandatory for web use. To do this, all raster editors have an export function. But you won't have the slightest idea what your exported file will look like until you view it after exporting - and it isn't unlikely you'll be less than satisfied with the result.

The Best Of Both Worlds

Fireworks' drawing tools are those of a vector editor, and each and every object can be edited at any time. But the very moment you edit them, a built-in rendering engine shows you the raster graphic that will result when the file is exported. The bottom line is perfect control over your graphic's appearance, with all the benefits of vector editing.
In addition, raster images can be imported and edited as well.

In Fireworks, objects can be made up quickly and easily using circles, polygons and bezier curves. Objects can be grouped and combined, distorted, scaled and otherwise manipulated.
Editing features include textured and gradient fills, various effects like drop shadows, glow, emboss, bevels, and extensive text editing. All of these features perform fairly well. I was especially delighted with the textured fill which, after some prodding, produced an interface that looked exactly like it had been cut out of a slab of brushed aluminum...
The possibility of saving settings for gradients, outlines and effects comes in very handy whenever you have to create a series of objects with the same overall appearance.

The editor supports both layers and frames, allowing a very structured and efficient approach to complex projects, particularly those involving animation.
A library feature allows you to save bits and pieces for future use in different projects. You can create your own little stash of standard objects and have it available at a click of your mouse. It is also extremely helpful when doing animations.

Cut 'em up & Squeeze 'em!

Once your done with the design, you have a host of options when it comes to transforming your graphic into the gif or jpeg (or png, but this format is not supported by all browsers) you'll be putting on your web page. An advanced export preview lets you choose a file format, set compression options and shows you what the resulting graphic will look like. This enables you to choose the most appropriate format for a particular graphic and achieve optimum balance between appearance and graphic file size - considered of crucial importance in web graphics, since on many web pages the graphics account for the bulk of the loading time.
If your project contains more than one frame, you can export animated gifs too. In this case, the usual animation options are available. Alternatively, you can export each frame as a separate file, or you can export the animation in .swf (Flash) format and import it in Flash for further editing.

A connected feature is the slicer - this lets you cut up a larger image into a number of convenient "slices", which are then assembled again into a framework of HTML code. You've probably seen one of those pages with a substantial graphic interface that appeared to piece itself together while the page loaded - this is achieved through sliced images. The technique has many advantages: each slice can be separately optimized, thus reducing overall size, and bits and pieces can be "recycled" on other pages that use a similar graphic, greatly reducing overall load time.
In order to let you define how the image is to be sliced, a separate layer is provided - the "Web layer" - that you use to draw your slices.
When exporting sliced images, Fireworks can also write the HTML required to piece them together again, and even javascript for button rollovers and links. If you use Dreamweaver, the integration is seamless. But since I write all my code by hand, I usually don't use these features - I might use the HTML when I'm just trying out something in a hurry.
The same thing holds for image maps - Firework allows you to draw your hotspots on an image, using the aforementioned "Web Layer", for use as a client-side image map, and it will write the corresponding HTML for you. Until this day, I didn't use the feature - the few times I used an image map, I coded it by hand.

Importing Existing Artwork

Fireworks can import Coreldraw, Illustrator and Freehand files, as well as most common raster file formats. Be cautious with the vector formats however - compatibility issues may exist. A number of options are available when importing, and a certain familiarity with said drawing programs will come in handy in order to achieve desired results.

Conclusion

When designing web graphics, few programs offer the versatility, ease of use and scope of Fireworks. It will perform all those operations one used to need various different programs for, and while specific vector or raster editors may have superior performance for their designated purposes, Fireworks will present very good-looking (and fast-loading) results with minimum fuss and maximum ease of maintenance. It will save you time, money, and nerves, and it will enable you to meet today's ever tighter deadlines without excessive coffee consumption. If whatever you're doing involves putting graphics on web pages, it certainly pays to have Fireworks handy.



Recommended: Yes