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

Advertisement

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

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

…What Exactly Is Fireworks?

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

Fireworks CS52

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

What is it?

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

What is it good for?

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

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

Export features

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

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

Formats support

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

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

Highly extensible

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

The Showcase Of Fireworks Illustrations

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

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

1. David Hogue

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

{01} Golden Compass illustration

Golden Compass illustration17

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

{02} Quartz Watches illustration

Quartz watches illustration20

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

2. Matthew Inman

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

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

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

{03} 15 Things Worth Knowing About Coffee

The Oatmeal comic strip27

{04} 20 Things Worth Knowing About Beer

The Oatmeal comic strip28

{05} How a Web Design Goes Straight to Hell

The Oatmeal comic strip29

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

The Oatmeal comic strip30

{07} Duck in Coffee illustration

Coffee and Duck illustration (Fireworks)31

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

3. Ryan Hicks

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

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

{08} XD Brownbag Poster series

Ryan Hicks illustration (Fireworks) width=37

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

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

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

Download the Fireworks PNG file3940.

{09} XD Lunchbox poster

Ryan Hicks illustration (Fireworks) width=41

{10} XD Beet poster

Ryan Hicks illustration (Fireworks) width=42

{11} XD Mackerel poster

Ryan Hicks illustration (Fireworks) width=43

{12} XD Salad poster

Ryan Hicks illustration (Fireworks) width=44

{13} XD Brownbag poster

Ryan Hicks illustration (Fireworks) width=45

4. Rogie King

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

{14} rogieking.com personal site illustrations

Rogie King redesign illustration48

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

{15} Logo for rainboxx.de

Rainboxx logo (1)50

Rainboxx logo (2)51

Rainboxx logo (3)52

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

{16} Mad Mimi Illustrations

Mad Mimi illustration (1)57

Mad Mimi illustration (2)58

Mad Mimi (animated) illustration (3)59

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

{17} Adaptive UI icons

Adeptive UI icons61

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

5. Xiao Cai

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

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

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

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

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

{18} DCP2 Fireworks illustration

Chinese painting style in Adobe Fireworks66

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

{19} DCP3 Fireworks illustration

Chinese painting style in Adobe Fireworks67

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

{20} DCP4 Fireworks illustration

Chinese painting style in Adobe Fireworks68

Chinese painting style in Adobe Fireworks69

Chinese painting style in Adobe Fireworks70

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

{21} DCP8 Fireworks illustration

Chinese painting style in Adobe Fireworks71

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

6. Jon Hicks

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

{22} Mozilla Firefox logo

Firefox logo (Fireworks version)76

Firefox logo77

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

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

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

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

7. Fabio Sasso

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

{23} Apple Air banner

Apple Air banner (Fireworks illustration)85

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

{24} Light Effects illustration

Light effects illustration (Fireworks illustration)87

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

{25} The Abduzeetles Rockband website design

The Abduzeetles Rockband website design (Fireworks illustration)89

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

8. Lucian Dragomir

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

Lucian also loves to share his work at deviantart92.

{26} Vectorizer illustration

Vectorizer illustration93

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

{27} Anger Management illustration

Anger Management illustration97

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

{28} iCry illustration

iCry illustration98

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

{29} TakeOFF illustration

TakeOff illustration99

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

9. Fred Michel

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

{30} Porsche Carrera illustration

Porsche Carrera illustration101

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

{31} Cadillac illustration

Cadillac illustration103

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

{32} Mercedes SLA concept car illustration

Mercedes SLA illustration105

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

{33} VW Tiguan illustration

VW Tiguan illustration108

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

10. Mikko Vartio

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

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

{34} Bears illustration

Bears illustration113

{35} Sealife illustration

Sealife illustration114

{36} Longboard illustration

Longboard illustration115

{37} Surprise illustration

Surprise Fireworks illustration116

{38} Darth Android illustration

Darth Android illustration117

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

{39} Magic Mushroom illustration

Magic Mushrooms illustration120

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

11. Angelo Sabal

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

{40} Colt gun illustration

Colt illustration123

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

{41} Candle illustration

Candle illustration125

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

{42} Dragon shield illustration

Dragon shield illustration127

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

{43} Iron Man 2 helmet illustration

Iron Man 2 illustration129

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

12. Craig Erskine

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

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

{44} Mac Mini illustration

Mac Mini illustration136

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

{45} Apple remotes illustration

Apple remotes illustration138

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

13. Pete Lacey

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

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

{46} Fireworks icons

Fireworks icons142

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

14. David Brooks

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

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration

Camera-Phone illustration147

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration

Northward Compass website illustration148

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

15. Tomas Gajar

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

{49} DigitalLabs website design

DigitalLabs website design (Fireworks illustration)152

{50} Beck’s design concept

Becks design concept (Fireworks illustration)153

{51} SofaSurfer website design

SofaSurfer website design (Fireworks illustration)154

16. Vincent Tremblay

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

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

