Menu Search
Jump to the content X

The Power of Adobe Fireworks: What Can You Achieve With It?


Our recent article covering the new features of Adobe Fireworks CS51 provoked a very interesting and intense debate. But because comments ranged from “Fireworks is the best tool for screen design!” to “What exactly is Fireworks?”, we thought that another article on this topic might be very useful to Smashing Magazine readers.

However, this time the article will not focus so much on the tool itself, but rather on what can be achieved with it, and more specifically — what can be achieved with its visual/graphic design capabilities. We also hope that the following showcase of inspiring illustrations, created entirely in Fireworks, will not only be interesting to our readers, but will also help put an end to the common misconception that Fireworks is mostly a prototyping tool – and – that for “serious” design you must switch to other tools, namely Photoshop or Illustrator.

…What Exactly Is Fireworks? Link

Finding the answer to this question is not so easy. Is it a prototyping or wireframing tool? Or is it a powerful graphics editor? Is it a Photoshop competitor, but for Web design only? Is it none of these, or all of the above?

Fireworks CS52

Perhaps presenting you with a quick overview of some of the key features of Fireworks will help you decide the answer to that question yourself.

What is it? Link

Fireworks is a bitmap and vector graphics editor formerly developed by Macromedia and since 2006 developed by Adobe. The main purpose of Adobe Fireworks is for creating expressive, highly optimized graphics for Web, screen and various devices (it should be noted that because of its main purpose, Fireworks has certain limitations: it supports only RGB/RGBa colors and the maximum canvas size of its files is approximately 10,000×10,000 pixels).

What is it good for? Link

With Fireworks you can make websites, user interfaces and rich Internet application (RIA) interfaces which are editable in both vector and bitmap modes. Fireworks has Pages/Master Pages, Layers, States and Symbols – all features that considerably speed up development of Web designs. You can also use it to create wireframes and interactive prototypes — you can apply behaviors to objects to simulate interactivity; you can add text, symbols, images and also import Illustrator and Photoshop assets; and once ready with the design you can export the files as clickable PDF mock-ups for approval.

Fireworks can turn a graphic design project instantly into an interactive Web prototype — simply export a Fireworks single-page or multi-page PNG file as HTML, CSS and images3. You can then send such an interactive prototype to a client for approval; or you can further edit the exported code (which is almost standards compliant4 and uses an external style sheet) in Dreamweaver, Coda or any other code editor of your choice.

Export features Link

Fireworks can export to JPG, GIF/GIF-animated, PNG8/24/32, TIFF and a variety of other graphic formats. The Fireworks compression algorithms are on par with, or even better5 than, Photoshop’s. Not only this but Fireworks can also export graphics directly to PNG8 alpha+index transparency format with true cross-browser compatibility (this means the exported PNG files will display correctly even in Internet Explorer 6 and 7). This is one of the areas where Fireworks excels and Photoshop still lags behind6. Fireworks also shows excellent compression options for the iPad and iPhone7 PNG formats.

You can also export Fireworks PNG files as Adobe AIR application prototypes or FXG 2.0 files for development in Flash Catalyst and Flash Builder (FXG 2.0 also allows a much better integration with Illustrator and Photoshop). You can create skin components such as buttons, menu types and form elements for use in Flash Builder (previously known as Adobe Flex Builder).

Formats support Link

Because the native file format of Fireworks is editable PNG (it simply stores additional metadata for layers, animation, vector data, text, effects) and Fireworks is primarily a vector application, development for the iPhone8 is easy and effective in Fireworks. There exist a variety9 of toolkits10 and rich symbol libraries11 for Fireworks iPhone development and they can speed up your work measurably.

Fireworks can open/import native Photoshop (.psd) and Illustrator (.ai) files with high fidelity of layers, effects and blend modes; you can also import native Adobe Flash vector objects (you may first need to convert them to .ai, though). And from Fireworks you can readily transfer graphic assets back to Illustrator and Photoshop. You can also take your design into Adobe Flash Professional and preserve layer states and symbols for animation interactivity development.

Highly extensible Link

Fireworks is also highly extensible12 — this makes possible the developing of amazing extensions (such as TweetFire13, which lets you instantly tweet the image/design you’re currently working on without leaving Fireworks), complex panels, commands and auto shapes.

The Showcase Of Fireworks Illustrations Link

So now that we know what Fireworks is capable of, let’s see what designers across the globe are actually doing with it!

The following selection of vector illustrations, logo and icon designs – created in Fireworks – is limited to 19 designers. To make the most of this article, we have made available some Fireworks editable PNG files (.fw.png) which you are welcome to download and deconstruct.

1. David Hogue Link

Dave Hogue14 is the Director of Information Design & Usability at Fluid15, a design and development agency located in San Francisco. His areas of interest include user experience design, usability, interaction design and information design. Dave speaks regularly at the Web Experience Forum and Adobe MAX. He is very active in the Adobe Fireworks community and he regularly posts useful Fireworks tips and tricks on his Twitter16 account.

{01} Golden Compass illustration Link

Golden Compass illustration17

Created in Fireworks CS4, all vectors, and inspired by this tutorial18 made for Adobe Illustrator (download editable PNG19).

{02} Quartz Watches illustration Link

Quartz watches illustration20

Created in Fireworks CS5, all vectors, and inspired by a photo of a real quartz watch21 (download editable PNG22).

2. Matthew Inman Link

