Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

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 variety of toolkits9 and rich symbol libraries10 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 extensible11 — this makes possible the developing of amazing extensions (such as TweetFire12, 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 Hogue13 is the Director of Information Design & Usability at Fluid14, 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 Twitter15 account.

{01} Golden Compass illustration Link

Golden Compass illustration16

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

{02} Quartz Watches illustration Link

Quartz watches illustration19

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

2. Matthew Inman Link

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

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 collection25):

{03} 15 Things Worth Knowing About Coffee Link

The Oatmeal comic strip26

{04} 20 Things Worth Knowing About Beer Link

The Oatmeal comic strip27

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

The Oatmeal comic strip28

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

The Oatmeal comic strip29

{07} Duck in Coffee illustration Link

Coffee and Duck illustration (Fireworks)30

Matthew does not use Fireworks only for drawing his comic strips — for example, see this beautiful “There’s a duck in my coffee” vector illustration31, created entirely in Fireworks (see screenshot32 from the process). Check Matthew’s portfolio33 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 Magazine34 and many others (see Ryan’s portfolio35).

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

{08} XD Brownbag Poster series Link

Ryan Hicks illustration (Fireworks) width=36

After posting it to the Adobe Developer Connection | Fireworks 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 file.

{09} XD Lunchbox poster Link

Ryan Hicks illustration (Fireworks) width=37

{10} XD Beet poster Link

Ryan Hicks illustration (Fireworks) width=38

{11} XD Mackerel poster Link

Ryan Hicks illustration (Fireworks) width=39

{12} XD Salad poster Link

Ryan Hicks illustration (Fireworks) width=40

{13} XD Brownbag poster Link

Ryan Hicks illustration (Fireworks) width=41

4. Rogie King Link

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

{14} personal site illustrations Link

Rogie King redesign illustration43

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

{15} Logo for Link

Rainboxx logo (1)45

Rainboxx logo (2)46

Rainboxx logo (3)47

Created for Matthias Dietrich for his PHP development shop, Rainboxx48, 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 process, the related dribbble shot49, and you can learn more about the particularly interesting brushed metal effect in this video tutorial.

{16} Mad Mimi Illustrations Link

Mad Mimi illustration (1)50

Mad Mimi illustration (2)51

Mad Mimi (animated) illustration (3)52

These are just a couple of illustrations from a series created for the redesign of Mad Mimi53. 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 icons54

A custom icon set designed entirely in Fireworks for andCulture55 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 progress56).

5. Xiao Cai Link

Xiao currently lives and works in Melbourne, Australia. He’s currently building his portfolio and preparing for the RMIT University57. He does not have a personal website but you can check his profile in deviantart58 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 Fireworks59

“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 Fireworks60

“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 Fireworks61

Chinese painting style in Adobe Fireworks62

Chinese painting style in Adobe Fireworks63

“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 Fireworks64

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

6. Jon Hicks Link

Jon Hicks (, @hicksdesign67) 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 Software68, before returning to freelance work this year.

Firefox logo (Fireworks version)69

Firefox logo70

The logo of Mozilla Firefox, one of the leading modern Web browsers, was originally created in Macromedia Fireworks71 in 2004. (Note: Later Jon Hicks re-created72 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 Fireworks73, 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 patches74 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

Fabio75 is a graphic and web designer from Porto Alegre, Brazil. He’s the founder of Abduzeedo76, a blog about design, and he and other designers have published there many tutorials on Fireworks77. 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)78

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

{24} Light Effects illustration Link

Light effects illustration (Fireworks illustration)80

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

{25} The Abduzeetles Rockband website design Link

The Abduzeetles Rockband website design (Fireworks illustration)81

Hilarious — this tutorial82 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 Studio 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 deviantart83.

{26} Vectorizer illustration Link

Vectorizer illustration84

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

{27} Anger Management illustration Link

Anger Management illustration88

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

{28} iCry illustration Link

iCry illustration89

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

{29} TakeOFF illustration Link

TakeOff illustration90

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

9. Fred Michel Link

Fred Michel 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 illustration91

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

{31} Cadillac illustration Link

Cadillac illustration93

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

{32} Mercedes SLA concept car illustration Link

Mercedes SLA illustration95

Mercedes SLA concept car — originally created in 2005 in Fireworks, all vector work (editable PNG is available for download96). 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 car97 — it only remains a concept till now.

{33} VW Tiguan illustration Link

VW Tiguan illustration98

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

10. Mikko Vartio Link

Mikko Vartio 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 Twitter100 and Flickr101 (where he often posts Fireworks illustrations).

{34} Bears illustration Link

Bears illustration102

{35} Sealife illustration Link

Sealife illustration103

{36} Longboard illustration Link

Longboard illustration104

{37} Surprise illustration Link

Surprise Fireworks illustration105

{38} Darth Android illustration Link

Darth Android illustration106

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

{39} Magic Mushroom illustration Link