Neos Carbon 2 logo (Fireworks illustration)157

Created in Fireworks CS5, all vectors.

{53} iCompanion logo prototype (iTunes Companion logo)

iCompanion (Fireworks illustration)158

Created in Fireworks CS5, all vectors.

17. José Rivera

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

{54} Twitter icons

Twitter icon #1 (Fireworks illustration)162

Twitter icon #2 (Fireworks illustration)163

Twitter icons, all re-created in Fireworks vectors.

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

The iPhone in Fireworks PNG vectors (Fireworks illustration)164

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

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

18. Nick Isenberg

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

{56} Spiral Notebooks illustration

Spiral notebooks (Fireworks illustration)170

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

{57} Le Petit Porcelet illustration

Le petit porcelet (Fireworks illustration)172

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

{58} Safari Dock icon

Safari dock icon (Fireworks illustration)174

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

19. Adobe CS5 Branding

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

{59} The Adobe CS5 branding

Adobe CS5 branding - made possible with the help of Fireworks176

{60} The Adobe CS5 branding — the icons

Adobe CS5 branding - made possible with the help of Fireworks177

{61} The Adobe CS5 branding — the splash screens

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

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

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

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

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

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

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

So, how good is Fireworks for Web design?

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

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

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

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

Conclusion

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

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

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

{62} Adobe Photoshop CS5 splash screen

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

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

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

Further Reading

(afb)

Footnotes

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

↑ Back to topShare on Twitter

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

Advertising
  1. 1

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

    -33
    • 2

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

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

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

          1
        • 5

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

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

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

          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.

          14
          • 9

            “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
          • 10

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

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

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

        @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
    • 14

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

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

      Trolling troll is trolling.

      4
    • 17

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

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

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

        1
    • 20

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

        1
      • 22

        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.

        1
      • 23

        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.

        11
  2. 24

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

    0
    • 25

      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.

      3
    • 26

      Fireworks was used to create the Firefox logo

      2
  3. 27

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

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

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

    Tommy (www.mannadesign.net)

    3
    • 30

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

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

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

        4
      • 33

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

        3
  5. 34

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

    -4
    • 35

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

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

    1
  7. 37

    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

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

      0
  18. 52

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

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

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

    0
    • 53

      “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
    • 54

      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.

      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

      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

        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

      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

      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

    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

        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

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

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

      Good point! And Ryan Hicks explains exactly how a Fireworks vector graphic can be easily upscaled and then printed (with the help of Ps/Ai, if CMYK is needed).

      1
  56. 110

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

      You make no sense idiot.

      1
    • 113

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

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

    0
  58. 116

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

    0
  59. 117

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

    0
  60. 118

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

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

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

      0
  62. 121

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

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

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

    0
  65. 124

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

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

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

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

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

    Just re-discovered FW for the first time.

    LOVE IT.

    1
  71. 130

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

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

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

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

    I guess Smashing did not learn their lesson from the “Group Interview: Expert Advice for Students and Young Designers” article back in February (http://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
    • 135

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Awesome post, thank you heaps!

    0
  89. 158

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

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

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

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

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

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

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

    0
  95. 165

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

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

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

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

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

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

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

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

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

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

    Were that many examples really necessary?

    -1
  106. 176

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

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

    0
  108. 178

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

    0
  109. 179

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

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

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

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

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

    0
  113. 184

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

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

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

    0
  116. 188

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

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

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

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

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

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

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

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

    0
  123. 198

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

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

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

      Ryan Hicks explains how at Adobe they were making large prints from Fireworks (with the help of Ps and Ai).

      Fireworks supports RGB color mode only, and you can print directly from Fireworks, but the printer should do the conversion from RGB to CMYK automatically (just like when you send a digital photo to the printer). Fireworks also supports high-quality dpi settings (you can set the file to 150 dpi, 300 dpi, or even more), but you should know that the maximum file size in Fireworks is approximately 6000×6000 pixels (changing a well-hidden preference in Fw will allow you to create and edit a file up to 10000×10000 pixels); but at such sizes, Fireworks becomes quite slow, since its main purpose is design for screen, and you rarely will have to work with files larger than 1000-2000 px (w or h).

      Hope this helps — but in case you need more information, try posting a question to Sarthak from Fw Team — he should be able to help you! Or try posting the question in the Adobe Fw forums.

      0
  126. 202

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

    0
    • 203

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

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

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

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

    -2
  129. 207

    Excellent article. Please keep up the good work!

    0
  130. 208

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

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

    0
  132. 210

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

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

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

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

    -2
  136. 217

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

    0
  137. 218

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

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

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

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

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

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

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

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

    0
  145. 226

    Flash websites FTW!

    0
  146. 227

    I’m using fireworks as well for logo design.

    0
  147. 228

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

    0
  148. 229

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

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

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

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

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

    Thank you

    0
  154. 235

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

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

    0
  156. 238

    Thanks for sharing.

    0
  157. 239

    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