Articles — Why Choose Fireworks?

Introduction

When choos­ing a graphic appli­ca­tion for cre­at­ing Web site lay­outs and graph­ics, design­ers are con­fronted with many choices between very dif­fer­ent types of appli­ca­tions. As Web pro­fes­sion­als, we need pow­er­ful and flex­i­ble tools that are well adapted to our unique require­ments because, even with the best of plan­ning, we often need to make design changes quickly to sat­isfy fickle client requests and evolv­ing project scopes. Additionally, most Web sites need to be updated reg­u­larly so the ease and speed at which our cho­sen graphic design appli­ca­tion lets us per­form either incre­men­tal updates or deeper lay­out changes becomes critical.

Following that, I decided to write this arti­cle for three rea­sons. The first one is that Fireworks is my own Web graph­ics and site lay­out design tool of choice and I truly believe it is a com­pelling option for any­one involved in that kind of design work. Fireworks offers many unique and inno­v­a­tive fea­tures that trans­late into real work flow advan­tages that really make it stand out. It meets the chal­lenges Web design­ers face every­day with ease and lets them be more pro­duc­tive cre­at­ing higher qual­ity work… all that and it’s a lot of fun to use.

Secondly, I wanted to write this arti­cle because Fireworks’ advan­tages may not be imme­di­ately obvi­ous to peo­ple who have never used it or have only used a min­i­mal sub­set of its fea­tures. Later in this arti­cle, I’ll dis­cuss some of Fireworks’ core strengths and fea­tures as well as high­light some spe­cific work flow sce­nar­ios for which I believe it offers clear ben­e­fits over such heavy­weight “com­peti­tors” as Photoshop. References to spe­cific real world tasks are scat­tered through­out the text.

The third and, for me, the most impor­tant rea­son I wrote this arti­cle is that, in the after­math of Adobe’s acqui­si­tion of Macromedia, many peo­ple were dis­cussing the future of exist­ing Macromedia prod­ucts like Fireworks in blogs and pub­lic forums. The point here is not to dis­cuss Fireworks’ future but, while read­ing many of those dis­cus­sions, I had noticed a seri­ous lack of under­stand­ing of what Fireworks really is and what it can do. This is still true today and it seri­ously both­ers me. I wrote this arti­cle in large part because I wanted to try and set the record straight.

I use Fireworks almost every day in my work and have been using it for sev­eral years. I have also used or am still using many of its com­peti­tors so I really know how well they com­pare from expe­ri­ence in the real world of Web design. This arti­cle is not about fea­ture to fea­ture com­par­isons but about the real life work flow ben­e­fits of Fireworks’ unique tool set.

I’ll start by defin­ing what Fireworks is in gen­eral terms as well as where it stands in com­par­i­son to the other heavy­weights in this very com­pet­i­tive mar­ket then I’ll move on to describ­ing spe­cific fea­tures and their usage. So let’s dive in!

What Exactly is Fireworks ?

The answer to this ques­tion might seem obvi­ous to many but, as I stated in the intro­duc­tion, there is a lot of con­fu­sion out there over what kind of graphic appli­ca­tion Fireworks really is or what it can and can­not do. For some peo­ple, Fireworks is a direct com­peti­tor to ImageReady and is merely a tool for slic­ing, opti­miz­ing and export­ing graph­ics from lay­outs cre­ated in other appli­ca­tions and imported into Fireworks. While those tasks are cer­tainly an impor­tant part of what Fireworks does, they are but a very small sub­set of Fireworks’ wide array of cre­ative features.

Other peo­ple often make the mis­take of com­par­ing Fireworks directly with Photoshop and crit­i­cize what they per­ceive as a lack of depth in its bitmap edit­ing fea­tures. Let’s make it clear right away that Fireworks does not com­pete with Photoshop directly any­more than it is lim­ited to the role of a glo­ri­fied Web graph­ics slic­ing and opti­miz­ing tool such as ImageReady. Fireworks’ pur­pose is quite dif­fer­ent from Photoshop’s and it is a far more feature-​rich and pow­er­ful appli­ca­tion than ImageReady. So, what makes it so unique?