Matthew is a designer and illustrator who runs the highly successful comics, The Oatmeal23. He lives in Seattle, Washington, and uses Adobe Fireworks to draw all the comic strips24 (

Fireworks is intended for web design, but it’s also a very capable vector editing tool and it works beautifully if your work is going to end up on a website. …I don’t use Photoshop and I’m actually pretty terrible with it. I also have Illustrator and I was using it for a few months, but I ended up going back to Fireworks simply because I’m more comfortable with it and it’s better for creating web content.

Following here is a very short selection of only 5 comic strips — all made with Fireworks (but of course you’re welcome to explore the full Oatmeal collection26):

{03} 15 Things Worth Knowing About Coffee Link

The Oatmeal comic strip27

{04} 20 Things Worth Knowing About Beer Link

The Oatmeal comic strip28

{05} How a Web Design Goes Straight to Hell Link

The Oatmeal comic strip29

{06} Why working at home is both awesome and horrible Link

The Oatmeal comic strip30

{07} Duck in Coffee illustration Link

Coffee and Duck illustration (Fireworks)31

Matthew does not use Fireworks only for drawing his comic strips — for example, see this beautiful “There’s a duck in my coffee” vector illustration32, created entirely in Fireworks (see screenshot33 from the process). Check Matthew’s portfolio34 if you’d like to see more of his works.

3. Ryan Hicks Link

Did you ever wonder what happens behind the closed doors of Adobe? How their design teams are working? What applications are creating the icons and splash screens of the various Adobe apps? Ryan could tell us a lot about this subject, since he’s currently working at Adobe as Design Manager, and prior to that he was Senior Experience Designer at Adobe and Experience Designer at Macromedia. His list of clients also include Polygram Music, Wired Magazine35 and many others (see Ryan’s portfolio36).

Let’s take a look at some of his design and illustration work.

{08} XD Brownbag Poster series Link

Ryan Hicks illustration (Fireworks) width=37

After posting it to the Adobe Developer Connection | Fireworks38 website, Ryan shared the following about this illustration:

This illustration is just one example of a series from the XD Brownbag seminars at Adobe (XD is the Experience Design team at Adobe). The poster art is drawn up at screen resolution and later scaled, because this enables me to build up the shapes more quickly and get into the “drawing light,” which is where the real magic of Fireworks comes in. Its incredibly intuitive gradient opacity controls and the Ellipse gradient’s multi-handle directional controls allow a drawing approach that mimics the real behavior of light. Solid objects have a primary base color and separate slices of cast light, bright highlights, and shadows to build up volume and surface.

After the illustration is completed, it is scaled up to print resolution in Fireworks (eat a snack during this process, as big resolutions is one thing Fireworks isn’t entirely happy with). This large Fireworks PNG illustration is then taken through Adobe Photoshop to output a transparent PSD, and finally into Adobe Illustrator for layout, typography, and output for the final, print-resolution 24″ x 36″ poster.

Download the Fireworks PNG file3940.

{09} XD Lunchbox poster Link

Ryan Hicks illustration (Fireworks) width=41

{10} XD Beet poster Link

Ryan Hicks illustration (Fireworks) width=42

{11} XD Mackerel poster Link

Ryan Hicks illustration (Fireworks) width=43

{12} XD Salad poster Link

Ryan Hicks illustration (Fireworks) width=44

{13} XD Brownbag poster Link

Ryan Hicks illustration (Fireworks) width=45

4. Rogie King Link

Rogie King is the guy behind Komodo Media46. He is a web designer, illustrator and blogger. Lately Rogie started a series of tutorials on Fireworks47 that are becoming more and more popular every day.

{14} personal site illustrations Link

Rogie King redesign illustration48

Composed entirely of vector artwork in Fireworks, this is a piece of art for the new and upcoming tumblog for rogieking.com49.

{15} Logo for Link

Rainboxx logo (1)50

Rainboxx logo (2)51

Rainboxx logo (3)52

Created for Matthias Dietrich for his PHP development shop, Rainboxx53, this logo was created entirely in Fireworks as vectors. Matthias wanted an evolution to his brand and a professional 3D icon evolution of his current Rainboxx identity. You can view more info about the process54, the related dribbble shot55, and you can learn more about the particularly interesting brushed metal effect in this video tutorial56.

{16} Mad Mimi Illustrations Link

Mad Mimi illustration (1)57

Mad Mimi illustration (2)58

Mad Mimi (animated) illustration (3)59

These are just a couple of illustrations from a series created for the redesign of Mad Mimi60. The illustrations are composed entirely of vectors with the additional use of Fireworks symbols for repeating shapes (such as the boxes).

{17} Adaptive UI icons Link

Adeptive UI icons61

A custom icon set designed entirely in Fireworks for andCulture62 who wanted an icon set that was smooth, silky and that fit in with the aesthetic of their Flex web application (see a screenshot from the work in progress63).

5. Xiao Cai Link

Xiao currently lives and works in Melbourne, Australia. He’s currently building his portfolio and preparing for the RMIT University64. He does not have a personal website but you can check his profile in deviantart65 where he posts some of his works.

Xiao shared with me a bit more details concerning his very interesting technique, which he uses in Adobe Fireworks:

During my free time, I looked through a lot of online tutorials on the use of software like Fireworks, Photoshop and 3DS Max. It is quite amazing that you can learn pretty much anything yourself as long as you put theory and practice together. At the beginning, I created a few simple wallpapers using Fireworks, to get familiar with its tools and options. Then I read an article about creating Chinese painting-like pictures in Adobe Fireworks. I tried a few times and then came up with a style of my own, something like Digital Chinese Painting, and was quite happy with the results. Since then I went deeper and deeper with Gongbi (a meticulously detailed painting style) and Shuimo (a water color style) paintings and re-created them with Fireworks. I was trying different tools and effects to get the right one, then compared these pictures with real Chinese painting reference photos and modified them, until I was satisfied with the end result.

Sometimes, I am also using Fireworks to create icons and other design elements.

Next, you’ll see four of Xiao’s digital drwaings, each one has a short description added by the author.

{18} DCP2 Fireworks illustration Link

Chinese painting style in Adobe Fireworks66

“My first complete painting by using Fireworks. I did everything piece by piece, from background to stamen, with the pen tool, then adjusted the colors and effects. Not really a technical one, but did take me a lot of time. This painting is also featured in “2 Faces Apart”, Vol.1, published by King Ink (ISBN: 978-91-85807-05-5).”

{19} DCP3 Fireworks illustration Link

Chinese painting style in Adobe Fireworks67

“Created in Fireworks, in a bit different style. And with the experience from the previous one, it was finished easily.”

{20} DCP4 Fireworks illustration Link

Chinese painting style in Adobe Fireworks68

Chinese painting style in Adobe Fireworks69

Chinese painting style in Adobe Fireworks70

“Here I tried to focus on the flower, and at the same time combine two different styles together (Gongbi and Shuimo). However, I think I still need to work on the composition.”

{21} DCP8 Fireworks illustration Link

Chinese painting style in Adobe Fireworks71

“One more illustration in the same style; it also has a night72 version.”

6. Jon Hicks Link

Jon Hicks (, @hicksdesign74) is a designer we need not introduce. Among other things, he is the maker of the Firefox, Thunderbird & Mailchimp logos and lately he was Senior Designer at Opera Software75, before returning to freelance work this year.

Firefox logo (Fireworks version)76

Firefox logo77

The logo of Mozilla Firefox, one of the leading modern Web browsers, was originally created in Macromedia Fireworks78 in 2004. (Note: Later Jon Hicks re-created79 the logo also in Adobe Illustrator, so that it could be transferred to print more easily).

Currently, Jon Hicks admits that he both loves and hates Fireworks80, one of the reasons for which was apparently Fireworks version CS4, which initially proved to be very unstable on MacOS X and Adobe were quite slow to release two stability patches81 for it.

When I e-mailed Jon a couple of days ago, he was kind enough to share the following with me:

Apart from the first version of the Mozilla Firefox logo, I do all my illustrations in Adobe Illustrator, rather than Adobe Fireworks. I would often use Fireworks for small icons and mocking up site designs, but anything larger and more complicated would be done in Illustrator. The next higher res [resolution] version of the Firefox logo was created in Illustrator — that’s not to say it’s impossible in Fireworks, but I find Illustrator easier for that kind of thing, and it’s then simple to create high res CMYK versions for print, as well as screen.

7. Fabio Sasso Link

Fabio82 is a graphic and web designer from Porto Alegre, Brazil. He’s the founder of Abduzeedo83, a blog about design, and he and other designers have published there many tutorials on Fireworks84. Fabio acknowledges that Fireworks is his favorite and most versatile tool for Web design with its amazing vector capabilities and good bitmap editing options as well.

{23} Apple Air banner Link

Apple Air banner (Fireworks illustration)85

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks86.

{24} Light Effects illustration Link

Light effects illustration (Fireworks illustration)87

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks88.

{25} The Abduzeetles Rockband website design Link

The Abduzeetles Rockband website design (Fireworks illustration)89

Hilarious — this tutorial90 will teach you how to create a colorful and funny website design for the Abduzeetles Rockband — all with the power of Fireworks vectors! ;)

8. Lucian Dragomir Link

Lucian Dragomir from 2313 Studio91 is a 20-year-old freelance branding and web designer who is currently studying art and visual technology in Virginia. Graphic design is his passion and Fireworks is what feeds his hunger for design. He likes Fireworks for its user-friendly interface and advanced vector engine which, combined, create good results for fast prototyping, Web design and occasionally even print.

Lucian also loves to share his work at deviantart92.

{26} Vectorizer illustration Link

Vectorizer illustration93

This is an illustration that won first prize at the 2009 Fireworks Wallpaper Contest, organized by Adobe94 and FwZone95. It was created in Fireworks CS4 and is 100% vector work. To see the full complexity of this illustration, you can download the Fireworks PNG96 file.