Magic Mushrooms illustration108

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

11. Angelo Sabal Link

Angelo Sabal 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 illustration109

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

{41} Candle illustration Link

Candle illustration111

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

{42} Dragon shield illustration Link

Dragon shield illustration113

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

{43} Iron Man 2 helmet illustration Link

Iron Man 2 illustration115

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

12. Craig Erskine Link

Craig Erskine117 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 basis118 and has also published quite a lot of Fireworks tutorials. You may find him on dribbbble and Twitter119.

{44} Mac Mini illustration Link

Mac Mini illustration120

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

{45} Apple remotes illustration Link

Apple remotes illustration122

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

13. Pete Lacey Link

Pete Lacey124 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 Twitter125, too.

{46} Fireworks icons Link

Fireworks icons126

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

14. David Brooks Link

David127 is a UX designer at Fellowship Technologies128 and also a photographer. He currently lives and works in Dallas, Texas (USA). You can find him on dribbble and Twitter129.

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration Link

Camera-Phone illustration130

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration Link

Northward Compass website illustration131

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 Portfolio132 has been made in Fireworks. You can also find Tomas on Twitter and SofaSurfer133.

{49} DigitalLabs website design Link

DigitalLabs website design (Fireworks illustration)134

{50} Beck’s design concept Link

Becks design concept (Fireworks illustration)135

{51} SofaSurfer website design Link

SofaSurfer website design (Fireworks illustration)136

16. Vincent Tremblay Link

Vincent Tremblay 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 deviantart137.

Neos Carbon 2 logo (Fireworks illustration)138

Created in Fireworks CS5, all vectors.

iCompanion (Fireworks illustration)139

Created in Fireworks CS5, all vectors.

17. José Rivera Link

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

{54} Twitter icons Link

Twitter icon #1 (Fireworks illustration)143

Twitter icon #2 (Fireworks illustration)144

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)145

The idea to fully vectorize the iPhone is not new — for example, you may check this excellent tutorial146 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 format147 for free download (download iPhone in editable PNG format148). 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 portfolio and deviantart profile149, where he publishes some of his illustrations made with Fireworks.

{56} Spiral Notebooks illustration Link

Spiral notebooks (Fireworks illustration)150

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

{57} Le Petit Porcelet illustration Link

Le petit porcelet (Fireworks illustration)152

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

{58} Safari Dock icon Link

Safari dock icon (Fireworks illustration)154

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

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 Fireworks156

{60} The Adobe CS5 branding — the icons Link

Adobe CS5 branding - made possible with the help of Fireworks157

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

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

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 blog159 dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts160 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 Nack161 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 Fireworks162 (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 Styles163 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 Photoshop164. While Fireworks may be not better than Photoshop165, 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 application166 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)167

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

↑ Back to top Tweet itShare on Facebook


Michel is a freelance designer, illustrator and photographer. He also happens to work as contributing editor at Smashing Magazine and is very passionate about modern UI design tools, HTML/CSS, Web Standards and the smell of good coffee. When not editing articles, he can often be found reading about design, riding his bicycle, looking at the clouds in the sky, or tweeting. :)

  1. 1

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

    • 2

      “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 ;)

  2. 3

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

  3. 4

    Darren Williams

    September 17, 2010 2:44 am

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

    • 5

      Michel Bozgounov

      September 17, 2010 3:37 am

      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!

      • 6

        Darren Williams

        September 20, 2010 11:49 pm

        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 ;)

        • 7

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

        • 8

          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

          • 9

            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.

        • 10

          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.

          • 11

            'Grandma' Williams

            September 24, 2010 12:18 am

            “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!

          • 12

            Michel Bozgounov

            September 24, 2010 3:11 am


            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!

        • 13

          Michel Bozgounov

          September 23, 2010 2:48 am


          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! ;-)

        • 14

          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.

    • 15

      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!

      • 16

        @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.

    • 17

      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.

      • 18

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

    • 19

      Trolling troll is trolling.

    • 20

      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.

      • 21

        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. ;)

      • 22

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

    • 23

      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.

      • 24

        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. ;)

      • 25

        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.

      • 26

        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.

  4. 27

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

    • 28

      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.

    • 29

      Fireworks was used to create the Firefox logo

  5. 30

    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.

    • 31

      Hybrid IX Studio

      September 24, 2010 7:49 pm

      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

  6. 32

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

    Tommy (

    • 33

      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).

      • 34

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

      • 35

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

      • 36

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

  7. 37

    Machteld Ouwens

    September 17, 2010 2:58 am

    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

        Michel Bozgounov

        September 17, 2010 1:20 pm


        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

    Jens Grochtdreis

    September 17, 2010 3:50 am

    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

      Vitaly Friedman

      September 17, 2010 7:45 am

      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

      Edgars Zagorskis

      September 17, 2010 4:17 am

      “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.


↑ Back to top