Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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.

Further Reading on SmashingMag: Link

…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 CS55

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 images6. 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 compliant7 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 better8 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 behind9. Fireworks also shows excellent compression options for the iPad and iPhone10 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 iPhone11 is easy and effective in Fireworks. There exist a variety of toolkits12 and rich symbol libraries13 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 extensible14 — this makes possible the developing of amazing extensions (such as TweetFire15, 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 Hogue16 is the Director of Information Design & Usability at Fluid17, 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 Twitter18 account.

{01} Golden Compass illustration Link

Golden Compass illustration19

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

{02} Quartz Watches illustration Link

Quartz watches illustration22

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

2. Matthew Inman Link

Matthew is a designer and illustrator who runs the highly successful comics, The Oatmeal25. He lives in Seattle, Washington, and uses Adobe Fireworks to draw all the comic strips26 (http://web.archive.org/web/20110810065019/http://keepinspiring.me/2010/01/interview-with-matthew-inman/27).

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

{03} 15 Things Worth Knowing About Coffee Link

The Oatmeal comic strip29

{04} 20 Things Worth Knowing About Beer Link

The Oatmeal comic strip30

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

The Oatmeal comic strip31

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

The Oatmeal comic strip32

{07} Duck in Coffee illustration Link

Coffee and Duck illustration (Fireworks)33

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

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

{08} XD Brownbag Poster series Link

Ryan Hicks illustration (Fireworks) width=39

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=40

{10} XD Beet poster Link

Ryan Hicks illustration (Fireworks) width=41

{11} XD Mackerel poster Link

Ryan Hicks illustration (Fireworks) width=42

{12} XD Salad poster Link

Ryan Hicks illustration (Fireworks) width=43

{13} XD Brownbag poster Link

Ryan Hicks illustration (Fireworks) width=44

4. Rogie King Link

Rogie King is the guy behind Komodo Media45. 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} rogieking.com personal site illustrations Link

Rogie King redesign illustration46

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

{15} Logo for rainboxx.de Link

Rainboxx logo (1)48

Rainboxx logo (2)49

Rainboxx logo (3)50

Created for Matthias Dietrich for his PHP development shop, Rainboxx51, 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 shot52, 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)53

Mad Mimi illustration (2)54

Mad Mimi (animated) illustration (3)55

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

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

5. Xiao Cai Link

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

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

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

Chinese painting style in Adobe Fireworks65

Chinese painting style in Adobe Fireworks66

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

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

6. Jon Hicks Link

Jon Hicks (hicksdesign.co.uk69, @hicksdesign70) 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 Software71, before returning to freelance work this year.

Firefox logo (Fireworks version)72

Firefox logo73

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

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

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

{24} Light Effects illustration Link

Light effects illustration (Fireworks illustration)83

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

Hilarious — this tutorial85 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 deviantart86.

{26} Vectorizer illustration Link

Vectorizer illustration87

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

{27} Anger Management illustration Link

Anger Management illustration91

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

{28} iCry illustration Link

iCry illustration92

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

{29} TakeOFF illustration Link

TakeOff illustration93

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 illustration94

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

{31} Cadillac illustration Link

Cadillac illustration96

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

{32} Mercedes SLA concept car illustration Link

Mercedes SLA illustration98

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

{33} VW Tiguan illustration Link

VW Tiguan illustration101

Created in Fireworks CS3, in 2010, and is all vector work (you may download the editable PNG102). 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 Twitter103 and Flickr104 (where he often posts Fireworks illustrations).

{34} Bears illustration Link

Bears illustration105

{35} Sealife illustration Link

Sealife illustration106

{36} Longboard illustration Link

Longboard illustration107

{37} Surprise illustration Link

Surprise Fireworks illustration108

{38} Darth Android illustration Link

Darth Android illustration109

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

{39} Magic Mushroom illustration Link

Magic Mushrooms illustration111

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 illustration112

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

{41} Candle illustration Link

Candle illustration114

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

{42} Dragon shield illustration Link

Dragon shield illustration116

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

{43} Iron Man 2 helmet illustration Link

Iron Man 2 illustration118

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

12. Craig Erskine Link

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

{44} Mac Mini illustration Link

Mac Mini illustration123

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

{45} Apple remotes illustration Link

Apple remotes illustration125

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

13. Pete Lacey Link

Pete Lacey127 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 Twitter128, too.

{46} Fireworks icons Link

Fireworks icons129

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

14. David Brooks Link

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

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration Link

Camera-Phone illustration133

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration Link

Northward Compass website illustration134

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

{49} DigitalLabs website design Link

DigitalLabs website design (Fireworks illustration)137

{50} Beck’s design concept Link

Becks design concept (Fireworks illustration)138

{51} SofaSurfer website design Link

SofaSurfer website design (Fireworks illustration)139

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

Neos Carbon 2 logo (Fireworks illustration)141

Created in Fireworks CS5, all vectors.

iCompanion (Fireworks illustration)142

Created in Fireworks CS5, all vectors.

17. José Rivera Link

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

{54} Twitter icons Link

Twitter icon #1 (Fireworks illustration)146

Twitter icon #2 (Fireworks illustration)147

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

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

{56} Spiral Notebooks illustration Link

Spiral notebooks (Fireworks illustration)153

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

{57} Le Petit Porcelet illustration Link

Le petit porcelet (Fireworks illustration)155

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

{58} Safari Dock icon Link

Safari dock icon (Fireworks illustration)157

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

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 Fireworks159

{60} The Adobe CS5 branding — the icons Link

Adobe CS5 branding - made possible with the help of Fireworks160

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

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

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 blog162 dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts163 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 Nack164 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 Fireworks165 (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 Styles166 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 Photoshop167. While Fireworks may be not better than Photoshop168, 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 application169 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)170

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

(afb)