{27} Anger Management illustration Link

Anger Management illustration97

Experimental 3D render of a fire extinguisher and a lighter using only vectors (Fireworks 8).

{28} iCry illustration Link

iCry illustration98

Experimental characters and lighting/shadow/reflection simulation, 100% vector work in Adobe Fireworks.

{29} TakeOFF illustration Link

TakeOff illustration99

Created in Fireworks 8 with the help of the Alien Skin Splat plugin.

9. Fred Michel Link

Fred Michel100 is 30 years old and a freelance graphic and web designer, currently living in Montréal, Canada. He first made his way into the graphic design world through being inspired by Fireworks. An interesting fact is that he is color blind. So how does he manage to put the colors together? He says that this is a secret!

{30} Porsche Carrera illustration Link

Porsche Carrera illustration101

Originally created in Fireworks in 2004 and is all vector work (download Fireworks PNG102).

{31} Cadillac illustration Link

Cadillac illustration103

Created in Fireworks, all vector work (download Fireworks PNG104).

{32} Mercedes SLA concept car illustration Link

Mercedes SLA illustration105

Mercedes SLA concept car — originally created in 2005 in Fireworks, all vector work (editable PNG is available for download106). A curious fact is that the concept of the Mercedes SLA car is as old as the year 2000, however, Mercedes did not yet create such a car107 — it only remains a concept till now.

{33} VW Tiguan illustration Link

VW Tiguan illustration108

Created in Fireworks CS3, in 2010, and is all vector work (you may download the editable PNG109). One of Fred’s most complex vector illustrations made in Fireworks.

10. Mikko Vartio Link

Mikko Vartio110 is a visual web designer from Helsinki, Finland. He uses Adobe Fireworks as a primary tool for creating websites, illustrations, for UI Design and wireframing. When he’s not working with Fireworks he’s reading old sci-fi books and cruising the streets with a longboard.

For Mikko, Fireworks is the perfect tool for delivering ideas destined for screen because of its extensibility, native .ai/.psd support and pixel-perfect accuracy. Mikko can be found on Twitter111 and Flickr112 (where he often posts Fireworks illustrations).

{34} Bears illustration Link

Bears illustration113

{35} Sealife illustration Link

Sealife illustration114

{36} Longboard illustration Link

Longboard illustration115

{37} Surprise illustration Link

Surprise Fireworks illustration116

{38} Darth Android illustration Link

Darth Android illustration117

Made in Fireworks CS5 in less than an hour, this funny Darth Vader + Google Android mashup118 can be also seen as a live design session119 recorded at 5x speed. Worth watching!

{39} Magic Mushroom illustration Link

Magic Mushrooms illustration120

All 100% Fireworks vector work — the original Fireworks PNG file will be available for download as a freebie later at Mikko’s personal blog121.

11. Angelo Sabal Link

Angelo Sabal122 works and lives in the Philippines. He’s been an avid freelance graphic designer since 2002, specializing in logos, layouts, digital art and multimedia presentations. Fireworks is his design tool of choice.

{40} Colt gun illustration Link

Colt illustration123

Created in Fireworks CS4, all vectors (download editable PNG124).

{41} Candle illustration Link

Candle illustration125

Created in Fireworks CS3, all vectors (download editable PNG126).

{42} Dragon shield illustration Link

Dragon shield illustration127

Created in Fireworks CS4, all vectors (download editable PNG128)

{43} Iron Man 2 helmet illustration Link

Iron Man 2 illustration129

Created in Fireworks CS5, all vectors (download editable PNG130).

12. Craig Erskine Link

Craig Erskine131 was born, and is still working, in Green Bay, Wisconsin. He has a passion for designing and building standards compliant, stylish and accessible websites.

Craig is using Fireworks on a daily basis132 and has also published quite a lot of Fireworks tutorials133. You may find him on dribbbble134 and Twitter135.

{44} Mac Mini illustration Link

Mac Mini illustration136

Created in Fireworks CS4, all vectors (download editable PNG137).

{45} Apple remotes illustration Link

Apple remotes illustration138

Created in Fireworks CS4, all vectors (download editable PNG139).

13. Pete Lacey Link

Pete Lacey140 is an English graphic designer and artist based in Copenhagen, Denmark. He’s working in the field of graphic design, illustration, photography, video editing, motion-graphics, web development, art direction and even audio recording. When it comes to Web design, Fireworks is one of his programs of choice.

When not working with a computer, Pete can often be found behind a drum kit or a guitar instead. And on Twitter141, too.

{46} Fireworks icons Link

Fireworks icons142

Created in Fireworks for a client, 100% vector work.

14. David Brooks Link

David143 is a UX designer at Fellowship Technologies144 and also a photographer. He currently lives and works in Dallas, Texas (USA). You can find him on dribbble145 and Twitter146.

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration Link

Camera-Phone illustration147

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration Link

Northward Compass website illustration148

Everything (except the map, which is an imported bitmap), is done as vectors in Fireworks.

15. Tomas Gajar Link

Tomas Gajar is a senior user interface designer. He has been using Fireworks in his daily work for about 7+ years. All designs that you’ll see in his DigitalLabs Portfolio149 has been made in Fireworks. You can also find Tomas on Twitter150 and SofaSurfer151.

{49} DigitalLabs website design Link

DigitalLabs website design (Fireworks illustration)152

{50} Beck’s design concept Link

Becks design concept (Fireworks illustration)153

{51} SofaSurfer website design Link

SofaSurfer website design (Fireworks illustration)154

16. Vincent Tremblay Link

Vincent Tremblay155 is currently studying computer programming at Bois-de-Boulogne College in Montreal, Canada. He spends most of his free time coding desktop applications, but he also loves working with his favorite web design software, Adobe Fireworks. Vincent can also be found at deviantart156.

Neos Carbon 2 logo (Fireworks illustration)157

Created in Fireworks CS5, all vectors.

iCompanion (Fireworks illustration)158

Created in Fireworks CS5, all vectors.

17. José Rivera Link

José is a very active member of the FireworksGuru forum159 and he also runs a personal blog160 dedicated to Fireworks. You can also check his deviantart161 profile.

{54} Twitter icons Link

Twitter icon #1 (Fireworks illustration)162

Twitter icon #2 (Fireworks illustration)163

Twitter icons, all re-created in Fireworks vectors.

{55} The iPhone, in Fireworks PNG (.fw.png) format Link

The iPhone in Fireworks PNG vectors (Fireworks illustration)164

The idea to fully vectorize the iPhone is not new — for example, you may check this excellent tutorial165 on how to create the iPhone frame in Adobe Fireworks.

However, José Rivera went one step further and offered the iPhone in Fireworks full vector format166 for free download (download iPhone in editable PNG format167). It should be fully compatible with Fireworks versions CS4/CS5 (and even lower).

18. Nick Isenberg Link

Nick is a Web and graphic designer who lives and works in Boise, Idaho (USA). You may check his portfolio168 and deviantart profile169, where he publishes some of his illustrations made with Fireworks.

{56} Spiral Notebooks illustration Link

Spiral notebooks (Fireworks illustration)170

Created in Fireworks CS3, all vector work (download the Fireworks PNG171).

{57} Le Petit Porcelet illustration Link

Le petit porcelet (Fireworks illustration)172

Created in Fireworks CS3, all vector work (download the Fireworks PNG173).

{58} Safari Dock icon Link

Safari dock icon (Fireworks illustration)174

Created in Fireworks CS3, almost 100% vector work (download the Fireworks PNG175).

19. Adobe CS5 Branding Link

