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

Advertisement

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?

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?

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?

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

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

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

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

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

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

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

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

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 (http://web.archive.org/web/20110810065019/http://keepinspiring.me/2010/01/interview-with-matthew-inman/25).

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

The Oatmeal comic strip27

{04} 20 Things Worth Knowing About Beer

The Oatmeal comic strip28

{05} How a Web Design Goes Straight to Hell

The Oatmeal comic strip29

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

The Oatmeal comic strip30

{07} Duck in Coffee illustration

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

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

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

Ryan Hicks illustration (Fireworks) width=41

{10} XD Beet poster

Ryan Hicks illustration (Fireworks) width=42

{11} XD Mackerel poster

Ryan Hicks illustration (Fireworks) width=43

{12} XD Salad poster

Ryan Hicks illustration (Fireworks) width=44

{13} XD Brownbag poster

Ryan Hicks illustration (Fireworks) width=45

4. Rogie King

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} rogieking.com personal site illustrations

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 rainboxx.de

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

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

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

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

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

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

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

Chinese painting style in Adobe Fireworks71

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

6. Jon Hicks

Jon Hicks (hicksdesign.co.uk73, @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.

{22} Mozilla Firefox logo

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

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

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

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

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

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

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

Anger Management illustration97

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

{28} iCry illustration

iCry illustration98

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

{29} TakeOFF illustration

TakeOff illustration99

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

9. Fred Michel

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

Porsche Carrera illustration101

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

{31} Cadillac illustration

Cadillac illustration103

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

{32} Mercedes SLA concept car illustration

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

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

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

Bears illustration113

{35} Sealife illustration

Sealife illustration114

{36} Longboard illustration

Longboard illustration115

{37} Surprise illustration

Surprise Fireworks illustration116

{38} Darth Android illustration

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

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

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

Colt illustration123

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

{41} Candle illustration

Candle illustration125

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

{42} Dragon shield illustration

Dragon shield illustration127

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

{43} Iron Man 2 helmet illustration

Iron Man 2 illustration129

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

12. Craig Erskine

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

Mac Mini illustration136

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

{45} Apple remotes illustration

Apple remotes illustration138

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

13. Pete Lacey

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

Fireworks icons142

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

14. David Brooks

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

Camera-Phone illustration147

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration

Northward Compass website illustration148

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

15. Tomas Gajar

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

DigitalLabs website design (Fireworks illustration)152

{50} Beck’s design concept

Becks design concept (Fireworks illustration)153

{51} SofaSurfer website design

SofaSurfer website design (Fireworks illustration)154

16. Vincent Tremblay

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.

{52} Neos Carbon 2 logo prototype (neOS Sapphire logo)

Neos Carbon 2 logo (Fireworks illustration)157

Created in Fireworks CS5, all vectors.

{53} iCompanion logo prototype (iTunes Companion logo)

iCompanion (Fireworks illustration)158

Created in Fireworks CS5, all vectors.

17. José Rivera

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

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

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

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

Spiral notebooks (Fireworks illustration)170

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

{57} Le Petit Porcelet illustration

Le petit porcelet (Fireworks illustration)172

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

{58} Safari Dock icon

Safari dock icon (Fireworks illustration)174

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

19. Adobe CS5 Branding

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

Adobe CS5 branding - made possible with the help of Fireworks176

{60} The Adobe CS5 branding — the icons

Adobe CS5 branding - made possible with the help of Fireworks177

{61} The Adobe CS5 branding — the splash screens

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?

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

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

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

(afb)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/05/22/adobe-fireworks-is-it-worth-switching-to-cs5/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2010/09/fireworks-cs5-splash-screen.fullscreen1.png
  3. 3 http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html
  4. 4 http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html
  5. 5 http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
  6. 6 http://blogs.adobe.com/jnack/2010/08/do-you-care-about-png-8-with-transparency.html
  7. 7 http://www.craftymind.com/2010/09/01/png-compression-on-iphoneipad/
  8. 8 http://www.adobe.com/devnet/fireworks/articles/prototype_iphone_app.html
  9. 9 http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/
  10. 10 http://developer.yahoo.com/ypatterns/about/stencils/fireworks.html
  11. 11 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
  12. 12 http://help.adobe.com/en_US/fireworks/cs/extend/
  13. 13 http://johndunning.com/fireworks/about/TweetFire
  14. 14 http://www.idux.com/
  15. 15 http://www.fluid.com/
  16. 16 http://twitter.com/DaveHogue
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/09/compass.fullsize.jpg
  18. 18 http://vector.tutsplus.com/tutorials/icon-design/how-to-create-a-golden-vector-compass-in-illustrator/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2010/09/compass.fw_.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2010/09/quartz-watches.fullsize.png
  21. 21 http://www.uniformwares.com/product_info.php?cPath=1&products_id=28#pic25
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2010/09/quartz-watches.fw_.png
  23. 23 http://theoatmeal.com/comics
  24. 24 http://keepinspiring.me/2010/01/interview-with-matthew-inman/
  25. 25 http://web.archive.org/web/20110810065019/http://keepinspiring.me/2010/01/interview-with-matthew-inman/
  26. 26 http://theoatmeal.com/comics
  27. 27 http://theoatmeal.com/comics/coffee
  28. 28 http://theoatmeal.com/comics/beer
  29. 29 http://theoatmeal.com/comics/design_hell
  30. 30 http://theoatmeal.com/comics/working_home
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2010/09/coffee-duck.fullscreen.jpg
  32. 32 http://0at.org/blog/coffee_duck
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2010/09/coffee-duck-screenshot.fullscreen.jpg
  34. 34 http://0at.org/portfolio
  35. 35 http://www.wired.com/
  36. 36 http://rhworks.com/
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-fwcs3-poster.fullsize.png
  38. 38 http://www.adobe.com/devnet/fireworks/samples/xd_brownbag.html
  39. 39 http://www.adobe.com/devnet/fireworks/samples/xd_brownbag.html
  40. 40 http://www.adobe.com/devnet/fireworks/samples/xd_brownbag.html
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-lunchbox.fullsize.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-beet.fullsize.jpg
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-mackerel-poster.fullsize.jpg
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-salad-poster.fullsize.jpg
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2010/09/xd-brownbag-poster.fullsize.jpg
  46. 46 http://www.komodomedia.com/about/
  47. 47 http://www.komodomedia.com/categories/tutorials/
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2010/09/rogie-king-redesign.fullsize.png
  49. 49 http://www.rogieking.com
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2010/09/rainboxx-logo-1.fullsize.png
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2010/09/rainboxx-logo-2.fullsize.png
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2010/09/rainboxx-logo-3.fullsize.png
  53. 53 http://rainboxx.de/
  54. 54 http://www.komodomedia.com/blog/2010/05/designing-rainboxx/
  55. 55 http://dribbble.com/shots/22289-rainboxx-de-Logo
  56. 56 http://www.komodomedia.com/blog/2010/05/creating-brushed-metal-in-adobe-fireworks/
  57. 57 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mad-mimi-1.fullsize.jpg
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mad-mimi-2.fullsize.png
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mad-mimi-3.fullsize.gif
  60. 60 http://madmimi.com/
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2010/09/adeptiv-ui-icons.fullsize.jpg
  62. 62 http://andculture.com/
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2010/09/adeptiv-ui-work-in-progress-shot.png
  64. 64 http://www.rmit.edu.au/
  65. 65 http://novelekehe.deviantart.com/
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp2-novelekehe.fullsize.png
  67. 67 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp3-novelekehe.fullsize.jpg
  68. 68 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp4-novelekehe.fullsize.jpg
  69. 69 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp4-novelekehe-element1.fullsize.jpg
  70. 70 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp4-novelekehe-element2.fullsize.jpg
  71. 71 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dcp8-novelekehe.fullsize.jpg
  72. 72 http://novelekehe.deviantart.com/art/DCP-8-night-framed-174094214
  73. 73 http://hicksdesign.co.uk/
  74. 74 http://twitter.com/hicksdesign
  75. 75 http://www.opera.com
  76. 76 http://hicksdesign.co.uk/journal/branding-firefox
  77. 77 http://www.smashingmagazine.com/wp-content/uploads/2010/09/firefox-logo-screens.fullsize.png
  78. 78 http://hicksdesign.co.uk/journal/branding-firefox
  79. 79 http://www.smashingmagazine.com/wp-content/uploads/2010/09/firefox-logo-in-illustrator.fullsize.png
  80. 80 http://hicksdesign.co.uk/journal/a-big-assed-post-about-fireworks
  81. 81 http://www.adobe.com/support/fireworks/downloads_updaters.html
  82. 82 http://fabiosasso.com
  83. 83 http://abduzeedo.com/
  84. 84 http://abduzeedo.com/tags/fireworks
  85. 85 http://www.smashingmagazine.com/wp-content/uploads/2010/09/apple-air.fullsize.png
  86. 86 http://abduzeedo.com/apple-air-banner-fireworks
  87. 87 http://www.smashingmagazine.com/wp-content/uploads/2010/09/abduzeedo-lights.fullscreen.png
  88. 88 http://abduzeedo.com/awesome-light-effects-fireworks-inspired-james-whites-o-series
  89. 89 http://www.smashingmagazine.com/wp-content/uploads/2010/09/the-abduzeetles.fullsize.jpg
  90. 90 http://abduzeedo.com/abduzeetles-rockband-website-fireworks
  91. 91 http://www.2313studio.com
  92. 92 http://dfever.deviantart.com/gallery/
  93. 93 http://www.smashingmagazine.com/wp-content/uploads/2010/09/vectorizer-color-powered.fullsize.png
  94. 94 http://www.adobe.com
  95. 95 http://www.fireworkszone.com
  96. 96 http://www.smashingmagazine.com/wp-content/uploads/2010/09/vectorizer-color-powered.fw_.png
  97. 97 http://www.smashingmagazine.com/wp-content/uploads/2010/09/anger-management-1.fullsize.jpg
  98. 98 http://www.smashingmagazine.com/wp-content/uploads/2010/09/icry.fullsize.jpg
  99. 99 http://www.smashingmagazine.com/wp-content/uploads/2010/09/takeoff.fullsize.jpg
  100. 100 http://www.fm-graphics.com/Fmgraphics/portfolio.htm
  101. 101 http://www.smashingmagazine.com/wp-content/uploads/2010/09/porsche-carrera.fullsize.png
  102. 102 http://www.smashingmagazine.com/wp-content/uploads/2010/09/porsche-carrera.fw_.png
  103. 103 http://www.smashingmagazine.com/wp-content/uploads/2010/09/cadillac.fullsize.png
  104. 104 http://www.smashingmagazine.com/wp-content/uploads/2010/09/cadillac.fw_.png
  105. 105 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mercedes-sla.fullsize.png
  106. 106 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mercedes-sla.fw_.png
  107. 107 http://www.autoblog.com/2009/01/19/the-reset-button-mercedes-to-offer-sla-roadster-by-2012/
  108. 108 http://www.smashingmagazine.com/wp-content/uploads/2010/09/vw-tiguan.fullsize.png
  109. 109 http://www.smashingmagazine.com/wp-content/uploads/2010/09/vw-tiguan.fw_.png
  110. 110 http://www.vart.io
  111. 111 http://twitter.com/mkkov
  112. 112 http://www.flickr.com/photos/mikkko/
  113. 113 http://www.smashingmagazine.com/wp-content/uploads/2010/09/bears.fullsize.png
  114. 114 http://www.smashingmagazine.com/wp-content/uploads/2010/09/sealife.fullsize.png
  115. 115 http://www.smashingmagazine.com/wp-content/uploads/2010/09/longboard.fullsize.png
  116. 116 http://www.smashingmagazine.com/wp-content/uploads/2010/09/surprise.fullsize.jpg
  117. 117 http://www.smashingmagazine.com/wp-content/uploads/2010/09/darth-android.fullsize.jpg
  118. 118 http://www.flickr.com/photos/mikkko/4976149552/
  119. 119 http://vimeo.com/14849809
  120. 120 http://www.smashingmagazine.com/wp-content/uploads/2010/09/magic-mushroom.fullsize.jpg
  121. 121 http://www.vart.io
  122. 122 http://blog.blue2x.com/
  123. 123 http://www.smashingmagazine.com/wp-content/uploads/2010/09/colt-gun.fullsize.png
  124. 124 http://www.smashingmagazine.com/wp-content/uploads/2010/09/colt-gun.fw_.png
  125. 125 http://www.smashingmagazine.com/wp-content/uploads/2010/09/nice-candle.fullsize.png
  126. 126 http://www.smashingmagazine.com/wp-content/uploads/2010/09/nice-candle.fw_.png
  127. 127 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dragonshield.fullsize.jpg
  128. 128 http://www.smashingmagazine.com/wp-content/uploads/2010/09/dragonshield.fw_.png
  129. 129 http://www.smashingmagazine.com/wp-content/uploads/2010/09/ironman2-helmet.fullsize.png
  130. 130 http://www.smashingmagazine.com/wp-content/uploads/2010/09/ironman2-helmet.fw_.png
  131. 131 http://www.qrayg.com
  132. 132 http://craigerskine.com
  133. 133 http://qrayg.com/learn/fireworks/
  134. 134 http://dribbble.com/players/craigerskine
  135. 135 http://twitter.com/craigerskine
  136. 136 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mac-mini.fullsize.png
  137. 137 http://www.smashingmagazine.com/wp-content/uploads/2010/09/mac-mini.fw_.png
  138. 138 http://www.smashingmagazine.com/wp-content/uploads/2010/09/apple-remotes.fullsize.png
  139. 139 http://www.smashingmagazine.com/wp-content/uploads/2010/09/apple-remotes.fw_.png
  140. 140 http://www.chopeh.com/
  141. 141 http://twitter.com/chopeh
  142. 142 http://www.smashingmagazine.com/wp-content/uploads/2010/09/chopeh-fireworks-icons.fullsize.png
  143. 143 http://www.davidnbrooks.com/about
  144. 144 http://www.fellowshiptechnologies.com/
  145. 145 http://dribbble.com/players/davidnbrooks
  146. 146 http://twitter.com/davidnbrooks
  147. 147 http://www.smashingmagazine.com/wp-content/uploads/2010/09/camera-phone.fullsize.jpg
  148. 148 http://www.smashingmagazine.com/wp-content/uploads/2010/09/northward-compass-site.fullsize.jpg
  149. 149 http://www.digitallabs.tv
  150. 150 http://twitter.com/digitallabstv
  151. 151 http://www.sofasurfer.eu/
  152. 152 http://www.digitallabs.tv
  153. 153 http://www.digitallabs.tv
  154. 154 http://www.sofasurfer.eu/
  155. 155 http://www.volatilebytes.com/
  156. 156 http://silver-pyrotech.deviantart.com/
  157. 157 http://www.smashingmagazine.com/wp-content/uploads/2010/09/neos-carbon2.fullsize.png
  158. 158 http://www.smashingmagazine.com/wp-content/uploads/2010/09/icompanion.fullsize.png
  159. 159 http://www.fireworksguruforum.com/
  160. 160 http://liandesign.blogspot.com
  161. 161 http://liandrolisk.deviantart.com
  162. 162 http://www.smashingmagazine.com/wp-content/uploads/2010/09/twitter1.fullsize.png
  163. 163 http://www.smashingmagazine.com/wp-content/uploads/2010/09/twitter2.fullsize.png
  164. 164 http://www.smashingmagazine.com/wp-content/uploads/2010/09/iphone-in-vectors.fullsize.png
  165. 165 http://abduzeedo.com/tutorial-creating-iphone-frame-fireworks
  166. 166 http://liandesign.blogspot.com/2009/07/iphone-in-vectors.html
  167. 167 http://www.smashingmagazine.com/wp-content/uploads/2010/09/iphone-in-vectors.fw_.png
  168. 168 http://grebtech.daportfolio.com/gallery/158600
  169. 169 http://grebtech.deviantart.com
  170. 170 http://www.smashingmagazine.com/wp-content/uploads/2010/09/spiral-notebooks.fullscreen.png
  171. 171 http://www.smashingmagazine.com/wp-content/uploads/2010/09/spiral-notebooks-3-colors.fw_.png
  172. 172 http://www.smashingmagazine.com/wp-content/uploads/2010/09/lepetitporc.fullsize.png
  173. 173 http://www.smashingmagazine.com/wp-content/uploads/2010/09/lepetitporc.fw_.png
  174. 174 http://www.smashingmagazine.com/wp-content/uploads/2010/09/safari-dockicon.fullsize.jpg
  175. 175 http://www.smashingmagazine.com/wp-content/uploads/2010/09/safari-dockicon.fw_.png
  176. 176 http://www.smashingmagazine.com/wp-content/uploads/2010/09/adobe-cs5-branding.fullsize.jpg
  177. 177 http://www.smashingmagazine.com/wp-content/uploads/2010/09/adobe-cs5-branding-icons.fullsize.jpg
  178. 178 http://www.smashingmagazine.com/wp-content/uploads/2010/09/adobe-cs5-splash-screens.fullsize.png
  179. 179 http://veerle-v2.duoh.com/blog/comments/the_new_cs5_branding/
  180. 180 http://rhworks.com/archives/2010/04/cs5-desktop-brand.html
  181. 181 http://blogs.adobe.com/jnack/2010/09/feedback-please-potential-webdrawing-features-in-photoshop.html
  182. 182 http://www.adobe.com/products/fireworks/
  183. 183 http://www.idux.com/2009/11/26/simulate-cleartype-text-in-adobe-fireworks-cs4/
  184. 184 http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/
  185. 185 http://www.isfireworksbetterthanphotoshop.com/
  186. 186 http://jasonsantamaria.com/articles/a-real-web-design-application/
  187. 187 http://www.smashingmagazine.com/wp-content/uploads/2010/09/photoshop-cs5-splash-screen.fullsize.png
  188. 188 http://fireworks.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  189. 189 http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  190. 190 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/

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

Advertisement
  1. 1

    Wonderful points altogether, you just gained a brand new reader. What may you suggest in regards to your publish that you just made a few days ago? Any positive?

    0
  2. 152

    Adobe Illustrator + Photoshop combo beats up any web design tool in comparison. It is mush faster & effective to create mockups in “Illy”, edit & fine tune them. By the way you can always pixel perfect UI and elements in “shop”

    0
  3. 303

    Thank you

    0
  4. 454

    Elcodigodebarras

    May 7, 2013 10:06 pm

    R.I.P – THIS WEEK ADOBE KILLS FIREWORKS –
    http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html

    …And there are some rumours about Fireworks release to Open Source…

    0
  5. 605

    The link: “all the comic strips” under Matthew Inman doesn’t exist anymore.

    0
  6. 907

    Thanks for sharing.

    0
  7. 1058

    Cameron Gallucci

    March 13, 2014 1:45 pm

    With it’s power, flexibility, & the combined simplicity of PS, AI, & ID all-in-one, FW has always been my most favored Adobe editing program. I don’t understand why they refuse to update it. At least they’re keeping it on the market.

    0

↑ Back to top