Fireworks was designed from the ground up specif­i­cally for the task of cre­at­ing Web site lay­outs and graph­ics in an effi­cient and flex­i­ble man­ner. It is a cre­ative pow­er­house that can really do it all, from the cre­ative visual design stages to the slic­ing, opti­miza­tion and export of fin­ished Web graph­ics. With Fireworks there’s no need to switch between dif­fer­ent appli­ca­tions to accom­plish dif­fer­ent tasks and its tool set is tai­lored to the needs of Web designers.

Fireworks does it all within a sin­gle inter­face that allies the power and flex­i­bil­ity of both vec­tor and raster edit­ing tools as well as the best slic­ing and opti­miza­tion fea­tures in the indus­try. This kind of hybrid tool set is com­pa­ra­ble only to a select few appli­ca­tions and Photoshop, Illustrator and ImageReady are def­i­nitely not amongst them. In that respect, Fireworks is much more than any of them on their own because it con­tains the kinds of tools found in all three of those applications.

Furthermore and con­trary to what many believe, com­par­ing Fireworks to Photoshop or ImageReady makes even less sense when you con­sider that Fireworks is pri­mar­ily a vec­tor appli­ca­tion that is by nature a lot more sim­i­lar to FreeHand or Illustrator. Fireworks’ core toolset and work flow is vec­tor based, yet it offers very sophis­ti­cated bitmap edit­ing fea­tures that can accom­plish all but the most com­plex image manip­u­la­tion tasks Web design­ers need to per­form on a daily basis.

Fireworks’ hybrid vector-​raster toolset is almost unique amongst graphic appli­ca­tions and, when you add it to its unri­valled slic­ing, opti­miz­ing and export­ing fea­tures, you end up with a very pow­er­ful appli­ca­tion that suits Web designer’s needs bet­ter than any other.

The next sec­tion was writ­ten for the ben­e­fit of design­ers who are not very famil­iar with vec­tor appli­ca­tions and who’s graphic design soft­ware expe­ri­ence is lim­ited to raster based appli­ca­tions like Photoshop or Paint Shop Pro. All the above dis­cus­sion about Fireworks’ hybrid tool set won’t make much sense to you if you are not be famil­iar with vec­tor appli­ca­tions such as Illustrator or Freehand (or Fireworks!) and how they work com­pared to raster based appli­ca­tions. Old hat design­ers who already know all of this can just skip to the next section…

A quick intro­duc­tion to vec­tors and bitmaps

As you may already know, there are two basic types of graph­ics file for­mats and appli­ca­tions that cre­ate or edit them: vec­tor edit­ing appli­ca­tions and bitmap or raster edit­ing appli­ca­tions. This is not intended to be an in depth study of this sub­ject so I’ll go through these con­cepts very quickly with­out going in great detail.

Vector images are made up of “objects” whose prop­er­ties like their shape, size, colour, loca­tion and more are defined math­e­mat­i­cally. Vector images are usu­ally qual­i­fied as “res­o­lu­tion inde­pen­dent”. This means that vec­tor images can be resized to any dimen­sion with­out any loss of qual­ity and will print cor­rectly at any size. When zoomed in close, vec­tor images do not reveal any pix­eliza­tion or loss of detail and objects’ edges remain crisp and clean.

Bitmap or raster images ont the other hand are com­prised of pix­els or square “dots” arranged in a grid-​like man­ner. Each pixel in a raster image has a spe­cific loca­tion on the grid and a sin­gle colour value assigned to it. The grid itself con­tains a finite amount of pix­els. This means that, if a bitmap image is enlarged, the pix­els in the orig­i­nal only get big­ger and image qual­ity degrades rapidly while the edges of ele­ments in the image get pix­e­lated. Making a bitmap image smaller is usu­ally not a prob­lem. Also, when zoom­ing close to a bitmap images, you will clearly see the pix­els that com­prise it. Bitmap images usu­ally dis­play and print best at their nat­ural size.