Next you’ll see more details about the whole Adobe CS5 branding, which — it shouldn’t be actually a surprise — was not made in Photoshop, but mainly in Fireworks.

{59} The Adobe CS5 branding Link

Adobe CS5 branding - made possible with the help of Fireworks176

{60} The Adobe CS5 branding — the icons Link

Adobe CS5 branding - made possible with the help of Fireworks177

{61} The Adobe CS5 branding — the splash screens Link

Adobe CS5 branding (the splash screens - all made with Adobe Fireworks)178

The Adobe CS5 Branding work was conceived and executed by Ryan Hicks (lead), Shawn Cheris and Dave Nelson. There’s a very interesting article at Veerle Pieters’s blog179 dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts180 on the matter too:

Producing assets for nearly a hundred separate software products takes enormous discipline. Discipline in what a few people can commit to executing in terms of fancy design, and discipline in coordinating and scheduling a hundred separate engineering development cycles and their deadlines. And to keep things interesting, Dave bails just before our production schedule was set to kick off. Shawn and I are now an army of two.

Our survival was dependent on the carefully-hewn master files we created for all the hand-built primary assets such as app icons and splash screens. The files leveraged clever layer structures and the attributes management Adobe Fireworks does best.

We have become, in so many words, an outrageously efficient icon factory, pumped up on caffeine, razor sharp pixels, and a couple AIR apps.

CS5 is my third iteration of Adobe’s product identity system. The project was one of the most enjoyable and satisfying I’ve had in my nearly seven years of working at Macromedia/Adobe.

All splash screens and many of the icons of the CS5 apps were made in Fireworks — and most of them exist in various formats including .fw.png and .ai.

So, how good is Fireworks for Web design? Link

Fireworks is a solid application for creating Web graphics and as John Nack181 from Adobe Photoshop team says: “Photoshop’s vector shapes & layer effects (strokes, gradients, etc.) are mainstays of Web & mobile design work, but they haven’t gotten updated in a while. If the Photoshop team were to improve this area of the app, what improvements would you find the most important?”

John then lists all features that could probably be added to the next version of Photoshop (CS6?). Let’s take a look at his list — I have marked the features that are proposed to be included in the next version of Photoshop but already exist in Adobe Fireworks182 (version CS5 or even lower) in italics.

  1. Enable “real” vector shapes (stroke & fill directly editable, without reliance on layer effects or a dialog box).
  2. Support dashed— and dotted—line strokes.
  3. Enable smart shapes — preserve corner roundness when scaling rounded rectangles; support other parameterized shapes (e.g. stars with an adjustable number of points; lines with arrowheads).
  4. Make various layer effects enhancements — apply effects at the layer group level?; re-order effects; duplicate effects (e.g. apply multiple strokes per layer); enable panel-based editing of effects (instead of relying on a dialog box); add/edit effects on multiple selected layers at once; make graphical styles “live” (i.e. if edit the style definition, all styled objects update).
  5. Enable layer search (i.e. type to filter by layer name or attributes).
  6. Improve snap-to-pixel behavior.
  7. Improve text rendering (this is possible in Fireworks with the ClearType Styles183 extension).
  8. Export text & graphical styles as CSS* (this is already partially possible in Fireworks – it can export a Web graphic design as HTML/CSS code and also can quickly “translate” some objects’ properties into CSS via extensions such as “Copy CSS Dimensions to Clipboard”).
  9. Support guide sets (e.g. for grid layouts).
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs).

As can be seen, almost all future features for Photoshop proposed by John Nack are actually existing features in Fireworks and are used by many designers today. It’ll be certainly interesting to keep tabs on how Adobe develops both Photoshop and Fireworks in the future – and what designers will then achieve.

Conclusion Link

Adobe Fireworks is a powerful graphic design application that is used by many professional Web and graphic designers, UX designers, illustrators and visual artists. In the right hands, it can produce beautiful results with remarkable speed. You have seen some complex vector designs, various drawing techniques, logos and icons and simply cool illustrations.

Perhaps what is the nicest thing about Fireworks is that if you plan to create artwork in Fireworks, your project development is not limited to Fireworks only. You can easily import multi-layered .psd files, .ai files with multiple artboards and even visual assets from Flash. And then in the other direction, from Fireworks, you can transfer graphic assets to Photoshop, Illustrator, Flash Professional and Flash Catalyst. You can combine the Fireworks speed, vector power, Pages/Master Pages, Symbols and ease-of-use together with the options of both Photoshop and Illustrator and achieve all-round results, faster and with great flexibility.

In my personal opinion, there exists much more than 7 reasons to prefer Fireworks to Photoshop184. While Fireworks may be not better than Photoshop185, when it comes to designing for the Web and screen, it is faster, easier and can produce results as good as those that can be achieved in Photoshop, Illustrator, and other modern graphic design programs. Fireworks is very close to the real Web design application186 that Jason Santa Maria was discussing not long ago (although for this to happen, Fireworks would need much more intensive development from the part of Adobe).

{62} Adobe Photoshop CS5 splash screen Link

Adobe CS5 branding (the splash screens - all made with Adobe Fireworks)187

And there you have our final illustration. Next time you start Photoshop CS5, you may ponder that the “blue fish” splash screen you see was actually created in Fireworks — the lightweight, versatile design application that is responsible for most of the artwork across the Adobe CS5 suite.

If you think that I may have missed someone’s truly great (Fireworks) work, please let us know in the comments, thanks!

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190

↑ Back to top Tweet itShare on Facebook

