Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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

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

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

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

…What Exactly Is Fireworks? Link

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

Fireworks CS52

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

What is it? Link

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

What is it good for? Link

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

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

Export features Link

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

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

Formats support Link

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

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

Highly extensible Link

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

The Showcase Of Fireworks Illustrations Link

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

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

1. David Hogue Link

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

{01} Golden Compass illustration Link

Golden Compass illustration16

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

{02} Quartz Watches illustration Link

Quartz watches illustration19

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

2. Matthew Inman Link

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

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

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

{03} 15 Things Worth Knowing About Coffee Link

The Oatmeal comic strip26

{04} 20 Things Worth Knowing About Beer Link

The Oatmeal comic strip27

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

The Oatmeal comic strip28

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

The Oatmeal comic strip29

{07} Duck in Coffee illustration Link

Coffee and Duck illustration (Fireworks)30

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

3. Ryan Hicks Link

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

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

{08} XD Brownbag Poster series Link

Ryan Hicks illustration (Fireworks) width=36

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

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

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

Download the Fireworks PNG file.

{09} XD Lunchbox poster Link

Ryan Hicks illustration (Fireworks) width=37

{10} XD Beet poster Link

Ryan Hicks illustration (Fireworks) width=38

{11} XD Mackerel poster Link

Ryan Hicks illustration (Fireworks) width=39

{12} XD Salad poster Link

Ryan Hicks illustration (Fireworks) width=40

{13} XD Brownbag poster Link

Ryan Hicks illustration (Fireworks) width=41

4. Rogie King Link

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

{14} rogieking.com personal site illustrations Link

Rogie King redesign illustration43

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

{15} Logo for rainboxx.de Link

Rainboxx logo (1)45

Rainboxx logo (2)46

Rainboxx logo (3)47

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

{16} Mad Mimi Illustrations Link

Mad Mimi illustration (1)50

Mad Mimi illustration (2)51

Mad Mimi (animated) illustration (3)52

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

{17} Adaptive UI icons Link

Adeptive UI icons54

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

5. Xiao Cai Link

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

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

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

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

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

{18} DCP2 Fireworks illustration Link

Chinese painting style in Adobe Fireworks59

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

{19} DCP3 Fireworks illustration Link

Chinese painting style in Adobe Fireworks60

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

{20} DCP4 Fireworks illustration Link

Chinese painting style in Adobe Fireworks61

Chinese painting style in Adobe Fireworks62

Chinese painting style in Adobe Fireworks63

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

{21} DCP8 Fireworks illustration Link

Chinese painting style in Adobe Fireworks64

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

6. Jon Hicks Link

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

Firefox logo (Fireworks version)69

Firefox logo70

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

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

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

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

7. Fabio Sasso Link

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

{23} Apple Air banner Link

Apple Air banner (Fireworks illustration)78

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

{24} Light Effects illustration Link

Light effects illustration (Fireworks illustration)80

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

{25} The Abduzeetles Rockband website design Link

The Abduzeetles Rockband website design (Fireworks illustration)81

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

8. Lucian Dragomir Link

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

Lucian also loves to share his work at deviantart83.

{26} Vectorizer illustration Link

Vectorizer illustration84

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

{27} Anger Management illustration Link

Anger Management illustration88

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

{28} iCry illustration Link

iCry illustration89

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

{29} TakeOFF illustration Link

TakeOff illustration90

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

9. Fred Michel Link

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

{30} Porsche Carrera illustration Link

Porsche Carrera illustration91

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

{31} Cadillac illustration Link

Cadillac illustration93

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

{32} Mercedes SLA concept car illustration Link

Mercedes SLA illustration95

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

{33} VW Tiguan illustration Link

VW Tiguan illustration98

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

10. Mikko Vartio Link

Mikko Vartio100 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 Twitter101 and Flickr102 (where he often posts Fireworks illustrations).

{34} Bears illustration Link

Bears illustration103

{35} Sealife illustration Link

Sealife illustration104

{36} Longboard illustration Link

Longboard illustration105

{37} Surprise illustration Link

Surprise Fireworks illustration106

{38} Darth Android illustration Link

Darth Android illustration107

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

{39} Magic Mushroom illustration Link

Magic Mushrooms illustration109

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

11. Angelo Sabal Link

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

{40} Colt gun illustration Link

Colt illustration112

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

{41} Candle illustration Link

Candle illustration114

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

{42} Dragon shield illustration Link

Dragon shield illustration116

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

{43} Iron Man 2 helmet illustration Link

Iron Man 2 illustration118

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

12. Craig Erskine Link

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

Craig is using Fireworks on a daily basis121 and has also published quite a lot of Fireworks tutorials122. You may find him on dribbbble and Twitter123.

{44} Mac Mini illustration Link

Mac Mini illustration124

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

{45} Apple remotes illustration Link

Apple remotes illustration126

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

13. Pete Lacey Link

Pete Lacey128 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 Twitter129, too.

{46} Fireworks icons Link

Fireworks icons130

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

14. David Brooks Link

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

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration Link

Camera-Phone illustration134

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration Link

Northward Compass website illustration135

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

15. Tomas Gajar Link

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

{49} DigitalLabs website design Link

DigitalLabs website design (Fireworks illustration)138

{50} Beck’s design concept Link

Becks design concept (Fireworks illustration)139

{51} SofaSurfer website design Link

