Introduction
When choosing a graphic application for creating Web site layouts and graphics, designers are confronted with many choices between very different types of applications. As Web professionals, we need powerful and flexible tools that are well adapted to our unique requirements because, even with the best of planning, we often need to make design changes quickly to satisfy fickle client requests and evolving project scopes. Additionally, most Web sites need to be updated regularly so the ease and speed at which our chosen graphic design application lets us perform either incremental updates or deeper layout changes becomes critical.
Following that, I decided to write this article for three reasons. The first one is that Fireworks is my own Web graphics and site layout design tool of choice and I truly believe it is a compelling option for anyone involved in that kind of design work. Fireworks offers many unique and innovative features that translate into real work flow advantages that really make it stand out. It meets the challenges Web designers face everyday with ease and lets them be more productive creating higher quality work… all that and it’s a lot of fun to use.
Secondly, I wanted to write this article because Fireworks’ advantages may not be immediately obvious to people who have never used it or have only used a minimal subset of its features. Later in this article, I’ll discuss some of Fireworks’ core strengths and features as well as highlight some specific work flow scenarios for which I believe it offers clear benefits over such heavyweight “competitors” as Photoshop. References to specific real world tasks are scattered throughout the text.
The third and, for me, the most important reason I wrote this article is that, in the aftermath of Adobe’s acquisition of Macromedia, many people were discussing the future of existing Macromedia products like Fireworks in blogs and public forums. The point here is not to discuss Fireworks’ future but, while reading many of those discussions, I had noticed a serious lack of understanding of what Fireworks really is and what it can do. This is still true today and it seriously bothers me. I wrote this article 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 several years. I have also used or am still using many of its competitors so I really know how well they compare from experience in the real world of Web design. This article is not about feature to feature comparisons but about the real life work flow benefits of Fireworks’ unique tool set.
I’ll start by defining what Fireworks is in general terms as well as where it stands in comparison to the other heavyweights in this very competitive market then I’ll move on to describing specific features and their usage. So let’s dive in!
What Exactly is Fireworks ?
The answer to this question might seem obvious to many but, as I stated in the introduction, there is a lot of confusion out there over what kind of graphic application Fireworks really is or what it can and cannot do. For some people, Fireworks is a direct competitor to ImageReady and is merely a tool for slicing, optimizing and exporting graphics from layouts created in other applications and imported into Fireworks. While those tasks are certainly an important part of what Fireworks does, they are but a very small subset of Fireworks’ wide array of creative features.
Other people often make the mistake of comparing Fireworks directly with Photoshop and criticize what they perceive as a lack of depth in its bitmap editing features. Let’s make it clear right away that Fireworks does not compete with Photoshop directly anymore than it is limited to the role of a glorified Web graphics slicing and optimizing tool such as ImageReady. Fireworks’ purpose is quite different from Photoshop’s and it is a far more feature-rich and powerful application than ImageReady. So, what makes it so unique?
Fireworks was designed from the ground up specifically for the task of creating Web site layouts and graphics in an efficient and flexible manner. It is a creative powerhouse that can really do it all, from the creative visual design stages to the slicing, optimization and export of finished Web graphics. With Fireworks there’s no need to switch between different applications to accomplish different tasks and its tool set is tailored to the needs of Web designers.
Fireworks does it all within a single interface that allies the power and flexibility of both vector and raster editing tools as well as the best slicing and optimization features in the industry. This kind of hybrid tool set is comparable only to a select few applications and Photoshop, Illustrator and ImageReady are definitely not amongst them. In that respect, Fireworks is much more than any of them on their own because it contains the kinds of tools found in all three of those applications.
Furthermore and contrary to what many believe, comparing Fireworks to Photoshop or ImageReady makes even less sense when you consider that Fireworks is primarily a vector application that is by nature a lot more similar to FreeHand or Illustrator. Fireworks’ core toolset and work flow is vector based, yet it offers very sophisticated bitmap editing features that can accomplish all but the most complex image manipulation tasks Web designers need to perform on a daily basis.
Fireworks’ hybrid vector-raster toolset is almost unique amongst graphic applications and, when you add it to its unrivalled slicing, optimizing and exporting features, you end up with a very powerful application that suits Web designer’s needs better than any other.
The next section was written for the benefit of designers who are not very familiar with vector applications and who’s graphic design software experience is limited to raster based applications like Photoshop or Paint Shop Pro. All the above discussion about Fireworks’ hybrid tool set won’t make much sense to you if you are not be familiar with vector applications such as Illustrator or Freehand (or Fireworks!) and how they work compared to raster based applications. Old hat designers who already know all of this can just skip to the next section…
A quick introduction to vectors and bitmaps
As you may already know, there are two basic types of graphics file formats and applications that create or edit them: vector editing applications and bitmap or raster editing applications. This is not intended to be an in depth study of this subject so I’ll go through these concepts very quickly without going in great detail.
Vector images are made up of “objects” whose properties like their shape, size, colour, location and more are defined mathematically. Vector images are usually qualified as “resolution independent”. This means that vector images can be resized to any dimension without any loss of quality and will print correctly at any size. When zoomed in close, vector images do not reveal any pixelization or loss of detail and objects’ edges remain crisp and clean.
Bitmap or raster images ont the other hand are comprised of pixels or square “dots” arranged in a grid-like manner. Each pixel in a raster image has a specific location on the grid and a single colour value assigned to it. The grid itself contains a finite amount of pixels. This means that, if a bitmap image is enlarged, the pixels in the original only get bigger and image quality degrades rapidly while the edges of elements in the image get pixelated. Making a bitmap image smaller is usually not a problem. Also, when zooming close to a bitmap images, you will clearly see the pixels that comprise it. Bitmap images usually display and print best at their natural size.
Most graphic editing applications create images that fall into either one of those two general categories but not both. Others applications are strongly focused on one type of work flow while offering tools of the other type in varying degrees of sophistication. There are very few products like Fireworks who are truly hybrid vector/raster applications that offer strong tool sets of both types.
Examples of purely raster based application include Photoshop, ImageReady and Paint Shop Pro. Both Photoshop and Paint Shop Pro do offer some level of vector features but those are “grafted” into their traditional raster work flow and do not offer the flexibility of working with true vector objects like Fireworks does. On the other side, typical examples of pure vector based applications include Illustrator, FreeHand and CorelDraw. While all of them can display and print bitmap images alongside their native vector objects, they have no tools for editing raw image pixels directly as you can in Fireworks or pure raster based applications like Photoshop.
Typical graphic design work flows often require working in one type of application then moving files into another to finish the job. This is an awkward process that can get frustrating as you try to keep different types of files updated as well as deal with potential rendering differences between applications. As I stated above, very few application integrate both vector and bitmap tools in one integrated environment that eliminates the need to go back and forth between more specialized programs. Example of such applications 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 discussing Fireworks’ core strengths.
Fireworks’ Core Strengths & Advantages
Integrated Work Flow
The primary advantage Fireworks has over its competition is one I have already talked about: vector and bitmap tools integration. With Fireworks you can seamlessly create and edit both bitmap images and vector objects with tools that are familiar to both kinds of work flows in one integrated environment. Fireworks is smart enough to switch between the two editing modes seamlessly depending on the tools you choose and the actions you make.
Furthermore, Fireworks “stores” both kinds of objects into only one kind of layers while, for example, Paint Shop Pro needs a special type of layer for vectors and Photoshop cannot work directly with vector objects at all. It simply uses vector paths to mask parts of regular bitmap layers.
By comparison, Fireworks is primarily a vector application and bitmap images are handled as objects until a bitmap selection is made or a bitmap tool is used. This is a concept foreign to people that are only used to working with pure raster applications like Photoshop but should make perfect sense to someone used to working in Illustrator or FreeHand.
But the integration concept doesn’t stop there. On top of its hybrid vector/bitmap tool set, Fireworks offers the best slicing, optimization and exporting tools in the industry in addition to powerful animation capabilities. This means that after you are done creating your graphics you can slice them directly on the same canvas where they were created and edited and then switch to the Preview pane to tweak export optimization settings and see how they will affect the exported graphics. You never have to deal with awkward “Save For Web” modal windows or need to open a separate application to create navigation button states and things of the sort.
In comparison, you would need all three of Illustrator, Photoshop and ImageReady in Adobe’s product line to do all that Fireworks can in one integrated environment.
Flexibility & Editability
The other main advantage Fireworks has over pure raster based applications is the flexibility and editability afforded by its vector tool set. Unfortunately, this one is probably the least obvious advantage for people who are only used to working with bitmap editing applications. This becomes very clear when you look at the number of posts on Fireworks related public forums from people asking how to perform tasks in Fireworks the same way they would do them in Photoshop for example. Very often, Fireworks offers tools or features that would make performing the same task easier or in a non-destructive manner. These people have often been using Fireworks for a while but remain unaware of the power of its vector tool set because they are so used to performing certain tasks with the far less efficient bitmap tools that are familiar to them.
A prime real life example of the above is the task of removing backgrounds around people or objects in pictures. In bitmap based applications, this task is traditionally done by using bitmap selection tools to select and delete the background around the parts of an image one wants to keep. This can be a frustrating and time consuming process that often relies on trial and error to get the right selection. Bitmap selections are also fickle and fleeting things unless one thinks of saving them (something which is not possible with many bitmap based image editing applications). Lastly, deleting the unwanted parts of an image is a destructive and irreversible action that cannot be undone once the file has been saved and closed and the undo history is gone.
In Fireworks, the same task was traditionally done by drawing a vector shape with the Pen tool around the part of the image you want to keep and using it as a mask. This method is better than the previous one primarily because it is a non-destructive approach that does not delete any pixels in the masked image and because the mask shape can be edited and tweaked at any time. The drawback with complex vector masks is that they can be difficult and time consuming to draw with the Pen, especially for people unfamiliar with the tool. On the other hand and unlike bitmap selections, vector paths used to mask objects won’t disappear between editing sessions and they can be tweaked more easily and with far more precision than bitmap marquee selections.
But now with the release of Fireworks 8, there is an even better way to “remove” backgrounds from certain kinds of images using masks because creating the vector mask shapes has become easier than ever with the addition of the new “Marquee to Path” conversion feature. You can now use a mixture of “traditional” bitmap selection tools like the Magic Wand to select plain backgrounds and quickly convert an inverted version of that selection to a vector path that closely follows the masked object’s contour. You still end up with an editable vector mask shape but in a lot less time than if you had to draw it manually and it will probably fit the object’s contour more closely. You can check out my “Removing Image Backgrounds with Fireworks 8” tutorial for detailed steps in how to perform this kind of task.
Live Effects
The next Fireworks core strengths I want to discuss is object level Live Effects. In Fireworks you can apply live, non-destructive effects such as blurs, shadows and colour adjustments both at the layer level (as in Photoshop) as well as to individual objects. Furthermore, you are not limited to the effects than come with Fireworks. You can use a number of third-party plugins that work as live effects on both vector and bitmap objects including well known ones like Extensis EyeCandy and Intellihance Pro and many others. Some plugins like Flaming Pear’s SuperBladePro will only work on bitmap objects but are also usable as live effects. On the other hand, some plugins might yield unexpected results when they are used on whole image objects instead of regular bitmap selections.
In any case, being able to use third party plugins as Live Effects is a clear advantage over Photoshop Layer Styles which are limited to the same kind of basic effects found in Fireworks’ Live Effects list (shadows, glows, etc). In Photoshop, all the more sophisticated effects offered by plugins can only be applied to images through the Filters menu and the changes they make are permanent ones, meaning that their parameters cannot be edited at a later time. The effects need to be reapplied to a fresh copy of the graphic if any changes need to be made. Fireworks also has several filters whose effects are permanent but the many third-party plugins that can work as live effects give it unparallelled flexibility.
Precision
For me this is one of Fireworks’ key advantages over pure raster based applications. Since Fireworks is vector based, you can select any object and be able to immediately read and set its size and location from either the Properties Inspector or the Info Panel. Also, whether you have a bitmap or a vector object selected, Fireworks “highlights” either its bounding box or the path itself so you are always aware of what exactly you have selected. This kind of precision and flexibility is absolutely essential for me when doing layout work.
Furthermore, with the release of Fireworks 8, Macromedia introduced a new panel called the AutoShapes Properties panel that gives user precise numerical controls over a range of properties for the most used AutoShape objects. For example, it is now possible to control the roundness of individual corners for rectangles created with the rectangle AutoShape.
Raster based applications like Photoshop do not offer this kind of immediate and precise numerical feedback. You have to look at the Layers Palette to find out what “image” or part of an image you are currently working on and there’s no way to know the precise location or size of any individual graphical element in your layout. If you draw a rectangle and its corners do not have the correct roundness, you have to delete it and start from scratch instead of simply editing an object property numerically. You have to have endured the tedium of “eyeballing” elements alignment or sizing in a pure raster application like Photoshop to appreciate just how easy, precise and fast this kind of basic tasks are done in Fireworks. Working in a vector based application removes all this awkward guesswork from your work flow and leaves you free to create with abandon knowing that you can edit anything easily later on.
Pixel Accurate Rendering
When you work in Fireworks creating objects and editing images, the program renders your graphic to a pixel grid set at the typical Web graphics resolution of 72 ppi (pixels per inch). This means that even vector objects which are usually resolution independent will be rendered to that pixel grid. People used to the resolution independent display of full fledged vector application like Illustrator and FreeHand may see this as a limitation in Fireworks, but it’s actually an asset.
Having Fireworks render your graphics at the final resolution they’ll be exported to enables you to fine tune things like the anti-aliasing of elements’ edges. This is possible because, internally, Fireworks can position elements on a much finer grid than the whole pixel grid it uses for rendering. This empowers you to really fine tune how your text will look for example. You can tweak anti-aliasing settings as well as text size and kerning values and accurately 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 tweaking the various settings that can affect how text in rendered in your final graphics.
This should also be possible for any other kind of object natively but, unfortunately, Fireworks’ native tools do not permit users to move and position elements on the canvas by values smaller than whole pixels. This is a very strange oversight in Fireworks’ tool set (especially since Flash has had this functionality for years) but luckily, some smart people have provided a solution in the form of a free Fireworks extension which enables you to move objects by fractions of whole pixels. This is a prime example of where Fireworks’ extensibility comes to the rescue (extensibility is discussed in the next section). The extension in question is call SuperNudge and was created by the smart people at Phireworx. It can be downloaded for free here.
A discussion 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 article but look for a forthcoming pixel forge article on how to master anti-aliasing using tools like SuperNudge in the future.
Extensibility
This is another one of Fireworks main strengths. Although extensibility is not exclusive to Fireworks, it has the advantage of having one of the richest APIs of any scriptable graphic application as well as the ability to use special panels created in Flash so that extensions developers can create sophisticated graphical interfaces for their extensions (the SuperNudge command discussed above is an example of such an extension).
Fireworks has a small but dedicated and very innovative community of extension developers that have created literally hundreds of extensions to augment Fireworks’ already extensive creative toolset. I use several of them regularly and I will also be dedicating a future article to this subject alone.
High Quality Output & Efficient Optimization Work Flow
All the creative tools in the world would be rather useless if the application that uses them didn’t output quality images. Fortunately, Fireworks has been created from the ground up as a Web graphics creation application so it’s not surprising that it optimizes and exports the smallest, best looking Web optimized files of any graphic application. In mine and many other people’s experience, Fireworks consistently exports better quality images at smaller file sizes than any of its competitors. Try it for yourself and you’ll be amazed at the results.
In Fireworks, you can tweak and preview optimization settings right within the application’s interface without the need to go to an annoying modal “Save For Web” window. Furthermore, the Fireworks Preview pane lets you visualize any interactivity you added to slices (like rollovers, navbars, etc) without the need to test in a browser.
Conclusion
Hopefully, this article has helped you understand what kind of application Fireworks really is and how it is uniquely designed to help in the creation, optimization and maintenance of Web graphics and images. There is a lot of misinformation about Fireworks’ true nature and abilities out there and, with this article, I wanted to counteract some of it by providing clear explanations and examples from someone who has been using it in the trenches for years (I started using Fireworks with version 2).
I really hope that the information I provided here will help those who have not yet decided on a graphic application see how Fireworks can help them. I also hope that long time users who may have only used a subset of its features will now see it in a new light. In any case, writing it has given me a new appreciation for the program I ditched Photoshop for years ago and with which I’ve had so much fun playing… I mean, designing Web sites ;-). It has provided me with the kind of flexible precision tools I need to create site design the way I like them quickly and painlessly. Fireworks lets me use my creativity without getting in my way and lets me make mistakes I can fix easily because, as the early Fireworks slogan said: “everything remains editable all the time”.
Have fun with Fireworks!