Michel is a freelance web designer, illustrator and photographer. He also happens to work as editor at Smashing Magazine and is very passionate about Fireworks, HTML/CSS, Web Standards and the smell of good coffee. When not designing websites or editing articles, he can often be found reading about design, riding his bicycle or simply looking at the clouds in the sky. Want to know more? You can check his personal blog or Twitter. :)

  1. 1

    I always used Photoshop, Dreamweaver, Illustrator & Flash. I never used Fireworks. Now am going to try Fireworks. Logos are very nice. :)

  2. 2

    Good article, but I disagree – Photoshop is far superior.

    • 3

      Darren, did you read the article and look at the provided examples, before drawing the conclusion “Photoshop is far superior”? :)

      Photoshop is an excellent tool, I agree, but Fireworks is also an excellent tool. Fireworks works mostly with vector tools (which means, much better scalability), it has Pages and Master Pages, it has Auto Shapes (and they are extendable, too), it has 9-slice scaling tool (which greatly helps when building interfaces and Web designs), it can export to PNG8+alpha/index (and Photoshop still cannot, even as of version CS5); overall, all of these features and many more, make Fireworks a far better choice for Web designers.

      It’s a matter of preference — to use Photoshop or Fireworks (or even Illustrator) for Web/screen design. I am just trying to show that Fireworks can not only save you time and effort, but, at the same time, deliver high-quality, pixel-perfect graphics for your project. And it can also “play” well with Ps, Ai, Flash and Flash Catalyst!

      • 4

        Woah! Just one slight point to ‘blemish’ the credibility of Michel Bozgounov’s article… on his website, and in the portfolio section you can quite clearly see his list of clients includes ‘Adobe Fireworks’.

        Case rested, this is a PR article raising the profile of the product – however you may feel about FW v PS this guy is just trying to increase exposure.

        ps. did you use the ‘mighty’ Fireworks to draw that airplane? If so, i’ll stick with PS cheers ;)

        • 5

          If this is true then it would be ethical and well appreciated for the author to post a ‘disclosure’ on this article.

        • 6

          Clearly the author has written this to enhance his reputation with his client – even so I have to say that this article just seems to be “this was done in fireworks” and “that was done in fireworks”. If there was an article to be written that was about the pro’s of Photoshop when building a website it would far outweigh the pro’s of using Fireworks.

          If you can’t afford a proper wireframing package like Omnigraffle then sure, go ahead with Fireworks – and perhaps the odd file export – but in my opinion it is essentially a tool that allows quick ‘mock ups’ as apposed to finished showpieces.

          Ps. Very funny comment about the plane graphic – very much an example of something being ‘quick and simple’ as above

          • 7

            Not true. And btw Omnigraffle is not what I would call a proper tool for prototyping. Aproper tool would be Axure.. as Fireworks is the tool for digital design. Check some of the artworks people is doing with it around the internet… and learn why it is such a good tool. Then you wont be saying such things.

        • 8


          Next time you say “Photoshop is better!” I will say “This is clearly a PR statement! Probably Adobe paid you to say that!” — because, you know, Adobe owns Photoshop, too…

          Case rested! ;-)

        • 9

          Dear Darren, I hope someone from Adobe is reading these accusations – perhaps they will decide to pay Michel for all the efforts and dedication that he is showing to this piece of software for so many years now… I know one thing for sure – nobody can pay you to love a piece of software and Michel is doing a lot more to promote Fireworks than all the people working for Adobe ever did. He is surely a bit crazy about it, but also very honest – and as his wife I think I can testify that. :-)

          The only paid job he ever did for them was one tutorial for Fireworks and he has the right to be proud of it.

          • 10

            “Hello this is Darren’s grandma replying to a thread that Darren has written because it isn’t completely insane for me to do that…!”

            Michel – your comment made absolutely no sense whatsoever. If you read what I said, I made reference to you promoting Fireworks as a CLIENT on your website, so you are openly stating that you’ve worked with them so I am right to question your integrity of promoting the product for possible financial gain.

            But, in the hilarity that followed, your wife has kindly pointed out that contrary to your claim they are a client on your site – they merely paid you to do ONE tutorial (barely what I would consider a client?!).

            With reference to the tutorial BTW, as a devout HTML5 and CSS3 enthusiast, even though it is possible to export “(almost) valid CSS” from Fireworks – I would seriously recommend that anyone with the knowledge to do this themselves NOT to use this feature until it is “fully valid CSS” – but that’s best kept on another thread!

          • 11


            1) I made an extensive tutorial on Fireworks (and CSS), because I am an expert in these fields. Many designers publish their tutorials on Adobe Devnet, on A List Apart, and on Smashing Mag. If the work is good, you may get paid for it. It doesn’t matter if you write about Photoshop, Illustrator, Fireworks, CSS or HTML — as long as you are an expert and you do your job well, that’s all that matters. My tutorial was good, and I am proud that it is published on Adobe Devnet. I did the work as a professional that knows well a particular product (Fireworks) and a particular set of technologies (CSS, HTML).

            2) Promoting Fireworks for a possible financial gain? You are joking, right? When you say “Photoshop is better!” does this mean, you promote Photoshop for a possible financial gain? Maybe Adobe pays you in secret to do this? At least, I am brave enough to say, yes, I did some work for Adobe, and I am proud of it!

            …No, I am merely a Fireworks user. I wish Adobe would recognize me as a good promoter for Fireworks, but alas, this never happened and never will. I love Fireworks, and I am using it since it was called Macromedia Fireworks! :)

            Answering better your question: My current articles on Fireworks, that I published in Smashing Mag, I did as independent design professional. I am being paid by Smashing Mag only. I write about Fireworks because this is a product I use, because this is a product I find valuable in my daily (Web) design work, because this is a tool I am a bit passionate about, and because I think that my articles will be useful to a larger audience of other design professionals.

            3) I use HTML5, XHTML 1.0, CSS2 and CSS3. Concerning my other tutorial (on Fireworks CS4 and CSS export) — if you have tried to read it, you’d know then that Fireworks can export HTML/CSS prototypes, that, after approved by a client, can be then converted to graphic assets and HTML/CSS code in the standard way: you export and optimize the graphics, and manually create the HTML/CSS code. This is how I work. This is how all professionals work.

            Fireworks can export a clickable Web prototype (HTML, CSS and automatically exported graphics), and this is very useful feature. To be able to export a real, clickable prototype, show it to the client, and then, when approved, do your Web design work the regular way, gives the designer a fair amount of flexibility! This is also something that Photoshop cannot do, btw, since it can make only static graphics (but I bet John Nack has this feature on the list of features that Photoshop will be copying from Fireworks very soon;-).

            Finally — the discussion is about Fireworks and what it can do; I’d like to keep it focused. If you love so much Photoshop (or any other tool), write your own article and show it to the world! Or if you love to search for some secret spy games and conspiracies — please, search elsewhere; here’s not the right place for this. Otherwise, I would consider you a troll. Thanks!

        • 12

          Darren, do you make a difference between different “Client” types?

          Michel is a CSS web designer, he uses some tools to make his work. One of them is Fireworks.

          Now, some time ago, Adobe asked him to write a tutorial how one can use Fireworks to do web design. In his web designer capacity, not as a PR. They could have asked any other designer. This does not mean that his words are less credible, just because he did some work for Adobe. They never paid him to promote their product.

          Smashing Mag also asked Michel to write articles about web design using a tool less popular (but in Michel’s opinion far superior for web design) than Photoshop. Other people in the comments below also agree with him. If you can reap some benefits from reading – good, if you can’t – please don’t troll on somebody else’s work. And having no real arguments, you question his authority? It’s so cheap.

    • 13

      Photoshop is not superior for web design. Try and make a multiple page design in it and compare it to Fireworks. There is no comparison. I have used both, I doubt if the author of this post has ever used Fireworks professionally. Either that, or Darren’s post has been inserted at the top just to generate comments!

      • 14

        @markus it didn’t take long for this to turn into the same old Photoshop vs Fireworks debate.

        I moved from PS to FW because the latter allows you to create rapid prototypes as well as develop polished interfaces whereas the former is a piece of photo editing software that some people use shapes, filters and effects to design websites with.

        Fireworks is designed for what we do.

    • 15

      Thats a very shallow and uninformed comment. There is no “far superior.” Both programs have their field of application and as you can see from the examples above, Fireworks is definitely not limited for web-only images.

      • 16

        Fireworks is limited for web only images because it cannot export cymk images. You would still need PS to convert FW images to cmyk.

    • 17

      Trolling troll is trolling.

    • 18

      One small area where photoshop’s quality can’t be replicated in Fireworks is in the quality of it’s gradients. Create a dropshadow in Photoshop and see how wonderfully and smoothly it fades to zero at the edges. In fireworks the same dropshadow appears with a slight hard edge at its outer edge.

      • 19

        ehh. you don’t need to *learn* anything.

        its like having to learn how to use a mallet – you don’t really need to, if you’re good with a hammer it just comes naturally. you just use mallets in carpentry or whatever. ;)

      • 20

        That has been fixed in Fw CS5. In fact, Fw CS5 does a better job of gradients than Photoshop.

    • 21

      Hell yeah!!!

      Why learn how to work with two softwares? I don’t have time to lose.

      Everything that I do with Fireworks I can do with Photoshop as well, but I can’t do everything that I do with Photoshop on Fireworks.

      It is that simple. Nothing more to say.

      • 22

        ehh. you don’t need to *learn* anything.

        its like having to learn how to use a mallet – you don’t really need to, if you’re good with a hammer it just comes naturally. you just use mallets in carpentry or whatever. ;)

      • 23

        Yes, but you miss the point. Fireworks is a lot faster to design a web layout. It might take you some time to learn this new software but it will make you more productive in the long run. Fireworks has the author mentioned has Pages/ Master page. In your master page, you can create the header, sidebar and footer for example and it will be shared to all your pages.

      • 24

        Wow! I can’t believe that anyone actually thinks this!

        Katiero, I have taught Photoshop, Fireworks, Illustrator and Flash at the college level for a number of years. I assure you that there are many things Fireworks does that Photoshop is incapable of.

        I could list many such features (JavaScript behaviors, Master Pages and multi page layouts, autoshapes, etc. etc.)

        Using a raster image editor as your web page layout tool is exremely limiting, even if that tool is Photoshop. I suppose your competition is thrilled you feel this way.

  3. 25

    Somebody made a boo-boo… Firefox logo is the featured image for the post on the front page, rather than the Fireworks logo.

    • 26

      You better read the whole article first. The Firefox logo was initially made with Fireworks – here is the connection, because this logo is a good example for this article.

    • 27

      Fireworks was used to create the Firefox logo

  4. 28

    I looked at Fireworks a couple of times. I use Photoshop daily for web & screen design. Maybe its time to try fireworks again and look at it on another perspective.

    • 29

      i agree with you :) im web design i use only photoshop but this post make me think about fireworks i use it like a long ago i think it was still macromedia LOL but i will check it out.
      and to “Michel Bozgounov” good work man :) nice post

  5. 30

    Interesting article, haven’t used Fireworks in years – this has made me think about check it out again.

    Tommy (

    • 31

      Interesting thoughts, but I doubt any designer worth his or her proverbial salt would dismiss photoshop in favour of fireworks. It’s leagues ahead of fireworks (for those who know how to use it).

      • 32

        Wait, did you just say print design in photoshop? So what the hell have I been using Illustrator for all these years?

      • 33

        I guess if you’re strictly a print designer. For web and interface design, Fireworks clearly destroys Photoshop in speed and interface related features.

      • 34

        Not true. I have been a web designer since 1993. Professionally and full time. I now only use Fireworks.

  6. 35

    I agree with Darren, Photoshop is far superior to Fireworks. Nice article though and quite funny about the firefox logo :-)

    • 36

      “Photoshop is far superior to Fireworks”

      I think both tools have their right to exist. IMHO Fireworks is easier to use and that’s the reason I use it, plain and simple ;)

  7. 37

    I love Fireworks, it’s so much easier for creating web prototypes and designs than Photoshop!

  8. 38

    Fireworks it’s the best application for web design. It’s more faster, easy layers management, and the selections of objects, text modifications, gradients and colours are very very more faster and easy than photoshop. Photoshop is not the best program for manage big number of layers or independent objects…

  9. 39

    talking about Fireworks and puting logo of Firefox for heading image can be quite confusing.

    Fireworks is great tool, but I am not so good with it, unfortunately…

  10. 40

    The point is not “leave Photoshop for Fireworks”, the point is “If you plan to craft websites, UI and vector-based illustrations, Fireworks is a good solution”.

  11. 41

    I used Fireworks years ago when a client requested an interactive e-learning Program – in fact a huge project: the ECDL – European Computer Driving License. I found that Fireworks was the best and easiest tool to enhance and modify the screenshots for the course. Especially the combination of editable vector art and bitmaps made it the tool of my choice. Still love it for its simplicity (once you get over the initial learning courve). I think that both, Fireworks and Photoshop need to co-exist because they don’t target the same goal, rather they compliment each other.

  12. 42

    I find it disconcerting that only a couple of the artists featured actually use fireworks to create websites. Why talk about how great it is for web design and then focus on illustrations?

    • 43

      @Gayle, I agree with you. I was confused with the content of the article as I was hoping it would be more focused other capabilities Fireworks has to offer compared to PS. It seemed the entire article only spoke to how/what one can design. I was anticipating learning more about the features FW has to offer – Pages, Master Pages, exporting, prototyping and so on.

      But, I did enjoy the article though.

      • 44


        In the beginning of the article, I mentioned that this time, the focus will be set on the visual/graphic design capabilities of Fireworks. Also, unfortunately, some Web design examples were later removed by the Editor, even without my knowledge…

        “I was anticipating learning more about the features FW has to offer – Pages, Master Pages, exporting, prototyping and so on.”

        — This topic is certainly on our radar and one of the next articles about Web design and Fireworks will certainly highlight in detail some of these features! Stay tuned! :)

  13. 45

    I think some of the posters above are missing the point. No one is saying it is superior to Photoshop – it’s all about what you want to use it for. I’ve been using it for web interface design for 10 years now, and the vector graphics, asset management and ease of use are what makes it better… in my opinion, and clearly in the opinion of many of those featured above.

    Plus its capability to export vector graphics to Flash and Silverlight makes it a great tool to begin with. Also, with the take up of HTML5 and SVG, I’d suggest taking a look if you haven’t done already

    • 46

      Spot on with the HTML 5 – SVG capabilities. Plus because it can handle vector graphics, you don’t have to worry about scaling for ipad or iphone.

  14. 47

    Better compression, vector & raster combining. Those are the main reasons I changed for Fireworks for web designing.

  15. 48

    I’ll take time to trying FW !

  16. 49

    Thank you Smashing for highlighting some of the hidden unknowns about Fireworks. We used to be Photoshop Freaks on Steroids when it came to designing for the web. Since working with Illustrator, we started to realise the bridge between Illustrator and Photoshop was Fireworks.

    We offer free downloads to anyone interested: and have done for a few years now. These are just 2010 freebies.

    Thanks once again for an amazing article.

  17. 50

    I use both Fireworks and Photoshop… drawing mocks in Fireworks is so much faster and easier to customize… but when I need a good looking photo for my mock I create it in Photoshop.

    • 51

      Same here: Fireworks for the interface, layout, and export slices. Photos with Photoshop. Everything goes faster and looks perfect. Each one has it’s purpose.

  18. 52

    You must be kidding. Fireworks is an application for developing websites. For this task you reserve three small paragraphs and a ten-item-list.

    It is nice to see, what you can achieve with Fireworks instead of using Illustrator which is made for such illustrations. It is nearly the same with Photoshop. Nearly all designers believe, that PS is capable of doing websites. Fireworks is far better and it is specialized for this task.

    You talked about designing vector images in Fireworks, you could have talked about producing simple Flash movies with it. But you missed unfortunately the real strength of the software. What a pity.

    • 53

      Jens, I must say that, during editing, I removed a couple of website examples and pushed a couple of paragraphs here and there to make the article a bit more balanced. But indeed, I failed to highlight the advantages of developing websites in Fireworks. Sorry about that.

    • 54

      “Nearly all designers believe, that PS is capable of doing websites.”
      And this is why _developers_ fall into depression when they see “another PS masterpiece” that they must slice and implement.
      Yes, FW is terrible with image transformations on larger scale. Yes, FW is awful when working with more than few hundred vectors (even when grouped). But when it comes to creating The Web Layout (not, elements, not graphical knickknacks, but the layout itself, real fullsize layout with all the menus, content, footers, tooltips and everything in vectors), then Fireworks is _the_best_. You will never ever in the world get same power of vectors in PS as in FW. End of story.
      Sorry for such intolerant reply, but I am tired of importing and tweaking in FW “masterpieces” created by “The Designer” on “Ye Olde Photoshop”. Leave PS for beauty, but when it comes to web design, please use FW. I beg you, i doublebeg you.

  19. 55

    Photoshop for photos, Fireworks for Web graphics, Illustrator for vector art, simple. One is no one better than the other, they are different tools (but fireworks can do some of what illustrator can).

    Without question Photoshop is a superior product for image manipulation (which is what it’s built for), I wouldn’t contemplate using Fireworks to image retouch.

    Without question Fireworks is superior at handling web graphics. States, layers, slicing, optimisation are all far simpler and quicker to implement in Fireworks, e.g. states allow you to create and name a series of images which you can add to and edit individually, or have single objects across multiple states, then export them all named in one go, it’s fantastic for creating multiple headers, icons, etc.

  20. 57

    I’m using Fireworks since MX version and can’t imagine to do any website project without this perfect tool. For images that goes on the web it’s number 1 for me.

  21. 58

    Now all the PS hardcore users will rush to spit on FW. Fireworks is really great and no one says it’s better or not better than Illustrator or Photoshop. It is what you can achieve by using some tool that counts. I like Illustrator and think it is cool but I am better with FW and that is why I use it.

    Photoshop is great, Illustrator is great, Corel is great but it just happens that I like Fireworks the most. I am not saying it is better or not… my 2 cents.

  22. 59

    I knew about the PNG8 alpha+index and I could never get the PNG8 alpha+index to work on IE6. Is there a trick to it? I can get it to work great in IE7.

    • 60

      Export to PNG8 alpha+index is very easy in Fireworks — the following SitePoint article may help you! Simply, when you export your graphic in Fireworks, in PNG8 transparent format, make sure you have switched to alpha transparency, and that’s all — the PNG8 file then should display perfectly in all browsers (with alpha transparency), and fairly well in IE6 (which will show the PNG8 with index transparency)!

  23. 61

    Fireworks is really great. I don’t think it can replace Illustrator, but it can replace Photoshop for everything other than retouching photos.

    Fireworks is fast, and not nearly as clunky as Photoshop either. So for me, designing a website in Photoshop makes absolutely no sense at all. Fireworks all the way.

  24. 62

    What concerns mockups for Websites, a modern solution would be outside of the Photoshop-Fireworks discussion. I dream of a tool thats lets me graphically and interactively handle DOM-Elements of a HTML code, editing their visual (CSS-) attributes on-the-fly. You’d also have references to other windows whose content would automaticaly be compressed into bitmap graphics so I can edit button-backgrounds and the results would be resolved instantly. Isn’t arranging layers and items in PS/FW much like deciding about DIVs and IMGs? Only you do it _twice_ because whatever you export has crappy markup written all over it?

    Why does nobody risk some money and brings out a DOM-Desktop-Tool, properly written in Cocoa and adhering to very standards and elements that the later-to-publish website will be based on anyway?!? Webdesigners are working like a print designer saying «Oh, I’ll first design some mockup pages in HTML/CSS and then I’ll ‘just’ transfer it into metric units and a fixed layout!» It’s ridiculous! Fact is, that both tools dont allow to design, say, a fluid website. Thats forces webdesigners to switch from designing tools to HTML-editors far too soon and too often, resulting in a inferior layout quality and less efficent workflows.

    Also, how again does Adobe justices the price for DW/FW/PS? And software quality!? Fireworks crashes about every four hours I use it. GPU acceleration (another point in FW), anyone?!

    From this point of view, some code-editing tools are closer at it then the tools discussed here. CSSedit for example has a preview window, and lets me work very close to the code. There are people out there redesigning entire websites as presentation prototypes by coding JavaScript-based transformation stylesheets. Even DOM changes inside firebug are reflected immediately. Why not have a design tool working like this?

    Design changes in a modern workflow must be rendered by the same technologies that render the actual result, otherwise it’s NOT A PREVIEW. There is an urgent need for a tool that truly deserves the title ‘web layouting software’.

    • 63

      I know what you mean. I think Firebug for Firefox is the closest thing to what you are talking about. I often use it to fine tune my CSS. It is especially helpful with CSS3 features, when you are trying to get that inset shadow just right.

      Fireworks is essential for any web designer.

    • 64

      I recently switched back to PS. FW has a lot of things that work better and faster for mocking up a website. But it also crashes a whole lot more!

      Still waiting for a backup system like Indesign has. Start over, kick the macromedia engine out, start with a basic Indesign version and work it out for pixel-design. Then you have a perfect program. I don’t understand why Fireworks is still trying to do a few photo-editing effects and a few illustrator effects. Photo-editing should be done in PS. Drawing in illustrator and designing a website layout in Fireworks.

      • 65

        There is an auto-backup module for Fireworks, and it is free and easy to use: [download]

        About features in Fireworks: It’s perfectly logical it can do both vector and bitmap editing, but for screen only. It’s an app for Web design, and when designing for the Web, you need mainly vector tools, good layout editing options, and some bitmap editing tools. Fireworks has all of these, plus many more unique features, that make it so easy to use for the Web! And instead of switching between Ai and Ps all the time, you simply open Fireworks and do almost all your Web work there! :)

  25. 66

    Great read, a good amount of web designers I’ve worked with have sworn by Fireworks – and after reading everything above I know why.

  26. 67

    I’m web user-interface programmer (HTML, CSS, JS) and
    Fireworks is the best application for slicing and preparing graphics for web.

    But recently I’ve run into one serious bug with FW. It’s about correct PNG8 image exporting :(

    Here is how it looks like:

    • 68

      This is a bug in the Fireworks export engine — sometimes, when exporting to GIF (exact, 256) or PNG8, it cannot use all 256 available colors. Unfortunately, this is not yet addressed as of version CS5. Nevertheless, I’d recommend filing the bug!

  27. 69

    I’ve been using Fireworks since version 8 and I really like the flow. I really love Fireworks for its custom commands. If you know some JS you can create complex effects that you can even use for batch processing. I use Photoshop for image processing if I need a more artistic touch but Fireworks is my Swiss knife and can handle almost everything. I also like the the ability to export interactive PDFs. This makes life a lot easier when talking to clients.

  28. 70

    I used to design in Fireworks, but changed to Photoshop about a year ago. Even though I can probably still design quicker in Fireworks, the main reason for me to switch was that Adobe was continuously putting Fireworks as an un-superior product. You need to really look for Fireworks in the Adobe Suite to find it. My guess is that Adobe will eventually drop development on this program. I’m curious about your view on this.

    • 71

      Adobe Fireworks has a very large (and growing) user base of professionals that rely on it every day, for Web development and for a variety of other design tasks & workflows. I hope Adobe will not drop Fw’s development, but only Adobe can speak on the future of their applications. I really don’t know the answer to this question… :(

  29. 72

    I use both Photoshop and Fireworks professionally, and admit that Fireworks is much much faster and easier for website design and layout without compromising any design features whatsoever.

  30. 73

    Don’t know why, but almost all illustrations (beside Firefox logo and a couple of others) look really lame. And I love cartoon style usually.

  31. 74

    Fireworks rules. Photoshop is one of the most overrated programs of all time.

  32. 75

    Number one reason i’ve always kept this software at hand reach? Compression!

    I still don’t understand how and why Photoshop exports heavy images, but anyway, I use FW as a complement to export some of my images & quick vector illustrations.

    I’ve always used FW and i’m happy to read an article about it and see it featured here! :)

    • 76

      I don’t think Photoshop exports heaver files than FW when using the Photoshop “save for web and devices” option.

      • 77

        Germaine might be right, you know… ;-)

        Number of studies, including this one, show that Fireworks exported files are usually slightly smaller that the ones exported from Ps, and with same quality, if not even better!

  33. 78

    Professionally I use Fireworks, Photoshop and Illustrator. Each of them has a different purpose, so I never allow myself to even start thinking which one is “superior” or things like this. I just use them for what they can do best and I personally often use Fireworks for many tasks – not because it’s so powerful, but because it’s very easy to use.

    I like the article because it’s a simple showcase of what can you do with your favorite tool. Photoshop can be awful when it comes to web design, but this has never been a problem for people to stretch their abilities and to write long articles with list of examples.

    Thanks for all the efforts to gather these together, Michel. :-)

  34. 79

    I still can’t see the benefit of using Fireworks for vector illustrations when there’s Illustrator or using it for pixel illustrations when there’s Photoshop.

    It seems to be good to streamline web design flow, but most of the examples here I cant see why they couldnt just be done in the other 2 programs. Illustrator has a pixel preview and pixel snapping.

    • 80

      Well, I can tell you why, if you let me. :-) I used to be an eager Photoshop user 6 years ago. Then somebody showed me Fireworks and I was reluctant to try it at the beginning, but very soon realised that this piece of software is very intuitive and you don’t need complex tutorials or big books to start working with it.

      Few years later I started to work with Illustrator and I am still learning a lot about it – but there are many simple tasks, related to vectors, which I can do easily with three clicks in five minutes in Fireworks and in “twenty-easy-steps” in Illustrator.

      • 81

        Yea, I understand your point—if you’re already a photoshop/pixel user then fireworks would make sense to you, but if you already know photoshop and illustrator like the back of your hand then it seems a little pointless to use another software…..just drags down more RAM from the computer and creates another file to transfer between programs (and the chance for overwriting/corrupting)

        • 82

          If you are using Fireworks, there is no need to keep Illustrator and Photoshop opened all the time any more.

          Also Fireworks has an awesome “Export Area Tool” which makes my life lot easier.

          One more example: try to change the radius and size of a rounded rectangle after being drawn in Illustrator – you have to use “round corners” effect and radius can be changed only via modal popup, it is extra clicks, I better spend this time on something else.

          p.s. My site ( ) and all works in Portfolio are done with Fireworks.

          (sorry for my English)

  35. 83

    Have used Fireworks since day 1 of my web design career. Back in the days of Macromedia. Still get people asking me why as if I am some sort of weirdo for not using Photoshop.

  36. 84

    I couldn’t agree with @Lee more – All products have their place. I personally think Fireworks is the best for web/screen interfaces. Photoshop for photos, Illustrator for vector art. Very simple!

  37. 85

    What a great remember of Fireworks. In 2000 my website design starts with Fireworks. But this great tool was sidelined by Photoshop with its development in image editing and “Save for Web” option. Now I’m not using FW, but it feels for Web/UI, Fireworks is the better tool. (I’m also confused by the Firefox logo in the start.)
    Thanks to recollect Fireworks.

  38. 86

    Awesome article!

    Just cannot imagine how some of these great designs can be achieved. It really makes me proud of Adobe Fireworks.

    Thanks for getting this article here, Michel.

  39. 87

    It’s time to really focus on FW and learn and learn and learn :) Cool stuff!

  40. 88

    I use Fireworks for 5 year now. I can’t go back to Photoshop.

    Only a few problems are not yet solved:

    – you cannot preview/switching fonts from the keyboard up/down (like Photoshop did)
    on the CS3 there was a tool to do it but its gone now :(

    – you cannot import brushes from Photoshop (that sux)

    – the software is really not stable and it crashes a lot of time when you have too many files open.

    Otherwise Fireworks is soooo gooood ;)

  41. 89

    It’s good, but it crashes all the time. It’s too buggy for me to use for important or large files unfortunately.

  42. 90

    I have used Fireworks on and off since the original release. In my current role I am responsible for the Information Architecture and visual design of a enterprise sized web based medical application. We have actually moved off of Fireworks and are back to using Illustrator. We can prototype in Low Fidelity and convert these images directory to High fidelity extremely fast with Illustrator. By using multiple art-boards, sometimes as many as 80 in an image, we can produce a file that can be viewed in the Acrobat client, and can be imported into InDesign to build Call0out and BRD documents. It has decreased our development speed exponentially while reducing inconsistency in the designs. Fireworks is great for public facing site development, but for large scale Application Design with a focus on UI, Illustrator is much more powerful.

  43. 91

    Excellent article! I’m simply blown away by the creativity and quality of the work shown here. Amazing! This is a phenomenal showcase of work.

    I must disagree on two points, though. And yes, perhaps I’m picking nits but I think they are important distinctions.

    > With Fireworks you can make websites…

    This is not a message I would want to send as the first point in what Fireworks is good for. Designing and optimizing graphics for a web site, web site prototyping — yes. But that first statement is far too broad and sends the wrong message, IMO, anyway.

    > You can also export Fireworks PNG files as Adobe AIR applications…

    You can create AIR application prototypes, not full-fledged AIR applications. They can be very realistic prototypes (that is the goal, after all) but they are not true applications in themselves.

    I’d love to see more articles of this type in the future. You’ve done a great job!

    • 92

      Jim, thanks for the insightful comment — after all, I know you have written a few books on using Adobe Fireworks! ;)

      About your first point — what I’ve meant is that Fireworks can create Web graphic designs and also create interactive Web prototypes. So, yes, with Fireworks you can create websites — but only the visual design. After the design is ready, you’ll have to create the HTML/CSS code yourself. So the design workflow with Fireworks is not much different from using Photoshop (except for the ability to export an interactive HTML/CSS prototype, which only Fireworks can for now).

      Regarding your second point, about Fireworks export to AIR apps — you are right, and the article has been accordingly updated!

      Thanks again! :-)

  44. 93

    When it comes to ui design, Fireworks wins.

    However, when it comes to brushes and textures, PS wins.

    It all depends on what you’re trying to do. I use both depending on the task. I used FW first when I started my career then went to PS. I have to say, once you learn all the hot keys, PS is just as fast as FW. Granted, a 100 mb psd file will always be a major fail when comparing to FW’s file size.

  45. 94

    That’s a good article. I enjoyed reading this one. I used to do Fireworks many years ago but stopped doing it b/c my old job went out of business and the new one doesn’t have Fireworks. :

    I really wish Adobe will just focus on Fireworks b/c it needs polishing really bad. Thanks for the article!

  46. 95

    I read a similar article elsewhere a few months ago and did give Fireworks a shot, testing it out and seeing what it could do, and I was relatively impressed. However, when it came to creating a website visual for a client, I lost my nerve and went back to my old favourite – perhaps time I tried again?

  47. 96

    Considering how stupid easy it is to make beautiful vector graphics in Fireworks, I’d take this over Photoshop for UI / site design any day.

  48. 97

    I’ve been using FW for about 4 years now… Mainly ’cause I started working for a company that only used FW to design websites. It took me a day or so to make the switch from PS. But man was it worth it!

    For some reason it just works way quicker than PS. Though of course I still use PS to edit pictures. But that is really the only thing I use PS for these days.

    Especially the way you can have multiple pages of your website in one document and then have multiple layers per page and then have multiple objects per layer rocks! And the fact that you can edit everything just by dragging the vector’s control points!! :)

    I don’t think I’ll ever go back to PS. Especially now that I have Fireworks CS5. Which is way more stable and doesn’t crash when you have over 60 pages in a file! :)

    Anyway… guess people just have to take the time and find out for themselves.

    Great article by the way! It needed a bigger list of websites made with FW though. Just to irritate the nee sayers :)


  49. 98

    Fireworks is my package of choice, and it makes me happy in my pants.

  50. 99

    Thank you! Great article. I hate dealing with artists that look down their nose at me when I suggest Fireworks. Of course, they scratch their head in bewilderment when I turn out interfaces in half the time it takes them.

    Photoshop is good. It’s powerful. But it’s runner up in the category of web design and wireframing.


↑ Back to top