SofaSurfer website design (Fireworks illustration)140

16. Vincent Tremblay Link

Vincent Tremblay141 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 deviantart142.

Neos Carbon 2 logo (Fireworks illustration)143

Created in Fireworks CS5, all vectors.

iCompanion (Fireworks illustration)144

Created in Fireworks CS5, all vectors.

17. José Rivera Link

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

{54} Twitter icons Link

Twitter icon #1 (Fireworks illustration)148

Twitter icon #2 (Fireworks illustration)149

Twitter icons, all re-created in Fireworks vectors.

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

The iPhone in Fireworks PNG vectors (Fireworks illustration)150

The idea to fully vectorize the iPhone is not new — for example, you may check this excellent tutorial151 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 format152 for free download (download iPhone in editable PNG format153). It should be fully compatible with Fireworks versions CS4/CS5 (and even lower).

18. Nick Isenberg Link

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

{56} Spiral Notebooks illustration Link

Spiral notebooks (Fireworks illustration)155

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

{57} Le Petit Porcelet illustration Link

Le petit porcelet (Fireworks illustration)157

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

{58} Safari Dock icon Link

Safari dock icon (Fireworks illustration)159

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

19. Adobe CS5 Branding Link

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

{59} The Adobe CS5 branding Link

Adobe CS5 branding - made possible with the help of Fireworks161

{60} The Adobe CS5 branding — the icons Link

Adobe CS5 branding - made possible with the help of Fireworks162

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

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

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 blog164 dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts165 on the matter too:

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

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

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

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

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

So, how good is Fireworks for Web design? Link

Fireworks is a solid application for creating Web graphics and as John Nack166 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 Fireworks167 (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 Styles168 extension).
  8. Export text & graphical styles as CSS* (this is already partially possible in Fireworks – it can export a Web graphic design as HTML/CSS code and also can quickly “translate” some objects’ properties into CSS via extensions such as “Copy CSS Dimensions to Clipboard”).
  9. Support guide sets (e.g. for grid layouts).
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs).

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

Conclusion Link

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

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

In my personal opinion, there exists much more than 7 reasons to prefer Fireworks to Photoshop169. While Fireworks may be not better than Photoshop170, 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 application171 that Jason Santa Maria was discussing not long ago (although for this to happen, Fireworks would need much more intensive development from the part of Adobe).

{62} Adobe Photoshop CS5 splash screen Link

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

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

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

Further Reading Link

(afb)

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

  1. 1

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

    -5
    • 2

      “Photoshop is far superior to Fireworks”

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

      5
  2. 3

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

    2
  3. 4

    Darren Williams

    September 17, 2010 2:44 am

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

    -33
    • 5

      Michel Bozgounov

      September 17, 2010 3:37 am

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

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

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

      21
      • 6

        Darren Williams

        September 20, 2010 11:49 pm

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

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

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

        -33
        • 7

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

          1
        • 8

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

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

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

          -4
          • 9

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

            3
        • 10

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

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

          15
          • 11

            'Grandma' Williams

            September 24, 2010 12:18 am

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

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

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

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

            -9
          • 12

            Michel Bozgounov

            September 24, 2010 3:11 am

            Darren,

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

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

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

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

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

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

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

            22
        • 13

          Michel Bozgounov

          September 23, 2010 2:48 am

          Darren,

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

          Case rested! ;-)

          19
        • 14

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

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

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

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

          16
    • 15

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

      3
      • 16

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

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

        Fireworks is designed for what we do.

        5
    • 17

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

      5
      • 18

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

        0
    • 19

      Trolling troll is trolling.

      4
    • 20

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

      1
      • 21

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

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

        0
      • 22

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

        1
    • 23

      Hell yeah!!!

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

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

      It is that simple. Nothing more to say.

      -9
      • 24

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

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

        1
      • 25

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

        2
      • 26

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

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

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

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

        12
  4. 27

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

    0
    • 28

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

      4
    • 29

      Fireworks was used to create the Firefox logo

      2
  5. 30

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

    6
    • 31

      Hybrid IX Studio

      September 24, 2010 7:49 pm

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

      4
  6. 32

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

    Tommy (www.mannadesign.net)

    3
    • 33

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

      -4
      • 34

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

        4
      • 35

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

        4
      • 36

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

        4
  7. 37

    Machteld Ouwens

    September 17, 2010 2:58 am

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

    2
  8. 38

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

    3
  9. 39

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

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

    0
  10. 40

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

    7
  11. 41

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

    6
  12. 42

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

    3
    • 43

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

      But, I did enjoy the article though.

      0
      • 44

        Michel Bozgounov

        September 17, 2010 1:20 pm

        @Dan:

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

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

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

        3
  13. 45

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

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

    3
    • 46

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

      1
  14. 47

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

    0
  15. 48

    I’ll take time to trying FW !

    0
  16. 49

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

    We offer free downloads to anyone interested:

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

    Thanks once again for an amazing article.

    1
  17. 50

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

    1
    • 51

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

      1
  18. 52

    Jens Grochtdreis

    September 17, 2010 3:50 am

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

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

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

    0
    • 53

      Vitaly Friedman

      September 17, 2010 7:45 am

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

      3
    • 54

      Edgars Zagorskis

      September 17, 2010 4:17 am

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

      2
  19. 55

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

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

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

    7
  20. 57

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

    0

↑ Back to top