Most graphic edit­ing appli­ca­tions cre­ate images that fall into either one of those two gen­eral cat­e­gories but not both. Others appli­ca­tions are strongly focused on one type of work flow while offer­ing tools of the other type in vary­ing degrees of sophis­ti­ca­tion. There are very few prod­ucts like Fireworks who are truly hybrid vector/​raster appli­ca­tions that offer strong tool sets of both types.

Examples of purely raster based appli­ca­tion include Photoshop, ImageReady and Paint Shop Pro. Both Photoshop and Paint Shop Pro do offer some level of vec­tor fea­tures but those are “grafted” into their tra­di­tional raster work flow and do not offer the flex­i­bil­ity of work­ing with true vec­tor objects like Fireworks does. On the other side, typ­i­cal exam­ples of pure vec­tor based appli­ca­tions include Illustrator, FreeHand and CorelDraw. While all of them can dis­play and print bitmap images along­side their native vec­tor objects, they have no tools for edit­ing raw image pix­els directly as you can in Fireworks or pure raster based appli­ca­tions like Photoshop.

Typical graphic design work flows often require work­ing in one type of appli­ca­tion then mov­ing files into another to fin­ish the job. This is an awk­ward process that can get frus­trat­ing as you try to keep dif­fer­ent types of files updated as well as deal with poten­tial ren­der­ing dif­fer­ences between appli­ca­tions. As I stated above, very few appli­ca­tion inte­grate both vec­tor and bitmap tools in one inte­grated envi­ron­ment that elim­i­nates the need to go back and forth between more spe­cial­ized pro­grams. Example of such appli­ca­tions include Corel XaraX, Deneba Canvas and of course, Macromedia Fireworks.

Now that we got all that out of the way, let’s move on to dis­cussing Fireworks’ core strengths.

Fireworks’ Core Strengths & Advantages

Integrated Work Flow

The pri­mary advan­tage Fireworks has over its com­pe­ti­tion is one I have already talked about: vec­tor and bitmap tools inte­gra­tion. With Fireworks you can seam­lessly cre­ate and edit both bitmap images and vec­tor objects with tools that are famil­iar to both kinds of work flows in one inte­grated envi­ron­ment. Fireworks is smart enough to switch between the two edit­ing modes seam­lessly depend­ing on the tools you choose and the actions you make.

Furthermore, Fireworks “stores” both kinds of objects into only one kind of lay­ers while, for exam­ple, Paint Shop Pro needs a spe­cial type of layer for vec­tors and Photoshop can­not work directly with vec­tor objects at all. It sim­ply uses vec­tor paths to mask parts of reg­u­lar bitmap layers.

By com­par­i­son, Fireworks is pri­mar­ily a vec­tor appli­ca­tion and bitmap images are han­dled as objects until a bitmap selec­tion is made or a bitmap tool is used. This is a con­cept for­eign to peo­ple that are only used to work­ing with pure raster appli­ca­tions like Photoshop but should make per­fect sense to some­one used to work­ing in Illustrator or FreeHand.

But the inte­gra­tion con­cept doesn’t stop there. On top of its hybrid vector/​bitmap tool set, Fireworks offers the best slic­ing, opti­miza­tion and export­ing tools in the indus­try in addi­tion to pow­er­ful ani­ma­tion capa­bil­i­ties. This means that after you are done cre­at­ing your graph­ics you can slice them directly on the same can­vas where they were cre­ated and edited and then switch to the Preview pane to tweak export opti­miza­tion set­tings and see how they will affect the exported graph­ics. You never have to deal with awk­ward “Save For Web” modal win­dows or need to open a sep­a­rate appli­ca­tion to cre­ate nav­i­ga­tion but­ton states and things of the sort.

In com­par­i­son, you would need all three of Illustrator, Photoshop and ImageReady in Adobe’s prod­uct line to do all that Fireworks can in one inte­grated environment.

Flexibility & Editability

