Fireworks: Works as Advertised
Macromedia adds another fine product
to their Web developer suite
By Bob Schmitt
May 22, 1998
| Product | Fireworks |
| Manufacturer | Macromedia |
| Platforms | Macintosh PowerPC, Windows 95/NT |
| Price | $299 (est. retail) |
| Available | Summer 1998 |
| Try it | Download the public beta and try out Fireworks for yourself. The beta expires June 8, 1998. (Windows: 6.1 MB .zip; Mac 7.6 MB .hqx) |
This week I had to return a $300 lawn mower because it was leaking gas through the air filter, an $800 office desk system because it was delivered with big gouges in the veneer, and a $40 iron because it leaked water all over the clothes.
What does this have to do with Fireworks? Absolutely nothing. But after this hellish week, I just wanted you to know what a pleasure it is for me to report on a product that actually works as advertised. In a market where we seem to be getting less quality, less features, and escalating costs, it's nice to say that Macromedia has come through with an affordably priced product that's packed with useful features.
Web graphic designers have a lot of tasks to perform in order to get their graphics to the Web: creation, optimization, animation, and utilization. This is in order to make use of their work in the broader sense of an HTML page, creating JavaScript rollovers, imagemaps and the like.
While Fireworks may not be the one and only tool you need, its tools do simplify many of the tasks Web designers perform on a day-to-day basis, and many of its features add functionality not easily found elsewhere.
In this review, I will provide a cursory overview of Fireworks' user-interface, working with type, image optimization, animation, as well as some other things that I liked about Macromedia's latest creation.
Image Creation
Different strokes for different folks
Fireworks' image creation environment has a somewhat familiar look to other applications on the market. You'll find a toolbar with such standards as brushes, pencils, rubber stamps and buckets. You'll also see familiar nesting, floating windows (a la Photoshop) for accessing such things as color mixing, layers, tool options and info. But under this familiar surface, Fireworks has taken a different approach to drawing.
Macromedia has taken an approach they call Live Effects. In a nutshell, instead of pixel-based creation of an image (as in Photoshop or PaintShop Pro), Live Effects uses pixel-style natural media effects that are added to vector-style lines, type, and shapes. This gives the designer a great deal of flexibility in shaping and modifying pixel-style effects, after they have been drawn. In other words, anything you draw or create in Fireworks is editable at any time.
In the Brushes window, you control the type and color of the stroke applied to lines or shapes. Choices range from airbrush to crayon to confetti. Very similar to Fractal Design's Painter, you can even control the surface texture of the paper that the stroke is applied to. Figure 2 shows a sampling of the types of effects you can achieve with a single brush stroke — each brush stroke is fully editable time and time again.
The Fill window offers the same type of control for an object's fill. You can choose between solid fills or pattern fills such as brick, tweed or wood; or add a variety of gradated effects such as linear, radial, ripples, folds or starburst gradations.
The final window in this set is the Effects window. With this window you can instantly add bevel, emboss, drop shadow, and glow effects. Again, all of these effects are fully editable at any time. Bevel and emboss effects give you adjustable controls over the height of the effect, contrast and softness of the effect, and the angle of the light source. Drop shadow and glow effects add control for the strength of the shadow or glow, and drop shadow has an additional control for offsetting the shadow.
Additionally, the bevel effects allow you to set up, down, over and on Click states for the object which, when combined with Fireworks' Frames window, can be used to create JavaScript controlled buttons, something I will discuss in a later section.
Having an Effect on Type
Where these effects become very interesting is when they are applied to type. Unlike pixel editing programs like Photoshop, where type is rasterized (turned into pixels), any of Fireworks' stroke and fill effects can be added to type, while the type still remains fully editable.
Change the font, change the type size, change the kerning, even change the wording of your type and Fireworks automatically applies these changes to the type effect you've already created. Just like a vector drawing program, you can always change the type!
Speaking of type, Fireworks provides control over type similar to the kind you might find in vector drawing programs like Freehand or Illustrator. These include scaling, skewing, distortion and other transformations, as well as setting text on a path — something you would previously have had to use a vector drawing program to accomplish.
While Fireworks' vector-style drawing offers a lot of flexibility, don't sell your copy of Photoshop just yet. In addition to lacking all of Photoshop's powerful image editing features — levels, curves, hue/saturation, etc. — the general slowness of its painting can make extensive pixel-level work — creating fine illustration or photo retouching — cumbersome. Look for this to improve in future revisions. Fireworks is really more conducive to the grist of Web design: Creating and editing navigational elements such as buttons.
Optimization: Quality vs. Speed
One of the pure drudgeries of a Web designer's job is, after the creative work is done, optimizing the graphics for the Web. This typically entails trying several different settings, saving them to disk, and viewing them in a browser. You're basically trying to find the best trade-off between the quality of the image and its file size.
The best part of the Fireworks package is its Export Optimization window, which can be accessed by selecting Export from the File menu. This window makes quick work of the optimization chore by giving you up to four different views of the image, each view with its own set of controls to make adjustments independent of the others.
With the Export Optimization feature, you can easily create several different looks for the image — with different compession methods like GIF, JPEG or PNG; and with different quality settings (in the case of JPEG) or in the case of GIFs, different palette settings and bit-depths. Not only does Fireworks offer this convenience, it also does an incredible job of selecting the best colors in the image and dithering them for maximum efficiency.
In the example above, I was able to view my graphic with GIF settings of Adaptive palettes showing 128- and 32-color versions, and a JPEG sample at 70% compression. As you can see, each preview window displays these settings, along with the size in Kbytes that the image will be after exporting. This allows me to quickly evaluate and decide, for example, if the quality loss from 128 colors down to 32 colors is worth the extra 10-Kbytes I would save. I can also to evaluate if the JPEG version at 70% is better or worse than my 32-color GIF of the same size. Also, by including a view that uses the 216-color Web safe palette, I can see how my image will look on 8-bit monitors.
Obviously the combinations you can achieve are endless; the beauty is that you can quickly and easily test multiple looks and compare the results side-by-side. The other advantage with Fireworks is the incredible job it does of quantizing the colors when doing color reduction. In the split screen view shown (Fig. 5 below), you can see that the quality difference between the 128-color version of the image at 27-Kbytes and the full-color version at 118-Kbytes is nearly negligible. This is one of the best applications I have ever seen for this task.
One enhancement I'd like to see Macromedia make, which would make this function complete, is the addition of an Apply button. It can be a little tedious to switch between color modes, switch palette-type and color-depth, and then between each of these steps have to wait for Fireworks to calculate the change. It would be much better to make each of these changes and apply the settings once, thereby decreasing the wait time three-fold.
Animation: Layers in Motion
Similar in many respects to Adobe's ImageReady, Fireworks' animation feature uses layers and frames to create a powerful environment for creating GIF animations.
Unfortunately, Fireworks lacks the tweening features found in ImageReady, making it much more tedious to create complex motion animations. Considering most animations on the Web are several frames, this is a minor point, but a feature I'd like to see added.
Animations in Fireworks are created by adding or duplicating frames and using layers to move, hide or show, change opacity, or add other effects to the image. These individual attributes of the layers are retained by the frames in which they are set, so each frame can have its own unique look.
Fireworks' Layers window features a pop-up menu to quickly jump to any frame in your animation, as well as forward and back buttons to step through the animation frame-by-frame without having to return to the Frame window.
Figure 6: Fireworks' Layers and Frames windows.
The Frame window also allows you to rearrange frames by moving them up and down in the window — just as you would layers. It also sports a pop-up window that allows you to add, duplicate and delete frames. This window also lets you copy a selected object from one frame to another, and distribute a series of selected objects over number of frames.
Lacking in both the Layers and Frames windows are Photoshop-style buttons at the bottom for adding and deleting layers or frames. Hopefully this basic UI feature will appear in the version that ships, or in later versions of Fireworks.
GIF animation controls such as looping, disposal and frame delay are accessible through the Animation tab in the Export window.
With Fireworks' vector-style drawing environment, I can only imagine how incredible this animation environment might become had Macromedia any plans to integrate it with their very popular vector animation program, Flash. And for that, how Fireworks' natural-media effects might enhance Flash movies. The mind boggles.
Utilization: Making it Work in HTML
Along with its image creation, optimization and animation features, Fireworks adds several features designed to make utilization of your Web graphics much easier.
The first of these features is the built-in image map capability. Similar to many stand-alone image map applications, Fireworks comes with tools for creating rectangular, oval, and polygon shapes. Once you've drawn your shapes on the image with these tools, URLs are added by selecting an existing URL from the URL Links pop-up menu, or by selecting New Link from the Options pop-up menu. An eye icon on the URL Toolbar lets you hide the URL shapes, so you can work without the shapes blocking your view. Fireworks outputs both client-side and server-side (NCSA) image map files.
Fireworks also integrates another recently popular innovation: Picture slicing. Slicing is a simple, yet powerful tool for dividing up a single image into different pieces and saving each piece as a separate file. This is particularly useful in the creation of navigational elements such as button bars, where having to divide a file up manually, cut and paste each piece into a new document, optimize and save them, are some of the dreariest chores a Web designer faces.
Slicing pictures in Fireworks is as easy as outlining the areas you wish to slice using guide rules, and selecting Export from the File menu. Selecting the Slice Along The Guides checkbox under the File tab and exporting will save your image in as many files as are needed.
The combination of these two features along with a third, JavaScript rollovers, puts Fireworks far ahead of its competition.
When using Fireworks' Frames and Effects windows to create four different states for your image: Up, Over, Down and OnClick, and Slicing to divide the buttons into separate files, Fireworks offers the option to automatically generate an HTML file containing JavaScript to do mouse over, down and click effects. No more having to cut your buttons up into four parts, optimize them, output them, and toil over making your JavaScript work. Fireworks does it all for you in a fraction of the time.
Is Fireworks for You?
Whether Fireworks fits your needs and workflow is something you'll have to answer for yourself. Fortunately, Macromedia offers a fully functional beta version for you to try out, so you can beat on it and see how well it works for you.
This program is by no means perfect — it can be rather slow at times, and it's lacking in areas such as animation tweening, but I have heard rumblings from Macromedia that the full release will take leaps and bounds ahead. We'll see.
Meantime, try out the beta and see if it doesn't become an indispensable part of your Web arsenal. I've been using Fireworks since the beta was released back in March, and its optimization engine alone makes it worth the money — regardless of the final shape it takes at release.
Copyright © 2012 Robert Schmitt. All rights reserved.