Footnotes Link

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

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

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

      5
  2. 3

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

    2
  3. 4

    Darren Williams

    September 17, 2010 2:44 am

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

    -33
    • 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!

      21
      • 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 http://www.optimiced.com/en/portfolio/ 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 ;)

        -33
        • 7

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

          1
        • 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

          -4
          • 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.

            3
        • 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.

          15
          • 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!

            -9
          • 12

            Michel Bozgounov

            September 24, 2010 3:11 am

            Darren,

            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!

            22
        • 13

          Michel Bozgounov

          September 23, 2010 2:48 am

          Darren,

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

          19
        • 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.

          16
    • 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!

      3
      • 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.

        5
    • 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.

      5
      • 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.

        0
    • 19

      Trolling troll is trolling.

      4
    • 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.

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

        0
      • 22

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

        1
    • 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.

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

        1
      • 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.

        2
      • 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.

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

    0
    • 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.

      4
    • 29

      Fireworks was used to create the Firefox logo

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

    6
    • 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

      4
  6. 32

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

    Tommy (www.mannadesign.net)

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

      -4
      • 34

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

        4
      • 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.

        4
      • 36

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

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

    2
  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…

    3
  9. 39

    LOL
    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…

    0
  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”.

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

    6
  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?

    3
    • 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.

      0
      • 44

        Michel Bozgounov

        September 17, 2010 1:20 pm

        @Dan:

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

        3
  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

    3
    • 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.

      1
  14. 47

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

    0
  15. 48

    I’ll take time to trying FW !

    0
  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:

    http://www.manamedia.com.au/?page_id=1046 and have done for a few years now. These are just 2010 freebies.

    Thanks once again for an amazing article.

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

    1
    • 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.

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

    0
    • 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.

      3
    • 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.

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

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

    0
  21. 58

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

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

    0
  22. 59

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

    0
    • 60

      Michel Bozgounov

      September 17, 2010 5:33 am

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

      0
  23. 61

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

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

    0
  24. 62

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

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

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

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

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

    1
    • 63

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

      Fireworks is essential for any web designer.

      0
    • 64

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

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

      1
      • 65

        Michel Bozgounov

        September 20, 2010 12:33 am

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

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

        3
  25. 66

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

    1
  26. 67

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

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

    Here is how it looks like:
    http://www.youtube.com/watch?v=iStFlqBtAuU

    1
    • 68

      Michel Bozgounov

      September 19, 2010 12:20 am

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

      1
  27. 69

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

    0
  28. 70

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

    0
    • 71

      Michel Bozgounov

      September 17, 2010 5:50 am

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

      0
  29. 72

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

    0
  30. 73

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

    1
  31. 74

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

    0
  32. 75

    germaine caillou

    September 17, 2010 4:59 am

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

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

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

    1
    • 76

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

      0
      • 77

        Michel Bozgounov

        September 19, 2010 12:25 am

        Germaine might be right, you know… ;-)

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

        1
  33. 78

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

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

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

    0
  34. 79

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

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

    0
    • 80

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

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

      0
      • 81

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

        0
        • 82

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

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

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

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

          (sorry for my English)

          0
  35. 83

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

    0
  36. 84

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

    0
  37. 85

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

    0
  38. 86

    Awesome article!

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

    Thanks for getting this article here, Michel.

    0
  39. 87

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

    0
  40. 88

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

    Only a few problems are not yet solved:

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

    – you cannot import brushes from Photoshop (that sux)

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

    Otherwise Fireworks is soooo gooood ;)

    0
  41. 89

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

    0
  42. 90

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

    0
  43. 91

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

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

    > With Fireworks you can make websites…

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

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

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

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

    2
    • 92

      Michel Bozgounov

      September 17, 2010 7:41 am

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

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

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

      Thanks again! :-)

      1
  44. 93

    When it comes to ui design, Fireworks wins.

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

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

    1
  45. 94

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

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

    0
  46. 95

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

    0
  47. 96

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

    0
  48. 97

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

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

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

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

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

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

    C

    2
  49. 98

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

    2
  50. 99

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

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

    2
  51. 100

    You should be using and knowing both, and Illustrator as well.
    Which makes the “prettiest pictures” is not really the point, you’ll do that best in whatever you know the best.

    Fireworks speeds up production work with websites tremendously, not sure why so few ever really touch on that point. It’s amazing for mockups and wireframes, and a lifesaver when you have to produce multiple design templates for one site.

    1
  52. 101

    I like the suggestions for improving Photoshop, but why not leave Photoshop for what it was meant to do. Instead of blurring the lines between software, give designers a definitive choice between what they want to get out of a product. There are many people that use Photoshop for building web sites, and then Illustrator for making the graphics and that’s perfectly ok. But, for Adobe to introduce a product specifically tailored to meet web designers needs is wonderful and should be supported. Great article btw, I will definitely take crack at Fireworks.

    0
  53. 102

    Good to see FW get some love around here :)

    2
  54. 103

    Anyone know where I could find some beginner tutorials for Fireworks? I have always worked with Photoshop, Dreamweaver, Illustrator and Flash but never Fireworks. I feel like I have been missing a lot.

    1
  55. 107

    One thing I really love about FW is because it is primarily vector-based, you can upscale your mockups. This is great for clients who want to use images of their site in print applications. Screen shots can lose quality pretty quick at 300 dpi, but FW scales beautifully for print.

    1
  56. 108

    Yawn. Comment bait. “Remember that article we posted about fireworks and how much traffic and comments it got?”

    “Yeah”

    “Lets do that again”

    “Okay, good plan”

    I create better stuff with photoshop, I’ve been using it for far too many years to remember, Its a much more powerful graphics editing application, and I don’t know about you, but my web sites tend to include graphics.

    -3
    • 109

      You make no sense idiot.

      1
    • 111

      Fireworks is the tool for screen design and user interfaces. Things are achieved much easier, using less elements and optimized in a way only fireworks can achieve. If you want to create a graphic includinh brushes, photoediting and so, ok, go and use photoshop… If you are to design a user interface, dont have a doubt, Fireworks rules.
      Im a photoshop and fireworks user. I choose each one depending on the project.

      3
  57. 112

    How do you use vectors in Fireworks? I didn’t know you could make things using vectors in there?

    0
    • 113

      Bezier tool. Easy as you cannot even imagine. Intuitive and accurate.

      0
  58. 114

    Thank you for this article. Really interesting. I should try out Fireworks for my next webdesign.

    0
  59. 115

    Thanks for sharing, I think I’m going to give it a try on my next small web project.

    0
  60. 116

    Really like FW for Webdesign since it has more control over objects and you can work easier pixel by pixel. But this article lacks the bugs Fireworks has/had. I remember CS4 wich always messed with the Text. Or its weird behaviour of fucking up some vector objects. The list goes on and on but i think with CS5 they improved it really and by now its actually really good. Rightnow its the Software i use most often.

    0
  61. 117

    Whimsy Collective

    September 17, 2010 8:22 am

    It’s September 17, 2010, how many prior releases has Fireworks had folks?

    Smashing Magazine I haven’t seen a in depth tutorial on web design especially layer structure, web layer structure, best practices for exporting css + html + images, and name convention and alike.

    Nonetheless, thank you for sharing a few tutorial links and Illustration work.

    Seriously, need a breakdown on the best practices of exporting, excuse the belaboring comments.

    0
    • 118

      Michel Bozgounov

      September 17, 2010 1:28 pm

      If all goes according to Plan, you’ll see more in-depth Fireworks tutorials on Smashing Mag pretty soon! :)

      0
  62. 119

    No No Nooooooo Fireworks is a bad program!

    Please stop making articles about how great and wonderful Fireworks is… before you know it Adobe will find out and up the freaking price!!!

    0
  63. 120

    Christopher Ross

    September 17, 2010 8:59 am

    I use Fireworks for most of my work, it’s a perfect vector tool for laying out powerful websites etc. The only time I flip to Photoshop is when I need to do photo editing work these days :)

    2
  64. 121

    Nice round-up, write-up, Michel. Interesting to read that CS5 marketing materials were conceived in Fw.

    0
  65. 122

    It’s like comparing Rollers Skates and Roller Blades. Who cares any more. ( : I used to be anti-Fireworks now I just don’t care as long as you can produce good results shut it and use your app of choice. I’ve learned it doesn’t matter what app you use… a designer is known by his work not his tools… that being said… PHOTOSHOP FOREVER! lol seriously who cares. Nice Article btw.

    -1
  66. 123

    I switched from Photoshop to Fireworks about 4 years ago. I never looked back.

    For the work that I do there is no comparison in the speed and flexibility a true vector environment like Fireworks can offer.

    I pop in and out of Photoshop every once in a while when I need that specific toolset … but even that is not too often. I always get weird looks when people look over my shoulder and ask what tool I’m using. Perplexed.

    I like that.

    It’s a shame the examples you displayed were so heavy on illustration. I use Fireworks everyday for web and mobile interface design. Specifically interaction and visual design.

    Now if we can get Adobe to truly support it. I’m still pissed they neglected it in CS5.

    1
  67. 124

    I have read the whole article and haven’t seen any “Fireworks is superior to Photoshop” affirmation, and you are still saying you agree or disagree to that?

    0
  68. 125

    I like reading about programs I don’t use, just in case there’s something that will make my life easier.

    In the case of Fireworks, I just don’t see why I would switch from PS and Illustrator. Not that I begrudge Fireworks or those who use it, they are obviously more efficient at the program than I would be.

    My workflow is so efficient in PS and ILL that I have very, very few problems. It would be kind of foolish to switch now without concrete benefits.

    Still, if I have a personal project or get some time to play around with it I’ll probably try to work up something just to see if it’s something that I could be using effectively.

    0
  69. 126

    What I don’t understand exactly: you’re writing about how nice fireworks is for web design especially UIs, Layouts, Prototyping etc. but then you start presenting graphics you’d do with Illustrator, first. I mean, sure, you can do a lot of illustrator stuff with fireworks as well, but thats not what fireworks was made for. You can’t say that PS wasn’t made for Webdesign while you want to show that Fireworks can displace Illustrator sind some cases…
    I am working with Fireworks for many years and it’s great for webdesign/layout/prototyping, but as you should use Photoshop for Graphic stuff and not for webdesign, you should use Fireworks for Layouting etc. and not for illustrating stuff or complex vector graphics, because thats what illustrator is made for.

    0
  70. 127

    Pete Skenandore

    September 17, 2010 11:45 am

    Just re-discovered FW for the first time.

    LOVE IT.

    1
  71. 128

    I totally agree… Fireworks is the best tool to come across for both web and illustration…

    You may want to check my portfolio — all sites are made in Fireworks http://mhb.carbonmade.com …and also check my article at adobe: http://www.adobe.com/devnet/fireworks/articles/web_20_elements.html

    1
  72. 129

    Excellent article, I’m about to purchase Design Premium CS5 and you’ve just transformed the program I was least excited about to the one I’ll load up first!

    I think one of the interesting things this brings up is how all the Adobe applications cross over and how they become more closely linked.

    We buy them as a suite now, I wonder how long before we tell the program what the end format and use will be and it loads the appropriate tools, rather than the user selecting an application for a task.

    0
  73. 130

    I like Fireworks a lot for web design, I see a lot of potential but it still feels rough. The biggest complaint I have is the way masks are handled, which is way less intuitive and you only get one kind with Fireworks.

    Some of the fine detail control doesn’t seem to be there either for things like borders; at least not the way they are in Photoshop. Now, people may say its not meant to be used like Photoshop, but Photoshop tends to have finer controls that can be more easily replicated in html & css.

    If Adobe continues to heap on the love, then maybe it will get to the point where one can forego Photoshop for this, but at this time, I don’t think Fireworks is there.

    0
    • 131

      Michel Bozgounov

      September 17, 2010 1:40 pm

      @Tami:

      Considering masks, here’s a short (but detailed) video tutorial that may help you see that masks in Fireworks are actually pretty flexible and powerful:
      http://www.adobe.com/devnet/fireworks/articles/masking_preso.html

      About borders — what do you mean by “borders do not have finer controls like in Ps”? You mean, stroke on vector objects? In Fireworks, you have full control on stroke, including size, type of stroke (pencil hard or soft, normal, dashed, dotted, etc.), inside/center/outside, and much more. If you elaborate on this subject some more or give me a good example, I’d be glad to take a deeper look into it! :)

      2
  74. 132

    I guess Smashing did not learn their lesson from the “Group Interview: Expert Advice for Students and Young Designers” article back in February (https://www.smashingmagazine.com/2010/02/17/group-interview-advice-for-students-and-new-designers/).

    Once again, all the artists featured here are men. Final score: Men=19 (or 21 if you count all three men on the Adobe team), Women=0.

    0
    • 133

      Michel Bozgounov

      September 19, 2010 12:56 am

      @Courtney:

      And maybe next time you’ll blame SmashingMag for not featuring in a balanced manner designers from all races?? Or designers from all 5 continents? ;-)

      Also, if you can send me a list of 19 (or 21) female designers that you know are using and/or prefer Adobe Fireworks in their daily design work, I’ll happily include them in my next article for Smashing Mag! (and I am not even joking!) Now, that would be really cool, instead of preaching about the equality of races in your comments… :)

      2
  75. 136

    Thank you, Michel, for posting using my illustrations for your article. Well, I have been using Fireworks for years now and I do have Photoshop and Illustrator. Well it’s not about comparing the two softwares to find out which one is better. They both have their own strength.

    I personally use Fireworks for my vector iIllustrations and for Web design. Photoshop is a great tool for bitmaps, we can’t go wrong with this. But it does not handle vectors, when Fireworks can do both. And the fact that it allows you to load some PS plugins is absolutely great.

    Before jumping to conclusions and start fighting on which one is better of not, you should try the software. As a freelancer, I enjoy working with a tool I am perfectly at ease with, and Fireworks is that tool: not hard to learn, not hard to work with and the transition between Fireworks, Flash and Dreamweaver is so easy :).

    I know that nowadays the standard for Design is technically Mac and Illustrator! Well, for me it’s PC and Fireworks. There is nothing somebody can do with Ps or Ai that can’t be done with Fireworks :).

    Go try the software, you have a 30 days trial! :)

    1
  76. 137

    I switch between Fireworks and Photoshop (and Illustrator for that matter) back and forth, depending on the task at hand. A webdesigner should use the best possible tool for his/her work just as a carpenter doesn’t build a house just with a hammer. And for webdesign Fireworks is better suited than Photoshop. But you don’t have to struggle – if you know Photoshop, Fireworks doesn’t take much to learn. It’s fun!

    0
  77. 138

    I recently made this vector image entirely in Fireworks CS5: http://roeltz.deviantart.com/art/Sad-Girl-175630001 (But being honest, I used the same toolset available since FW MX).

    I’m a big FW fan, and I use it for all my graphic needs.

    1
    • 139

      Michel Bozgounov

      September 19, 2010 1:09 am

      Wow, Leonardo, this is an amazing illustration!!

      Looks like I missed someone’s great Fireworks work, after all! ;)

      Do you also use Fireworks for Web design tasks?

      0
    • 140

      WOW, Leonardo your work is great. At first your design was deceiving me to believe that its a picture rather than a vector.

      As far as PS vs FW debate is concerned, I think both are great products. I use FW for interfaces and vectors and PS for bitmaps. Although, I use PS for websites as well because sometimes slicers don’t know (or don’t have) how to use FW.

      Btw very good article Michel, I would expect more articles on FW as well.

      0
  78. 141

    Every time this kind of article will cause a debate. I like PS and FW both, and what you really need to know is how you could use them to achieve you purpose better in different situation.

    0
  79. 142

    I think the Bezier Pen Tool in Fireworks (CS5 for OSX) is the best thing about FW. It’s always been better than the Pen in Illustrator or Photoshop — probably because it comes from Freehand code.

    It just works better, more precise, easier to control, has a more intuitive feel than either Ai or Ps, of which, along with Freehand and Fw I’ve used for the better part of 16 years.

    Fw also has some great effects and blending modes not found anywhere else. I like the automatic color swatch palette creation from an image — it makes experimenting with limited palettes very fun: something kuler and the Color Guide panel in Ai could very much benefit.

    I think the thing that hurt Fw so much was it’s terrible CS4 version — it was totally unusable on every Mac I ever tested it on (a lot of Macs!)

    Fw CS5 is totally awesomely stable and very fast/responsive on my MacBook Pro. I think I would use it even more if the keyboard shortcuts were more familiar and I knew my way around it as well as with Ps and Ai.

    1
    • 143

      The bezier tool is exactly why I don’t like Fireworks. Illustrator’s has always been so much more refined to me. Until Adobe drops the old Macromedia approach, I’ll still with Ai/PS.

      Smart Objects let you have the best of both worlds in Photoshop. Powerful raster editing with Illustrator vectors editable at the touch of a button.

      0
  80. 144

    I started web design with Fireworks and attempted later to switch to PS and the transition was not easy, just because more and more were into PS.

    But admittedly I had to come back to FW, it is faster and much much quicker with certain tasks than PS. So I only use PS for image editing and any other web design stuff using FW.

    I love Fireworks and hope Adobe will not drop it in the future.

    Additionally, PS and FW have different purposes and strengths, so it’s just better if you know how to use both and to me that’s a wise decision I made.

    Long live Macromedia Fireworks (now Adobe Fireworks)! ;)

    By the way, can anyone put a list of websites done with Fireworks other than the few ones in the post?

    1
  81. 145

    When I was studying last year I was required to use Fireworks for a couple of projects, and it was HELL.

    Using the program is fine (for the most part), but it is incredibly unstable to put it lightly. I had lost many hours of work due to it constantly crashing on me and in the end I had to use Photoshop and import the psd’s into Fireworks.

    And personally I found that the results I can produce with Fireworks aren’t as of the same quality than when I use Photoshop or Illustrator (or both together).

    Just my 2¢

    0
  82. 146

    Andre Reinegger

    September 17, 2010 10:36 pm

    Thanks, Michel, for another article about Fireworks. There are not that much articles about “Fireworks for webdesign” out there than “Photoshop for webdesign”. I always take a look into books and articles about PS for the web and I always have to laugh. People who really have time and money to waste where writing articles like these. They explain complicated ways to achieve results, which are made in Fireworks with one single click of the mouse.

    It is always the same. If someone writes an article like this, people start to discuss about Photoshop vs. Fireworks. Don’t discuss about that, if you never really tried to use Fireworks! I have never read articles about “Photoshop for print layouts”. Why not? Because it is clear that you have to use InDesign for magazine layouts! But why? You can also use Photoshop for this! Everybody know that this would be stupid, because it is very ineffective. Same for using Photoshop for screen layouts.

    About the article from John Nack “Web features in PS”:
    Don’t you have good ideas for new photo editing features??? Sure you can edit video, use 3D elements, and so far. Why not adding webdesign features?
    1. The program is getting more and more complex and complicated, the more features it gets. You will have even more palletes and tools to choose from.
    2. Photoshop is for editing (images, video and even 3D) not for layouting.
    3. To use Photoshop for the web layouts, you don’t only have to add the web drawing features, you have to add and steal all the features of Fireworks, like pages, masterpages, styles, smart-grid, symbols, 9-slice scaling and so far. After that Photoshop will be usable for web layouts, but then Photoshop will be also blown away with too much features.

    I hope to see more of these articles about Fireworks, but I would prefer to show screen designs made in Fireworks, than vector- or logo designs which can also be made in Illustrator.

    I have recorded a screen cast to show the main benefits on using Fireworks. After that you will never compare PS with FW: http://vimeo.com/12332496

    1
    • 147

      Dude, you’ve done a fantastic job of showing how to use Firefox as a web design work flow tool. Excellent work – thanks for sharing.

      I typically use Illustrator for layout work, and photoshop for raster editing, and pspad text editor for putting my websites together (I really don’t like dreamweaver to be honest). But now that I’ve seen how quickly I can throw together sites with Fireworks, I think I will be shifting to Fireworks for most of my workflo – looks so much quicker.

      0
  83. 148

    I moved from Photoshop to Fireworks a long time ago due to the .internet happening.

    I think the core things to “promote” about Fireworks if you must, are not image editing capabilities, image compression or how good it may be with vectors.

    The core benefits to a web/interface/screen designer is the total workflow and overall speed and usability of the interface for its intended use. Macromedia had a different take on interface than Adobe has and although over the years they both borrowed from each other. Fireworks, Flash and Dreamweaver have an intuitive immediacy about them that Photoshop doesn’t. This doesn’t mean Photoshop users will find it quicker. They won’t.

    What am I getting at: After using Photoshop for years and switching to Fireworks for web design, (I’m still proficient with illustrator, Photoshop, etc) and after 10 years of professional experience with Fireworks and its shortcomings, I believe that there is no other software out there that can compete for workflow, speed, quality of output, overall usefulness and speed of interface for web based design.

    2
  84. 149

    Very nice article :)

    I started using FW since Macromedia Fireworks 4. The very reason I started with it was the ‘panels’. Everything you need is just around the corner. No.1 of the best is its ‘Properties panel’.

    0
  85. 150

    Dude, could you fix the name in Mike Taylor?… my name is Jose Angel Rivera!! Mike is a friend of mine that also posted in fireworksguruforum.
    My deviant is also there >> http://liandrolisk.deviantart.com , it has my real name

    Thanks!

    0
  86. 151

    So happy to see you guys giving recognition to my favorite design program. I’ve been using it back when it was still a Macromedia product. The new vector tools in CS4 made me fall in love with Fireworks all over again.

    0
  87. 152

    Photoshop – photo editing, Fireworks – web design. That’s how I roll.

    Neither is perfect for the job, read this – http://jasonsantamaria.com/articles/a-real-web-design-application/

    0
    • 153

      Michel Bozgounov

      September 19, 2010 1:27 am

      Yes, neither is perfect; but undoubtedly, Fireworks is much closer to Web design, compared to Ps…

      Btw, Jason’s article is linked in the article you have just read! ;)

      0
      • 154

        Oops! Sorry I came for the flame war and skipped the article :) I will read it though as I’m planning to follow up on my own blog :)

        0
  88. 155

    Good to see so much Fireworks love here! Here’s a few more reasons to drop Photoshop for Fireworks for web mock-ups.

    0
  89. 156

    Awesome post, thank you heaps!

    0
  90. 157

    I’ve been using Fireworks way back in the old days, my first and favorite graphics program. Back then, there weren’t a lot of designs or tutorials in Fireworks, but seeing them now increasingly visible to the web community makes me happy. =) Thanks to Michel for posting my works.

    View my Adobe Fireworks blog here > http://www.blue2x.com

    0
  91. 158

    Nice article.

    I love Fireworks and always will, ever since its days as a Macromedia product it has always been good for web design. I started web design with it and it keeps getting better.

    Although I must say Photoshop is a great tool and I sometimes find myself using it, however I achieve more in less time with Fireworks when compared to Photoshop.

    0
  92. 159

    I would love to start creating my layout using FW, but since I already used to PS, I’m having some hard time with FW, such the layer properties, in PS I can change the image’s color on that layer easily with color overlay, in FW, I somehow couldn’t find such option. What I do now, is just using the Hue/Saturation option, still hard to achieve the same effect.

    Is there any tutorial on creating website using FW?

    0
    • 160

      Michel Bozgounov

      September 19, 2010 1:31 am

      There exist thousands of tutorials on using Fireworks, please use Google to find some! ;)

      And if you have some very specific questions on using Fireworks, the Adobe Fireworks forums might come to your rescue!

      0
  93. 161

    I use FW for prototyping designs for clients, it’s a very god tool. I think I might abandon PS and use Fireworks on my next project.

    0
  94. 162

    I’ve been using Fireworks for web design and drawings since version 4, on that time I hated Photoshop but truth to be told the text rendering problem forced me to use Photoshop and stick with it, now I rarely use Fireworks but today I did actually, before I read this article.

    Support for foreign languages like Arabic doesn’t even exist in Fireworks that’s the second reason I left FW for PS.

    0
  95. 163

    Adobe Illustrator 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 Illustrator 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 with multiple artboards and even visual assets from Flash. And then in the other direction, from Fireworks, you can transfer graphic assets to Photoshop, Flash Professional and Flash Catalyst. You can combine the Illustrator speed, vector power, Pages/Master Pages, Symbols and ease-of-use together with the options of Photoshop and achieve all-round results, faster and with great flexibility.

    In my personal opinion, there exists much more than 7 reasons to prefer Illustrator to Fireworks. While Illustrator may be better than Fireworks, when it comes to designing for the Web and screen, it is also faster, easier and can produce results as good as those that cannot be achieved in Fireworks and other relict graphic design programs.

    Loads of blabla – generic statements with product names being replaceable.

    0
  96. 164

    What an amazing overview! Some of the artists in this post are truly skilled at designing in Fireworks. Plus I never knew the Adobe CS5 branding was mostly created using FW!

    Learning something new every day.

    0
  97. 165

    Christopher Anderton

    September 18, 2010 10:27 pm

    I have to say that I use PS for the reason that I have my work environment set up and customized delux (brushes, patterns, grids, styles, actions, swatches and so on). I tried FW for a long time ago, and it felt like a stranger to me.

    But, after reading this. I will make another shot at FW. Knowledge is good isn’t it?

    0
  98. 166

    Hi all, can somebody tell me what’s the main purpose why Adobe Photoshop is created, and why Adobe Fireworks is created?

    Thanks!

    0
  99. 167

    For web work I began with FW, then moved on to AI, before settling with PS. Mainly due to working with developers that can only use PS.

    AI fits like a glove, you don’t have to think about it when designing, but it’s a pig to develop final web graphics with.

    PS is pixel perfect but restricts my intuitive design process. Fiddly to edit and layer tastic, but saves time on the final build.

    FW is the best of both worlds, but I’ve never really considered it fully. Mainly due to the habits of my dev team. But I’d be happy to switch back.

    0
  100. 168

    I really want to feel comfortable using Fireworks. I’m currently able to do everything I need using Photoshop and my favorite text editor, but I’m open-minded and always interested in becoming more efficient in how I work.

    When I began designing for web, I used Photoshop and ImageReady heavily. When Adobe acquired Macromedia and dropped ImageReady from the lineup, I tried switching to Fireworks but did not find the tools and interface to be intuitive.

    Can someone recommend a link to a good primer or “getting started with Fireworks” post?

    0
  101. 169

    I never been able to fully use and understand Photoshop so I got used to working with Fireworks. I wasn’t too happy when Adobe bought Macromedia but I can see they are doing a good job with the program. For example, this layout was done entirely with Fireworks.

    0
  102. 170

    Reading a few of the comments above, I think people need to quit making blanket statements like ‘Photoshop is far superior’ without qualification. Each application has its own strengths and weaknesses.

    I personally use Photoshop as my main web/screen designing tool, simply because that is what I know and I have not yet learned Fireworks. However, when I need to do something (i.e. simple GIF animations) that I know is easier to accomplish in Fireworks – even at my lack-of-skill level – I will use that. Use the tools that you know how to use efficiently, and when you have learned to accomplish a task faster using another tool, then switch.

    To simply state that one application is better than another without justifying or qualifying that claim is just an illustration of your ignorance.

    1
  103. 171

    I am a long time user of Fireworks, I mean we are talking back to it’s first version when Macromedia was just getting thing going…

    There is no substitute for this application and I recommend it constantly to those who are stuck in PS…

    The bottom line for me is if I could only have one application to design with, it would be Fireworks by a landslide…

    Cheers!

    -rob

    0
  104. 172

    I have been using fireworks for 10 years, and I can say that Fireworks is really more flexible than Photoshop.

    For example; when I need to redesign some parts of my designed model, I do it more easily than with Photoshop.

    With FW I do Web designs, logos, designs for animation …

    I really love Fireworks! :-)))

    1
  105. 173

    I also had recently made a Photo Manipulation in Fireworks, can be seen here http://www.facebook.com/dreamsmedia

    I use Fireworks for everything that I do except for Print Work. Since am using a old version of Fireworks, so far have gotten used to its buggy nature.

    0
  106. 174

    Chris Nankervis

    September 19, 2010 7:52 pm

    Were that many examples really necessary?

    -1
  107. 175

    Have been used Fw since version 4. There also have been times when I used Ps for DTP.
    But Fw always gave me the fastest way to achieve what I needed without any lack of quality.
    Lot of my friends considered me a fool for using only Fw and not Ps, but I have never had any disappointment with it!

    So, great post, and thank you for making the differences in it!

    0
  108. 176

    Sooner or later they’re all come together and end up in one application.

    0
  109. 177

    As both Photoshop and Fireworks user for more than 11 years, I must admit that Fw is the way far better than Ps on web graphics and quick site prototyping.

    I can see Adobe have been pushing Ps more and more towards Web since version 5.5. But still, Fireworks has more flexible and intuitive tools designed specifically for web.

    Please don’t get me wrong, I have never stopped using Ps, in fact, each time I need to do some complicated bitmap manipulation, I have always Ps opened beside Fw. To me, Ps is good at its job — image manipulation and retouching. Fw is more like web version of Freehand — where you can quickly build your layout and easily modify/improve it, and finally publish it in HTML.

    Some extra words — IMHO, learning new tools and technologies is also a fun part of being a designer. For those who don’t like Fw — pls, just give it a try, take your time, and I guess eventually you’ll like this lovely tool. :)

    Even for image manipulation, Ps is just the most popular tool but not the most advanced one. Back in old days, Live Picture on Mac, Imaginator on PC, Eclipse on SGI and Quantel PaintBox were much more powerful and efficient than Ps. But they didn’t gain a large user group, and most of them were too expensive or depended on very specific hardware. So they are finally out of game — which is a sad thing…

    1
    • 178

      I totally agree. I’m using Fw for 3 years after using Corel Photopaint (8 years ago) and Photoshop later. Fireworks is the best for web designing. Photoshop is the best tool in the market for bitmap manipulation.

      0
  110. 179

    I loved the article. I pretend to be a web designer a lot of the time, and Fireworks is what I live by for that. About 90% of the graphics I produce are in FW. I use Illustrator if I want to convert an image to vectors, and Photoshop for effects I just can’t find elsewhere.

    It makes sense for me to favor Fireworks for web; it’s meant to support web graphics! Photoshop is meant for Photos. And yes, they both can cross over those lines quite nicely, but using Photoshop for web design is a bit like using a semi-truck as a commuter car.

    0
  111. 180

    Stripeyhorse creative

    September 20, 2010 11:44 am

    Great article. I have never used FW. Never felt I had a need to, but after reading this I might give it a go.

    0
  112. 181

    So.. Adobe Fireworks is mini Adobe Suite? :D It can do bits of everything!

    0
  113. 182

    I switched to FW during the CS3 era after being longtime power user of PS for UI and visual design and have barely looked back. Made the jump to FW CS4 which was just plain unusable as it always @#$% the bed at the worst times and almost went back to PS fulltime.

    FW CS5 on the other hand is solid, stable and closer to what the app could and should be. These days my ratio is 95% FW, 5% PS for the majority of my digital design tasks. For system oriented screen design, there is no substitute.

    0
  114. 183

    Fireworks has always been my default image editor. I’ve been using since Macromedia Fireworks 3. There used to be a site called solar dream studios where Fireworks tutorials like aqua button, 1 pixel bevel, water drop were published.

    Fireworks a great fast tool for web graphics. All of the designs I did in last 7-8 years were made in FW. I never even tried to do Photoshop because the things I needed were very well doable in FW.

    Nice to see this article to unleash the possibilities of this great app!

    0
  115. 184

    Hi, I love fireworks, this is my first art: http://yfrog.com/1sevcwj
    — you like?

    0
  116. 186

    Using Photoshop to design Web interfaces and layouts is like using a sledgehammer to drive a nail. Yeah, it works, but the tool you’re using is over-sized in proportion to what you are trying to do — drive a nail. But if a sledgehammer is all you have, then, it’s all you have.

    Fireworks is great for what it was designed for — creating Web layouts and graphics. It is not a powerful photo editor. That’s what Photoshop is for. 99% of the time when you’re creating stuff for the Web, it doesn’t need to be fancy and complicated with 8 million effects, so Fireworks is great. The end user is not going to notice the difference between the drop shadow in Fireworks and Photoshop on a website.

    I use Fireworks for Web layout mockups and graphics. I use Photoshop to edit photos and create “artsy” graphics and anything that will be printed. Any Web designer worth their salt should know how to use both pieces of software appropriately.

    3
  117. 189

    Fireworks is the “InDesign” for web/screen designers. I use Photoshop, too, but most of the time Fireworks.

    “(although for this to happen, Fireworks would need much more intensive development from the part of Adobe…)”

    Word. It’s buggy and slow … :-/

    0
  118. 190

    I have always wondered about the use of FW. Even after reading this article, i am not really convinced.

    If vector graphics is the main advantage of FW over PS, then i will use AI for that. Anyway there is no harm in learning new tools.

    -1
    • 191

      Michel Bozgounov

      September 22, 2010 4:15 am

      Illustrator lacks many major features that would make it the perfect tool for Web design:
      — lack of bitmap editing tools — you cannot even crop an imported bitmap in Ai (the bitmap tools in Fw are much better);
      — vector tools in Fw are simpler to use, yet as powerful as those in Ai;
      — you don’t have Pages/Master Pages in Ai;
      — gradients are much more limited in Ai (compared to Fireworks gradients);
      — you cannot export a clickable CSS/HTML prototype in Ai (something that Fw does since v. CS4, and v. CS5 supports even multi-page export);
      — text engine in latest Fireworks CS5 is much more suitable for Web design (multi-block text selection and simultaneous styling, one-step undo’s/redo’s in text editing mode, F&R for font families in entire document, etc.)
      — Fireworks has many extensions built for it, that make development for Web even easier and faster.

      But, the major advantage for using Fireworks is that it not only combines the most useful features of both Ps and Ai, but also has some unique features, related only to design for Web and screen.

      I suggest you read more about Fireworks, and try it for yourself, before jumping too hastily to the conclusion that there are no advantages in using Fw for Web design! ;)

      2
  119. 192

    I’m an MFA designer, a full-time design professor and own the oldest web design studio in South Florida. My career was built in Fireworks. Your gallery doesn’t even scratch the surface of its potential as the world’s greatest design tool.

    The idea of jumping between applications to edit bitmaps and vectors as if they belong in different worlds creates an untenable work flow.

    If Fireworks goes, I’ll quit the business.

    3
  120. 193

    I hadn’t bothered about Fireworks before, I always thought of it as “just another vector program” and was happy enough with Illustrator.

    But you know what? While I’ll always use Illustrator (I’ve been doing so for 8 years) I’ve seen many advantages in combining it with Fireworks, in fact, a perfect work trio for me is Photoshop + Illustrator + Fireworks (thank God for the place/import feature!). I know I would be happier using just one software, but since this is rather impossible, at least now I have all the tools that I thought were lacking in Ai (still need to explore more what Fw has that Ps doesn’t) using this combination.

    1
  121. 194

    I am a web developer with very good skills in designing elements for websites. I choose Fireworks over Photoshop for creating buttons, backgrounds, gradients, etc….all the things you see in css sprites. PhotoShop is just too heavy; and you can work faster with Fireworks.

    In my opinion, PhotoShop is for the heavy designer….people in the print, marketing, graphics, world. And people who use it to make mockups for websites, then export it to css/html. (99designs.com comes to mind) While I think that is the wrong way to make a website, it works for them. Fireworks is for the web designer/builder/developer that needs to do small design jobs (buttons, backgrounds, sprites, etc)

    0
  122. 195

    I love Fireworks and without it I can do nothing in web designing…

    0
  123. 196

    I have to agree Michel, I have been using Fireworks since 2003 and much prefer the versatility. The images and CSS export, while it may be ‘close to compliant’ leaves much to be desired, but that’s not a big deal since I hand-code designs regardless.

    0
  124. 197

    I’ve been using FW for everything for the past 4 years now. I use it to create all our company website concepts, designs, layouts, logos & branding, advertisements, illustrated characters etc. etc. etc. — everything! :)

    0
  125. 198

    I’ve always had a hard time pitching the benefits of Fireworks after 5 years of being an avid user. One of the key things I use it for is speed. I can make a quick sketch of a concept in FW and have it approved by the client before spending hours to perfect it in Photoshop (and the reason I would do the final in PS is that it’s headed to the printer).

    I know FW doesn’t do Pantones, but could you send a FW piece directly to print if it is 4-colour process or digital colour copy?

    0
  126. 199

    Use whatever tool you’re comfortable with.
    Don’t stagnate on your knowledge of tools.
    Push programmers to build better tools.

    0
    • 200

      Agree with all this you say, but I’d like to make a slight difference or highlight the fact that, even though it is great to use whatever tool you feel comfortable with, it is always better to use the right tool for a given task, specially if you are working in teams.
      I receive all the time psd files when designing software, or apps from other designers in the same company but different offices, and I want to cry when I see the amount of files or the amount of time I waste trying to work this in photoshop.
      While it still does the job, this could be done a better way for this particular tasks.
      And the best way is to use the right tool for each task regardless of your tastes and comfort, which links with what you said about “do not stagnate on your knowledge of tools” which is one of the main problems I think there are with many designers wanting to open Fireworks.

      0
  127. 201

    Alvaro Carrilho (Portugal)

    September 27, 2010 1:09 am

    This topic remind me a old discussion about PC and Mac or better, Illustrator Vs. Corel Draw – (I’m both PC/Mac and Corel/Illustrator). I’m mainly a print designer and Fireworks is not my tool. I tried to work with it (on the early Macromedia days) because i was aware of the raster/vector capabilities, but soon I realized that there was no CMYK color mode.

    0
    • 202

      Michel Bozgounov

      September 28, 2010 10:20 pm

      There is no CMYK mode, indeed — this is an application that is for Web and screen design only, so it doesn’t need CMYK colors, only RGB.

      0
  128. 203

    Okay after reading the article and all the comments this far, I am downloading FW via torrent.

    -2
  129. 204

    Excellent article. Please keep up the good work!

    0
  130. 205

    Why not embrace both applications? I combine both in all my web work. I primarily use Fireworks for UX/UI design and Photoshop to sex up the overall visuals.

    1
  131. 206

    Thanks for the great article, hope to see another like it soon.

    0
  132. 207

    Hello Michel, I’m Jeff from Chile.

    Excellent article about FW! I Love FW since Macromedia version; by the way in my country Adobe Fireworks for the Digital industry doesn’t exist, and that makes me sad because all people think’s that Photoshop is the best tool for web design. In my university period I tried to promote the software and I got some respect and good feedback. Now I want to make a hispanic community about Fireworks articles and tutorials, because Chile and hispanic countries don’t have a hispanic community about FW and I think that is the big reason of the ignorance of the app in Latin America. Really thanks for sharing this type of article that makes a motivation for me to promote the software, just for love for Fireworks.

    Saludos desde Chile amigo !

    0
  133. 208

    Thank you for this article. I’m web designer and I’m using Fireworks since its first version. I found it’s the most straightforward tool for web design, you don’t have to worry about cm, cmyk or photographic tools that are not the essence of web design. If you need to edit a photo you have Photoshop but you don’t need to deal with all Photoshop tools to build a web design.

    Also the work with frames and pages is awesome: you can create a full web design in only on archive! I use frames for screens based on the same structure or different versions of a single screen and pages for screens using a different structure.

    I hope Adobe keep developing Fireworks for a long-long time, as I’ve noticed in the CS5 suite it has a minor relevance (not in the home page?!) and I find it as relevant as the flagship programs such Photoshop or Flash.

    0
  134. 209

    I dont understand why the main image for this article is the Firefox logo. Am I missing something here? That just seems weird.

    -1
  135. 211

    From all the above examples.. can somebody tell me what cant be created in photoshop ? i think nothing

    -2
    • 212

      Jeff Ibacache

      November 9, 2010 5:43 pm

      But in vector ? :D

      0
    • 213

      This article is about FW not PS, plus this is the right tool for web, apps, UI, and so on, which means workflows are much more intelligent and fast.

      0
  136. 214

    Hey! Where’s everybody? I miss “Grandma” Williams! Hey! Bring her back, please!

    0
  137. 215

    I guess you don’t see mechanics arguing over what wrench they use to fix a car. The only thing that matters is the end product. We should spend time perfecting our craft not wasting it with useless arguments that rely solely on user preference.

    0
  138. 216

    Embrace BOTH!!!

    Ive been using both photoshop and fireworks since I started designing and both of it is really amazing… I used MACROMEDIA FIREWORKS where it dominates same is true in ADOBE PHOTOSHOP.

    – Well others say Fireworks do sharper images compared to Photoshop and Photoshop does more complex design and mask compared to Fireworks.

    Then all I can say is… why compare a sword and a shield??

    1
  139. 217

    I love Fireworks – I’ve used it for 5 years mainly for web design but also logos, flyers etc. It handles the staple requirements of a web designers with ease and lets me work far faster and more accurately than PS.

    I thank god I use FW every time a client wants a design resized and I think of the time I save with FW versus removing and reapplying layered effects in PS.

    Such a shame that Adobe don’t do more to promote FW into the industry with so many employers insisting on PS.

    0
  140. 218

    I tried FW CS4 for a web design once. Then I switched back to PS. Layer masks in FW are incredibly awkward and slow. Once a document gets to a certain number of layers and pages, FW slows to a CRAWL!!! This is on a Mac. I don’t know about Windows. PS will click along no matter how many layers I have in it. PS is just a faster program.
    Also, you can use vector shapes in PS just as well as Fireworks. I don’t know if the author has used a Mac to try and produce a complex web design in FW, but it just doesn’t work as well.

    0
  141. 219

    David, it’s your mother here. How rude of you to say such things to this young man – you were eating me out last night with a Firework up your ass while daddy took pictures and your sister passed her aids around us all – and i distinctly remember you saying that my pussy tasted far superior to your grannies, so how can you stand on your pedestal saying others can’t have an opinion.

    Ps. I’ve had to throw out another one of your sticky socks as things have started to grow on it – i’ve had enough of you leaving them in my bed

    1
  142. 220

    There is no doubt Fireworks is an amazing tool for web design. Specially for Flash websites’ designing. I remember I drew a computer chip board in some very early version of Fireworks 7 years back. Whenever I open this drawing http://www.seharjabeen.com//flash_files/cyberInvaders.html
    I admire the capabilities of this software.

    0
  143. 221

    I like everyone who have discovered Fireworks, can say it is an excellent graphics program. I never knew I can create fairly complex elements like icons, posters, websites etc as conversely to Photoshop and Illustrator. My website Pixel Ignite, for instance, was done pretty much in Fireworks, say around 99.9%. There is great potential in this software and I think people need to remove their preconceived ideas that it’s a substandard program to one that is becoming a formidable competitor to Photoshop and Illustrator.

    Check out my site pixelignite for experiments and tutorials I’m producing using Fireworks!

    1
  144. 222

    Felica Kuniyoshi

    December 8, 2011 2:42 pm

    We believe one particular would most likely contact that will spacing out.

    0
  145. 223

    Ethan Andreoli

    December 20, 2011 5:06 pm

    Flash websites FTW!

    0
  146. 224

    I’m using fireworks as well for logo design.

    0
  147. 225

    I Just wish i knew how to publish a website FROM fireworks :[

    0
  148. 226

    I just discovered about adobe fireworks with your beautiful post. And heck, why did i only discovered it today.
    :D

    It’s such a powerful tool to rule the world! Thanks so much for sharing!

    1
  149. 227

    dobieillustrator

    March 2, 2012 2:19 am

    I don’t get what all the fuss is about with Fireworks !!! I look at the majority of the above images that were generated with the program and think they are all pretty mediocre for the most part. It has been a down hill slide in image quality in general since the mid 80’s. There is a tsunami of junk graphic work floating around out there today and to many clients with a copy of CS5 that think they are designers because they can take your source files in layers and start messing with them to make them better ? I look at a lot of the old airbrush work from 70’s & 80’s and see very little that comes close today in quality of image or graphic appeal. I think that the whole software biz is a con job and money grab for the most part and that you could pretty much bundle up most of what adobe has to offer and stuff it into a 2 or 3 software programs if not 1. Way to much overlap in the functions of each of these programs for me. I find it hard to believe you couldn’t take all of Fireworks and just dump it into Photoshop.

    -3
  150. 228

    I have been thinking about making the switch to Fireworks as well. I was curious, where would one find good tutorials & resources for working with Fireworks? Is that going to be a small downfall for switching from PS to FW the lack of resources and community support? I’m just curious.

    1
  151. 229

    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
  152. 230

    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
  153. 231

    منتديات

    September 3, 2012 7:50 am

    Thank you

    0
  154. 232

    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
  155. 233

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

    0
  156. 235

    Thanks for sharing.

    0
  157. 236

    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