The other main advan­tage Fireworks has over pure raster based appli­ca­tions is the flex­i­bil­ity and editabil­ity afforded by its vec­tor tool set. Unfortunately, this one is prob­a­bly the least obvi­ous advan­tage for peo­ple who are only used to work­ing with bitmap edit­ing appli­ca­tions. This becomes very clear when you look at the num­ber of posts on Fireworks related pub­lic forums from peo­ple ask­ing how to per­form tasks in Fireworks the same way they would do them in Photoshop for exam­ple. Very often, Fireworks offers tools or fea­tures that would make per­form­ing the same task eas­ier or in a non-​destructive man­ner. These peo­ple have often been using Fireworks for a while but remain unaware of the power of its vec­tor tool set because they are so used to per­form­ing cer­tain tasks with the far less effi­cient bitmap tools that are famil­iar to them.

A prime real life exam­ple of the above is the task of remov­ing back­grounds around peo­ple or objects in pic­tures. In bitmap based appli­ca­tions, this task is tra­di­tion­ally done by using bitmap selec­tion tools to select and delete the back­ground around the parts of an image one wants to keep. This can be a frus­trat­ing and time con­sum­ing process that often relies on trial and error to get the right selec­tion. Bitmap selec­tions are also fickle and fleet­ing things unless one thinks of sav­ing them (some­thing which is not pos­si­ble with many bitmap based image edit­ing appli­ca­tions). Lastly, delet­ing the unwanted parts of an image is a destruc­tive and irre­versible action that can­not be undone once the file has been saved and closed and the undo his­tory is gone.

In Fireworks, the same task was tra­di­tion­ally done by draw­ing a vec­tor shape with the Pen tool around the part of the image you want to keep and using it as a mask. This method is bet­ter than the pre­vi­ous one pri­mar­ily because it is a non-​destructive approach that does not delete any pix­els in the masked image and because the mask shape can be edited and tweaked at any time. The draw­back with com­plex vec­tor masks is that they can be dif­fi­cult and time con­sum­ing to draw with the Pen, espe­cially for peo­ple unfa­mil­iar with the tool. On the other hand and unlike bitmap selec­tions, vec­tor paths used to mask objects won’t dis­ap­pear between edit­ing ses­sions and they can be tweaked more eas­ily and with far more pre­ci­sion than bitmap mar­quee selections.

But now with the release of Fireworks 8, there is an even bet­ter way to “remove” back­grounds from cer­tain kinds of images using masks because cre­at­ing the vec­tor mask shapes has become eas­ier than ever with the addi­tion of the new “Marquee to Path” con­ver­sion fea­ture. You can now use a mix­ture of “tra­di­tional” bitmap selec­tion tools like the Magic Wand to select plain back­grounds and quickly con­vert an inverted ver­sion of that selec­tion to a vec­tor path that closely fol­lows the masked object’s con­tour. You still end up with an editable vec­tor mask shape but in a lot less time than if you had to draw it man­u­ally and it will prob­a­bly fit the object’s con­tour more closely. You can check out my “Removing Image Backgrounds with Fireworks 8” tuto­r­ial for detailed steps in how to per­form this kind of task.

Live Effects

The next Fireworks core strengths I want to dis­cuss is object level Live Effects. In Fireworks you can apply live, non-​destructive effects such as blurs, shad­ows and colour adjust­ments both at the layer level (as in Photoshop) as well as to indi­vid­ual objects. Furthermore, you are not lim­ited to the effects than come with Fireworks. You can use a num­ber of third-​party plu­g­ins that work as live effects on both vec­tor and bitmap objects includ­ing well known ones like Extensis EyeCandy and Intellihance Pro and many oth­ers. Some plu­g­ins like Flaming Pear’s SuperBladePro will only work on bitmap objects but are also usable as live effects. On the other hand, some plu­g­ins might yield unex­pected results when they are used on whole image objects instead of reg­u­lar bitmap selections.

In any case, being able to use third party plu­g­ins as Live Effects is a clear advan­tage over Photoshop Layer Styles which are lim­ited to the same kind of basic effects found in Fireworks’ Live Effects list (shad­ows, glows, etc). In Photoshop, all the more sophis­ti­cated effects offered by plu­g­ins can only be applied to images through the Filters menu and the changes they make are per­ma­nent ones, mean­ing that their para­me­ters can­not be edited at a later time. The effects need to be reap­plied to a fresh copy of the graphic if any changes need to be made. Fireworks also has sev­eral fil­ters whose effects are per­ma­nent but the many third-​party plu­g­ins that can work as live effects give it unpar­al­lelled flexibility.

Precision

For me this is one of Fireworks’ key advan­tages over pure raster based appli­ca­tions. Since Fireworks is vec­tor based, you can select any object and be able to imme­di­ately read and set its size and loca­tion from either the Properties Inspector or the Info Panel. Also, whether you have a bitmap or a vec­tor object selected, Fireworks “high­lights” either its bound­ing box or the path itself so you are always aware of what exactly you have selected. This kind of pre­ci­sion and flex­i­bil­ity is absolutely essen­tial for me when doing lay­out work.

Furthermore, with the release of Fireworks 8, Macromedia intro­duced a new panel called the AutoShapes Properties panel that gives user pre­cise numer­i­cal con­trols over a range of prop­er­ties for the most used AutoShape objects. For exam­ple, it is now pos­si­ble to con­trol the round­ness of indi­vid­ual cor­ners for rec­tan­gles cre­ated with the rec­tan­gle AutoShape.

Raster based appli­ca­tions like Photoshop do not offer this kind of imme­di­ate and pre­cise numer­i­cal feed­back. You have to look at the Layers Palette to find out what “image” or part of an image you are cur­rently work­ing on and there’s no way to know the pre­cise loca­tion or size of any indi­vid­ual graph­i­cal ele­ment in your lay­out. If you draw a rec­tan­gle and its cor­ners do not have the cor­rect round­ness, you have to delete it and start from scratch instead of sim­ply edit­ing an object prop­erty numer­i­cally. You have to have endured the tedium of “eye­balling” ele­ments align­ment or siz­ing in a pure raster appli­ca­tion like Photoshop to appre­ci­ate just how easy, pre­cise and fast this kind of basic tasks are done in Fireworks. Working in a vec­tor based appli­ca­tion removes all this awk­ward guess­work from your work flow and leaves you free to cre­ate with aban­don know­ing that you can edit any­thing eas­ily later on.

Pixel Accurate Rendering

When you work in Fireworks cre­at­ing objects and edit­ing images, the pro­gram ren­ders your graphic to a pixel grid set at the typ­i­cal Web graph­ics res­o­lu­tion of 72 ppi (pix­els per inch). This means that even vec­tor objects which are usu­ally res­o­lu­tion inde­pen­dent will be ren­dered to that pixel grid. People used to the res­o­lu­tion inde­pen­dent dis­play of full fledged vec­tor appli­ca­tion like Illustrator and FreeHand may see this as a lim­i­ta­tion in Fireworks, but it’s actu­ally an asset.

Having Fireworks ren­der your graph­ics at the final res­o­lu­tion they’ll be exported to enables you to fine tune things like the anti-​aliasing of ele­ments’ edges. This is pos­si­ble because, inter­nally, Fireworks can posi­tion ele­ments on a much finer grid than the whole pixel grid it uses for ren­der­ing. This empow­ers you to really fine tune how your text will look for exam­ple. You can tweak anti-​aliasing set­tings as well as text size and kern­ing val­ues and accu­rately view how those tweaks affect the edges of your text. To be able to see this you’ll need to zoom in close to your text while tweak­ing the var­i­ous set­tings that can affect how text in ren­dered in your final graphics.

This should also be pos­si­ble for any other kind of object natively but, unfor­tu­nately, Fireworks’ native tools do not per­mit users to move and posi­tion ele­ments on the can­vas by val­ues smaller than whole pix­els. This is a very strange over­sight in Fireworks’ tool set (espe­cially since Flash has had this func­tion­al­ity for years) but luck­ily, some smart peo­ple have pro­vided a solu­tion in the form of a free Fireworks exten­sion which enables you to move objects by frac­tions of whole pix­els. This is a prime exam­ple of where Fireworks’ exten­si­bil­ity comes to the res­cue (exten­si­bil­ity is dis­cussed in the next sec­tion). The exten­sion in ques­tion is call SuperNudge and was cre­ated by the smart peo­ple at Phireworx. It can be down­loaded for free here.

A dis­cus­sion of how to use SuperNudge and how it can help you tame the anti-​aliasing of all your objects’ edges is beyond the scope of this arti­cle but look for a forth­com­ing pixel forge arti­cle on how to mas­ter anti-​aliasing using tools like SuperNudge in the future.

Extensibility

This is another one of Fireworks main strengths. Although exten­si­bil­ity is not exclu­sive to Fireworks, it has the advan­tage of hav­ing one of the rich­est APIs of any script­able graphic appli­ca­tion as well as the abil­ity to use spe­cial pan­els cre­ated in Flash so that exten­sions devel­op­ers can cre­ate sophis­ti­cated graph­i­cal inter­faces for their exten­sions (the SuperNudge com­mand dis­cussed above is an exam­ple of such an extension).

Fireworks has a small but ded­i­cated and very inno­v­a­tive com­mu­nity of exten­sion devel­op­ers that have cre­ated lit­er­ally hun­dreds of exten­sions to aug­ment Fireworks’ already exten­sive cre­ative toolset. I use sev­eral of them reg­u­larly and I will also be ded­i­cat­ing a future arti­cle to this sub­ject alone.

High Quality Output & Efficient Optimization Work Flow

All the cre­ative tools in the world would be rather use­less if the appli­ca­tion that uses them didn’t out­put qual­ity images. Fortunately, Fireworks has been cre­ated from the ground up as a Web graph­ics cre­ation appli­ca­tion so it’s not sur­pris­ing that it opti­mizes and exports the small­est, best look­ing Web opti­mized files of any graphic appli­ca­tion. In mine and many other people’s expe­ri­ence, Fireworks con­sis­tently exports bet­ter qual­ity images at smaller file sizes than any of its com­peti­tors. Try it for your­self and you’ll be amazed at the results.

In Fireworks, you can tweak and pre­view opti­miza­tion set­tings right within the application’s inter­face with­out the need to go to an annoy­ing modal “Save For Web” win­dow. Furthermore, the Fireworks Preview pane lets you visu­al­ize any inter­ac­tiv­ity you added to slices (like rollovers, navbars, etc) with­out the need to test in a browser.

Conclusion

Hopefully, this arti­cle has helped you under­stand what kind of appli­ca­tion Fireworks really is and how it is uniquely designed to help in the cre­ation, opti­miza­tion and main­te­nance of Web graph­ics and images. There is a lot of mis­in­for­ma­tion about Fireworks’ true nature and abil­i­ties out there and, with this arti­cle, I wanted to coun­ter­act some of it by pro­vid­ing clear expla­na­tions and exam­ples from some­one who has been using it in the trenches for years (I started using Fireworks with ver­sion 2).

I really hope that the infor­ma­tion I pro­vided here will help those who have not yet decided on a graphic appli­ca­tion see how Fireworks can help them. I also hope that long time users who may have only used a sub­set of its fea­tures will now see it in a new light. In any case, writ­ing it has given me a new appre­ci­a­tion for the pro­gram I ditched Photoshop for years ago and with which I’ve had so much fun play­ing… I mean, design­ing Web sites . It has pro­vided me with the kind of flex­i­ble pre­ci­sion tools I need to cre­ate site design the way I like them quickly and pain­lessly. Fireworks lets me use my cre­ativ­ity with­out get­ting in my way and lets me make mis­takes I can fix eas­ily because, as the early Fireworks slo­gan said: “every­thing remains editable all the time”.

Have fun with Fireworks!