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.

Useful Adobe Fireworks Resources: Tutorials, Articles And Freebies (Part 2)

A few weeks ago, I mentioned some of the best extensions1 that are currently available for Fireworks. Today, I’ll cover some of the best tutorials and articles, as well as many freebies (styles, templates, resource libraries, and so son) that are available for Fireworks. All of them can (and will!) teach you how to use Fireworks in a better, more optimal way.

Again, in order to help you obtain a good overview of everything covered in this article, I’ve grouped the resources into the following sections:

  • Tutorials2: Everything you need to know about how to use Fireworks.
  • Articles3: The features of Fireworks and other UI design tools (compared).
  • Assets and freebies4: Fireworks PNG files, templates, style presets, libraries, etc.
  • Conclusion5: Is Fireworks still relevant in 2014 and what are its alternatives?

Tutorials

Brushed Metal Effect in Adobe Fireworks Tutorial Link

Using this “Brushed Metal Effect” tutorial, you can create a nice-looking brushed metal effect in Fireworks. The tutorial is pretty basic but you can learn a thing or two from it. (If you’re curious, in real life brushed metal6 is metal with a unidirectional satin finish produced by a special polishing process; the brushing gives the metal a distinctive look, as it retains some but not all of its metallic lustre and is given a pattern of very fine lines parallel to the brushing direction.)

The final result can be saved as a vector file, or you can easily export a “flat” pattern or texture file of any size.

Brushed Metal Effect in Adobe Fireworks7
“Brushed Metal Effect in Adobe Fireworks” tutorial: I have tried the steps outlined in it, and the final results can be achieved pretty easily. (view large preview8 or download the editable Fw PNG file9)

How to achieve pixel perfection with Adobe Fireworks Tutorial Link

When it comes to user interface design, Adobe Fireworks is an excellent tool for laying out your ideas and also for creating cutting edge graphics for your app or website. Like in any other graphic software, there are different ways to create one effect. However, the result doesn’t always look the same for each method. In the article “How to achieve pixel perfection in your designs with Adobe Fireworks10,” Ivo Mynttinen985911 will show you how to achieve real pixel perfection!

How to achieve pixel perfection in your designs with Adobe Fireworks (article by Ivo Mynttinen)
“How to achieve pixel perfection in your designs with Adobe Fireworks” (example from the tutorial).

(Note: Ivo Mynttinen wrote also a very useful and detailed article for Smashing Magazine, “Design Cutting Edge iOS Apps With Adobe Fireworks12“.)

Creating Brushed Metal in Adobe Fireworks Video Tutorial Link

Speaking of brushed metal effects, here’s a more complex (video) tutorial that will let you achieve more interesting results: “Creating Brushed Metal in Adobe Fireworks13.” It’s by designer and Fireworks master Rogie King14 and is certainly worth watching.

Brushed Metal Effect video tutorial (by Rogie King)15
“Creating Brushed Metal in Adobe Fireworks,” by Rogie King. (watch video tutorial16)

This tutorial will show you actually some of the steps in the process of designing the Rainboxx logo17 (see the next item in the list).

Designing the Rainboxx Logo Video Tutorial Link

Watching designers work is always fun and can teach us a lot; so I can recommend you to watch the “Designing the Rainboxx Logo in Fireworks18” video tutorial by Rogie King. You can get an insight into Rogie’s workflow and also learn a few useful things about Fireworks and its tools.

Brushed Metal Effect video tutorial (by Rogie King)19
“Designing the Rainboxx Logo in Adobe Fireworks,” by Rogie King. (watch video tutorial20)

Pasting Attributes in Adobe Fireworks Video Tutorial Link

Here’s another quick video tutorial (only 7 minutes long) by Rogie King, “Pasting Attributes in Adobe Fireworks21.” It’s about the option to easily copy-paste attributes between different objects on the canvas in Fireworks. The option is easy to master (it’s as simple as Ctrl/Cmd+C and Ctrl/Cmd+Alt+Shift+V!) but very useful. Rogie will show you a few examples of its use and a few tips and tricks.

Pasting Attributes in Adobe Fireworks (tutorial)22
“Pasting Attributes in Adobe Fireworks,” by Rogie King. (watch video tutorial23)

(And, if you need even more control, there’s the Copy and Paste Selective Attributes command available in the Modify Commands24 set by Aaron Beall.)

Brushed Metal iCloud Logo Tutorial Link

This is another tutorial which is about brushed metal effects (that’s the last one, promise!). In “Brushed Metal iCloud Logo with Fireworks25,” you’ll learn how to work with vector shapes, filters and vector masks.

Brushed Metal iCloud Logo (tutorial)
“Brushed Metal iCloud Logo” tutorial: putting it all together. (source26)

(Note: There are many other excellent tutorials, published in the FireTuts27 website, do check them out!)

Working with Masks in Fireworks Video Tutorial Link

Working with Masks in Fireworks28 is a bit long video tutorial (close to half an hour!) by Jim Babbage29, but from it you’ll learn everything you need to know about masking with Fireworks — how to create vector masks, how to easily edit already created masks, working with gradients in masks, etc.

Working with masks in Fireworks (video tutorial)30
“Working with Masks in Fireworks” video tutorial. (watch video tutorial31)

Realistic 3D simulation with reflection in Fireworks Tutorial Link

Realistic 3D simulation with reflection in Fireworks32 (by Lucian Dragomir33) will teach you a thing or two and the end results look very elegant.

Realistic 3D simulation with reflection in Fireworks (tutorial)
Realistic 3D simulation with reflection in Fireworks. (source34)

8 Essential Fireworks Tips For Web Design Tutorial Link

8 Essential Fireworks Tips For Web Design35 is a tutorial (originally published in .net magazine UK36 and written by Jonathan Snook37), which takes a good look at the features that make Fireworks so useful for web designers (these include styles, pages and states, rich symbols, and more). Jonathan also shares a few other time-saving tips in this tutorial! If you are a Photoshop die-hard fan and wondered why you’d ever should try Fireworks, or if you have been using Fireworks for years and are looking to improve your workflow, then this tutorial is just for you.

8 Essential Fireworks Tips For Web Design (screenshot)
“8 Essential Fireworks Tips For Web Design” (screenshot from the tutorial).

Easy Odometer Icon Tutorial Link

The Easy Odometer Icon38 tutorial (by Tiago Camargo) is an easy-to-follow tutorial in which you’ll learn how to deal with Fireworks vector objects, live filters and blending modes.

Easy Odometer Icon
“Easy Odometer Icon” tutorial, published in the FWPolice4039 website (final results).

(Note: The FWPolice4039 website also offers many types Fireworks vector freebies41 and has many other tutorials42 about Fireworks.)

Refining Your Design In Adobe Fireworks Tutorial Link

In the “Refining Your Design In Adobe Fireworks43” tutorial, Benjamin De Cock44 shares a few excellent tips and tricks when working with Fireworks, accompanied by many helpful illustrations and screenshots. We have published this tutorial in 2012, but it’s still highly useful to read even today!

Refining Your Design In Adobe Fireworks (examples)
“Refining Your Design In Adobe Fireworks” tutorial. (source45)

Fireworks: The Things You Might Have Missed Tutorial Link

This is a very old tutorial by Trevor McCauley but you can still learn a few smart Fireworks tips and tricks from it: scaling of attributes of objects, using vector shapes for bitmap marquees, selective JPEG quality, hiding/showing selection edges, finding and replacing colors (or text) in FW PNG files, the difference between subselect and superselect, tweening symbols for duplication, and so much more. This is an old classic!

The Things You Might Have Missed (tutorial)
“The Things You Might Have Missed” tutorial. (examples from: source 146, source 247).

(Trevor is well-known in the Fireworks community; he has created many useful Fireworks extensions48 and recently even open-sourced49 them, releasing the source code on GitHub50.)

Index and Alpha Transparency in Fireworks Tutorial Link

In “Index and Alpha Transparency in Fireworks51,” Dave Hogue9152 (currently UX design manager @ Google) is taking an in-depth look at index and alpha transparency and how to use them in Fireworks to your advantage.

Index and Alpha transparency in Fireworks
“Index and Alpha Transparency in Fireworks” (tutorial example).

(Note: It’s a not-so-well known fact that for many years, Fireworks was the only design application53 that could export PNG8 files which included both index and alpha transparency! These PNG8 index+alpha files were displayed correctly across all browsers, including Internet Explorer 6, which couldn’t render properly PNG files with an alpha transparency channel.)

FireworksGuruForum Community Link

The forum members of the FireworksGuruForum54 (created by Alan Musselman12855), while not so active as in the past, are still there to help you, should you have any questions regarding Fireworks. But what’s more important, there are many useful resources published there (freebies, tutorials, useful links, Fireworks PNG files and templates, styles, etc.).

FireworksGuruForum Community (website screenshot).
FireworksGuruForum (screenshot).

Adobe Fireworks Tutorials by Craig Erskine Link

In this series of Adobe Fireworks (mini) tutorials56, Craig Erskine8057 will teach you many basic and advanced techniques. These tutorials were written mostly for users who have a very strong understanding of Fireworks, but even if you are not a Fireworks expert, they’re still worth checking out!

Adobe Fireworks Tutorials, by Craig Erskine (website screenshot)
Adobe Fireworks Tutorials, by Craig Erskine (screenshot).

Articles

The Endless Fireworks vs. Photoshop Battle Article Link

The Endless Fireworks vs. Photoshop Battle58” article was written over 3 years ago by Ivo Mynttinen985911 and is still relevant today, even if we know that in the end, Photoshop became the apparent winner in this battle — but not because it proved to be a better UI design tool than Fireworks, but because Adobe always wanted to market it as such.

The article is pretty long and goes into great detail about what are the strengths and weaknesses of both apps when used specifically for UI design — web, mobile, icon design, etc. Do check it out! (Btw, today Ivo still uses Fireworks but has moved a lot of his workflow to Sketch60; and he’s not the only one61.)

The Endless Fireworks vs. Photoshop Battle (screenshot)
The Endless Fireworks vs. Photoshop Battle article (screenshot).

The Power of Adobe Fireworks Article Link

The Power of Adobe Fireworks62” is an article which I wrote in 2010 (how time flies by!) and in which tried to show all the various types of work that Fireworks can be used for — UI and icon design, illustration, web design, even digital painting.

The Power of Adobe Fireworks (examples from the article).
“The Power of Adobe Fireworks”: a few examples from the article.

The list of designers and illustrators, whose work I have showcased in my article, included Matthew Inman (the cool guy behind The Oatmeal63 comic strips), Rogie King64 (designer and illustrator, who’s always on page #165), Ryan Hicks66 (Senior UX Designer at Adobe), Craig Erskine67 (known to many with his successful “Fireworks PNG Weeks7968” series), Jon Hicks69 (the inventor of the Firefox logo, among other things), and many others. (It does not include the work of great illustrators (and Fireworks masters) such as Isabel Aracama12270, James Parker71 or Fabio Benedetti72, with whose work I was acquainted with at a much later time… I should perhaps consider a Part 2 one day!)

50 Reasons not to use Photoshop for Web Design Article Link

The “50 Reasons not to use Photoshop for Web Design73” (by André Reinegger) feels like a direct feature comparison between Photoshop and Fireworks. It’s a bit outdated today (and yes, so many years later Photoshop can finally create and edit rounded rectangles!) but many of the reasons outlined there are still valid. In its core, Photoshop was designed to be used for manipulation of raster images and for print tasks; it was not designed to create pixel-precise screen layouts, or to make quick changes to them.

Photoshop is used for this purpose however (UI and web design) because many designers are familiar with the program. However, other tools exist that were designed from the ground-up to be UI design tools and perform the task better; and among them is Fireworks (although Sketch and a few other new tools are starting to catch up and real fast).

50 Reasons not to use Photoshop for Web design
Examples from the “50 Reasons not to use Photoshop for Web Design” article.

Adobe Fireworks, a Super Hero that is Hard to Kill Article Link

Why not approach the subject of Fireworks vs. Photoshop with a bit of humor? André Reinegger is trying just that in “Adobe Fireworks, a Super Hero that is Hard to Kill74.” Adobe has no tool in their portfolio today that can replace Fireworks in full, and it’s doubtful if Adobe will invent such a tool, now that they froze the development of Fireworks. But the good news is that Adobe still keeps Fireworks in their Creative Cloud list of apps and it runs fine on latest Windows OS and MacOS X. There are also hundreds of excellent free extensions which add valuable new features to Fireworks.

Adobe Fireworks, a Super Hero that is Hard to Kill
“Adobe Fireworks, a Super Hero that is Hard to Kill” article. (source75)

10 Reasons why I prefer Fireworks to Photoshop for Web Design Article Link

In “10 Reasons why I prefer Fireworks to Photoshop for Web Design76,” Leigh Howells (designer at Headscape77) shares why he has decided to make the transition from Photoshop to Fireworks. He was a Photoshop user for over sixteen years (ten of which have been in a production web design environment). When Fireworks CS4 was released, he decided to have another look at Fireworks. He played with it a bit, and was very impressed by some of its features. Soon after that he started producing much of his day-to-day work in Fireworks.

Some of the reasons he mentions are the ability to have multiple pages (with master page) in one Fireworks PNG document; symbols and styles; the powerful vector features of Fireworks; the 9-slice scaling tool, and a few others.

10 reasons why I prefer Fireworks (article).
“10 Reasons why I prefer Fireworks to Photoshop for Web Design” (screenshot from the article).

7 Reasons Why I Choose Fireworks Over Photoshop Article Link

So, you are still in doubt about Fireworks? Let Russell McGovern tell you his reasons for using Fireworks in “7 Reasons Why I Choose Fireworks Over Photoshop78.” He takes his time to efficiently visualize the evident advantages of the program and explains his preferences and the key features of Fireworks that help him in his UI daily design tasks.

7 Reasons Why I Choose Fireworks Over Photoshop
“7 Reasons Why I Choose Fireworks Over Photoshop” (example screenshot from the article).

Fireworks PNG Files, Templates, Style Presets & Resource Libraries

Dragnet Wireframes Kit for Adobe Fireworks Link

Dragnet Website Wireframes Kit for Adobe Fireworks (by Jonas Skoglund) is a common library with over 25 objects that make rapid prototyping of websites much easier in Fireworks.

Yes, Fireworks comes pre-loaded with a library of similar web elements that look really nice, but Jonas developed the kit because he wanted to create something a bit more rough, something that looked more like sketches, so the clients (or the user test participants) wouldn’t get distracted by the design when instead they should focus more on the function behind the web page or application.

Dragnet website wireframes kit for Adobe Fireworks
Dragnet Wireframes Kit for Adobe Fireworks (screenshot).

Fireworks PNG Weeks Series Link

Fireworks PNG Weeks7968 is a collection of 52 high-quality Fireworks editable PNG files that you can download and de-construct in Fireworks at your ease. It was a project by Craig Erskine8057 and quite a cool one, because often, one can learn a lot when taking a close look at the work of others!

Fireworks PNG Weeks series, by Craig Erskine (example).
Fireworks PNG Weeks (example from PNG Week #3281).

Dribbble Records Fireworks PNG Link

Dribbble Records82 is a Fireworks PNG freebie which is based on a Dribbble shot83 of mine. I liked the end result, so I decided to release the file as a freebie (for personal/non-commercial use). If you open the file in Fireworks, you can learn a bit about gradients, blending modes and live filters.

Dribbble Records Fireworks PNG freebie84
Dribbble Records Fireworks PNG freebie. (view large preview85 or download the Fw PNG file86)

Dark UI Kit Templates Link

Dark UI Kit87 (by Dustin Evans) is a great looking set of templates for Adobe Fireworks which is completely free. You can learn from it or just (re)use the templates in both personal and commercial projects.

The kit is in Fireworks PNG format and contains five pages, each one containing elements of different type: menus and tabs, alerts and validation dialogs, sliders, etc.

Dark UI Kit for Adobe Fireworks88
Dark UI Kit for Adobe Fireworks.

Simple User Interface Kit Templates Link

The Simple User Interface Kit (by Stefan Hiienurm”89) is a set of clean UI templates which will help you to do (and learn) better design. It’s available in both Fireworks PNG and Photoshop PSD editable formats. (Note: The kit is not free, but costs only $12.00. In this article, I tried to collect mostly free items, available for Fireworks, but sometimes an exception or two is OK, if the quality is very good.)

Simple User Interface Kit (for Adobe Fireworks)
Simple User Interface Kit (available in Fireworks and Photoshop formats).

Hipster Photo Styles for Fireworks Link

As the name suggests, Instant Hipster Photo Styles for Adobe Fireworks90 (created by Dave Hogue9152) is a set of non-destructive photo styles that can be easily used on any photo or image. They include 17 variations (sepia, polaroid, sunrise, black & white, tint, sketch, etc.) and were optimized for images from 300 x 300 to 750 x 750 pixels (which makes them perfect for use on the web and when sharing pictures by email); but they can also be applied to a photo of any size, of course.

Instant Hipster Photo Styles for Adobe Fireworks
Hipster Photo Styles for Fireworks (example).

With Instant Hipster photo styles, you can make your own Hipstamatic-style shots right within Fireworks and even send them instantly to Twitter or Flickr with the help of the TweetFire or FlickrFire extensions, which I have reviewed earlier in detail.

I tried to play a bit with these a while ago and found them both easy and fun to use. What’s better: you’re not limited to using the styles “as is” only! You can download a style set, tweak the styles to suit your taste better, and re-save them. Or, you can create your own style sets from scratch: pick up a few live filters, adjust their properties, experiment, and when ready, simply save as a new style. Easy!

Example of using photo styles in Fireworks
The process is very straightforward: select an image (1), apply a specific style (2), done! (Note: this example includes a photo by B’Joel92 and shows a 1978 Lincoln Town Car).

Webportio Library of Fireworks Resources Link

Webportio93 (created by Jiří Plíštil94) is a library of Fireworks resources, quite regularly updated. It contains a few hundred graphical elements in editable Fireworks PNG format (icons, buttons, forms, patterns, ribbons, etc.), and also various other resources, like grids, styles, website templates, etc. All of the resources are free and well categorized. They have been downloaded over 400’000 times since the Webportio site was launched.

Webportio resources for Adobe Fireworks.95
Webportio resources (screenshot).

Fireworks Library by Aaron Beall Link

The Fireworks Library96 by Aaron Beall97 is a small library of high-quality Fireworks editable PNG files, patterns, styles and symbols. You can freely use any of them in your projects, or learn by de-constructing them in Fireworks.

FireworksLab resources for Adobe Fireworks.
Aaron Beall’s library (examples).

FireworksLab Library of Resources Link

Finally, I should also mention FireworksLab. It was an excellent free design resources site for Adobe Fireworks files, created by Ivo Mynttinen985911. Ivo started FireworksLab because in 2010 there were not many resource sites with quality Fireworks files; in addition he wanted to support the growing Fireworks community. For the time that FireworksLab existed (less than two years), Ivo and a few contributors have designed and released 47 freebies which have been downloaded around 300’000 times!

The project was shut down at the end of 2012, but luckily for all of us, Ivo is still providing the Fireworks resources created in one large ZIP archive. If you want to use or learn from any of them, go to the FireworksLab announcement post99, section “Can I still download the old FireworksLab resources?”, and get the archive!

FireworksLab resources for Adobe Fireworks.
FireworksLab resources (examples).

Conclusion

In Part 1100 and Part 2 of this Adobe Fireworks Resources (2014 Edition), I tried to collect all the best resources, available today for designers using Fireworks.

Did I miss to mention any important resources, extensions, styles, articles or tutorials? I probably most certainly did! My list is by no means complete, but truth is, one cannot list each and every valuable resource that is available for Fireworks today — there are way too many of them — thanks to the amazing Fireworks community! We’ve also published over 25 high-quality articles and tutorials in our Fireworks section101 over the last two years, and I can recommend reading each one of them!

Where to go from here? Link

As I mentioned in my recent article, the future of Fireworks102 is certainly not bright, but as of 2014, it’s still a solid piece of software that can help UI designers work in a very efficient way.

Do I believe Fireworks is still better than many other UI design tools available today? Yes103. Personally, I use Fireworks CS5.1 and CS6 on Windows 8.1 Pro 64bit, and find both of them stable, useful, and quite indispensable in my workflow. I also use many free extensions which add valuable features to Fireworks, like the SVG import104/export105 commands; without its extensions, Fireworks wouldn’t be where it is today.

Is Fireworks still relevant? Link

Is Fireworks still relevant in the fast-pacing software world? Yes — to some extent, at least. Fireworks is like a smart Swiss-knife tool — it can be used in a variety of ways, and while none of its tools are unique, as a whole, it becomes a powerful and versatile106 application (try browsing Dribbble, searching for shots tagged “Fireworks107“):

  • For example, Fireworks can be used to help you create modern, responsive websites, both during the UX and interaction design stages108 and during the visual design stage109, as this detailed case studies (by Olawale Oladunni) proved.
  • Fireworks can be extended in a variety of ways and even if the core of the app is not getting any major updates from Adobe, extensions can continue add new functionality. In this regard, projects like Project Phoenix110 are very important, as well as the countless number of extensions, published by John Dunning111, Aaron Beall112, Matt Stow113, Trevor McCauley114, and many other extension developers.
  • Fireworks can be used for wireframing and prototyping115, web design, UI design, icon design, mobile apps design (for both Retina and non-Retina screens), and screen illustration. Since in its core Fireworks is a powerful vector design tool, scaling to any screen resolution is not an issue (plus, it supports SVG116).
  • And while Fireworks excels with vectors, it can also edit bitmaps, too — no need to switch to another tool if you need to quickly make a few color correction to an imported graphic or if you need to crop it/mask it, etc. (This is one of the main differences between Fireworks and a few of its modern alternatives, such as Sketch117).
  • What about collaboration with Fireworks? Fireworks can perform equally well in individual designer’s workflows and when used by large design teams118. With the help of pattern symbol libraries119 and style guide symbol libraries120 the collaboration process can become even easier.
  • Does Fireworks have some problems? Yes! Its last version (CS6) was released in 2013 and while it works fine on latest Windows OS and Mac OS X, it has some issues — for example, partial incompatibility with Retina MacBook Pros (there is some “pixellization” in the interface), and inability to use more than 2 GB of RAM (Fireworks works well on 32bit and 64bit machines, but because it’s a 32bit application, there are limits as to how much memory it can handle). And it has a few bugs, of course (but which app doesn’t?).
Kawasaki Vulcan (an illustration by Isabel Aracama)121
This is a 100% vector illustration, created with Fireworks (and with a lot of love) by illustrator Isabel Aracama12270. Make sure also to check the larger original123 or the complex vector outlines124!

Alternatives to Fireworks? Link

You can continue to use Fireworks today, but as I mentioned earlier, it’s a good idea to start looking for alternatives. And there are a few UI design tools that might become sooner or later pretty good replacements to Fireworks.

Here are four of them:

  • Sketch125 (by Bohemian Coding126) is UI design tool for Mac which, as of version 3.0, has integrated many of the features that only Fireworks had until now. Its vector tools are quite powerful and it has symbols, pages, artboards, styles, and many other tools that should help UI designers be more efficient. It feels a bit sad that it’s for Mac OS X only (sorry, Windows users!), and its bitmap editing abilities are very limited, but if you’re on a Mac and work mostly with vectors, give it a try — you probably will like it! (And it’s not very expensive, too; Sketch 3.0 costs $79.00, as far as I know).
  • Project EvolveUI127 is still in alpha development stage and is a relatively new open source project by Alan Musselman12855. You can join the google group of the project129 if you want to test the early builds and discuss its present and future features. EvolveUI screen design tool will be able to run on Windows, Mac OS X and Linux, and will be tailored specifically for UX and UI designers, information architects and web developers. Sounds promising!
  • Skala130 is a project by Marc Edwards131. This UI and icon design tool promises to deliver a unique blend of vector, bitmap and 3D abilities. Today Skala is in a closed beta stage132, but a public beta will likely be open before the end of 2014. So far the plans of the team are to make a Mac-only version, but perhaps a Windows version might be considered at some point in the future, too.
  • Gravit133 is a new UI design tool for Windows and Mac (developed by Quasado) that is currently in beta stage134 but should be released to the public very soon, in August. It promises quite a few features that might replace Fireworks, and will be completely free until version 2.0 is released. You can get the early news in the newsletter135 or on Twitter (@gravit_io136, @quasado).
  • (last-minute click) Affinity Designer137 is a new UI design tool for Mac, currently in open beta stage138. You can try it for free or follow the news via the @MacAffinity139 Twitter account. The tool promises to be very fast, with a robust set of vector and bitmap editing tools, custom auto shapes, and with excellent compatibility with PSD, AI and SVG file formats.

So, do you use Fireworks in your work? Have you recently found a good alternative to it? It’d be great if you could share your experiences with the tool in the comments section below.

A special thanks goes to Vitaly Friedman140 who helped me compile this extensive list of Fireworks resources and who inspired me to write this article!

(mb, ml, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/07/18/useful-adobe-fireworks-resources-extensions-part1/
  2. 2 #tutorials
  3. 3 #articles
  4. 4 #assets
  5. 5 #conclusion
  6. 6 http://en.wikipedia.org/wiki/Brushed_metal
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2013/01/brushed-metal-effect-large-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2013/01/brushed-metal-effect-large.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2013/01/brushed-metal-effect-editable.fw_.png
  10. 10 http://ivomynttinen.com/blog/how-to-achieve-pixel-perfection-in-your-designs-with-adobe-fireworks/
  11. 11 http://twitter.com/ivomynttinen
  12. 12 https://www.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  13. 13 http://vimeo.com/12117144
  14. 14 http://dribbble.com/rogie
  15. 15 http://vimeo.com/12117144
  16. 16 http://vimeo.com/12117144
  17. 17 http://dribbble.com/shots/22289-rainboxx-de-Logo
  18. 18 http://vimeo.com/12052458
  19. 19 http://vimeo.com/12052458
  20. 20 http://vimeo.com/12052458
  21. 21 http://vimeo.com/14613707
  22. 22 http://vimeo.com/14613707
  23. 23 http://vimeo.com/14613707
  24. 24 http://fireworks.abeall.com/extensions/commands/#Modify
  25. 25 http://firetuts.com/adobe-firework-brushed-metal-apple-icloud-logo/
  26. 26 http://firetuts.com/adobe-firework-brushed-metal-apple-icloud-logo/
  27. 27 http://firetuts.com/
  28. 28 http://www.adobe.com/devnet/fireworks/articles/masking_preso.html
  29. 29 http://twitter.com/jimbabbage
  30. 30 http://www.adobe.com/devnet/fireworks/articles/masking_preso.html
  31. 31 http://www.adobe.com/devnet/fireworks/articles/masking_preso.html
  32. 32 http://firetuts.com/realistic-10-step-3d-simulation-with-reflection-in-fireworks-8/
  33. 33 http://dfever.deviantart.com/
  34. 34 http://firetuts.com/realistic-10-step-3d-simulation-with-reflection-in-fireworks-8/
  35. 35 http://www.creativebloq.com/design/8-essential-fireworks-tips-web-design-8116855
  36. 36 http://www.creativebloq.com/net-magazine
  37. 37 http://twitter.com/snookca
  38. 38 http://fwpolice.com/tutorials/easy-odometer-icon/
  39. 39 http://fwpolice.com
  40. 40 http://fwpolice.com
  41. 41 http://fwpolice.com/category/vectors/
  42. 42 http://fwpolice.com/category/tutorials/fireworks/
  43. 43 https://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  44. 44 http://twitter.com/bdc
  45. 45 https://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  46. 46 http://www.senocular.com/fireworks/tutorials/mighthavemissed/
  47. 47 https://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  48. 48 http://www.senocular.com/fireworks/extensions/
  49. 49 http://www.senocular.com/?entry=805
  50. 50 https://github.com/senocular/fireworks-extensions
  51. 51 http://www.idux.com/2011/02/27/what-are-index-and-alpha-transparency/
  52. 52 http://twitter.com/davehogue
  53. 53 http://red-team-design.com/png8-alpha-transparency-using-adobe-fireworks/
  54. 54 http://www.fireworksguruforum.com/
  55. 55 http://twitter.com/AlanMusselman
  56. 56 http://qrayg.com/learn/fireworks/
  57. 57 http://twitter.com/craigerskine
  58. 58 http://ivomynttinen.com/blog/the-endless-fireworks-vs-photoshop-battle/
  59. 59 http://twitter.com/ivomynttinen
  60. 60 http://twitter.com/ivomynttinen/status/469770238645764096
  61. 61 http://alistapart.com/blog/post/design-tools-for-todays-web
  62. 62 https://www.smashingmagazine.com/2010/09/17/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/
  63. 63 http://theoatmeal.com/
  64. 64 http://rog.ie/about
  65. 65 https://dribbble.com/designers
  66. 66 http://rhworks.com/
  67. 67 http://qrayg.com/
  68. 68 http://craigerskine.com/category/fw-png-week
  69. 69 http://www.hicksdesign.co.uk
  70. 70 http://dribbble.com/shots/852176-2D-Vector-Illustr-Kawasaki-Vulcan-Full-view-Fireworks-CS5
  71. 71 http://dribbble.com/shots/839807-Aston-Martin-DB5-In-Vectors
  72. 72 http://dribbble.com/shots/589830-Iron-Man-Mask
  73. 73 http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
  74. 74 http://www.reinegger.net/adobe_fireworks_a_super_hero_that_is_hard_to_kill.html
  75. 75 http://www.reinegger.net/adobe_fireworks_a_super_hero_that_is_hard_to_kill.html
  76. 76 http://boagworld.com/design/fireworks-vs-photoshop/
  77. 77 http://headscape.co.uk/
  78. 78 http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/
  79. 79 http://craigerskine.com/category/fw-png-week
  80. 80 http://twitter.com/craigerskine
  81. 81 http://craigerskine.com/blog/fw-png-week-32
  82. 82 http://dribbble.com/shots/1621605-Dribbble-Records-Fireworks-PNG-freebie
  83. 83 http://dribbble.com/shots/63189-Dribble-Records-2010-2
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2013/01/dribbble-vinyl-record-large-opt.png
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2013/01/dribbble-vinyl-record-large-opt.png
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2014/07/dribbble_vinyl_record_freebie.fw_.png
  87. 87 http://dribbble.com/shots/691537-Dark-UI-Kit-Full-Fireworks
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2013/01/dark-ui-kit-preview-large-opt.png
  89. 89 http://twitter.com/shiienurm
  90. 90 http://www.idux.com/2011/08/17/instant-hipster-photo-styles/
  91. 91 http://twitter.com/davehogue
  92. 92 http://dribbble.com/shots/190877-Fireworks-Photo-Styles-FTW
  93. 93 http://www.webportio.com/elements/
  94. 94 http://dribbble.com/neryx
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2014/07/webportio-screenshot-large-opt.png
  96. 96 http://fireworks.abeall.com/library/
  97. 97 http://twitter.com/AaronBeall
  98. 98 http://twitter.com/ivomynttinen
  99. 99 http://ivomynttinen.com/blog/why-i-shut-down-fireworkslab/
  100. 100 https://www.smashingmagazine.com/2014/07/18/useful-adobe-fireworks-resources-extensions-part1/
  101. 101 https://www.smashingmagazine.com/category/fireworks/
  102. 102 https://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  103. 103 http://www.isfireworksbetterthanphotoshop.com/
  104. 104 http://johndunning.com/fireworks/about/SVG
  105. 105 http://fireworks.abeall.com/extensions/commands/Export/
  106. 106 https://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  107. 107 http://dribbble.com/search?q=fireworks
  108. 108 https://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  109. 109 https://www.smashingmagazine.com/2014/03/24/mojo-motors-responsive-redesign-with-adobe-fireworks-part-2/
  110. 110 http://projectphoenix.io/
  111. 111 http://johndunning.com/fireworks/
  112. 112 http://fireworks.abeall.com/extensions/
  113. 113 http://mattstow.com/fireworks.html
  114. 114 http://www.senocular.com/fireworks/extensions/
  115. 115 https://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  116. 116 https://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#exportcommands
  117. 117 http://dribbble.com/shots/1434819-TurboPad-v3?list=users&offset=0
  118. 118 https://www.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  119. 119 https://www.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/
  120. 120 https://www.smashingmagazine.com/2014/04/28/collaborating-with-adobe-fireworks-on-large-design-teams/
  121. 121 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2011-kawasaki-vulcan-original-and-outlines-large-opt.jpg
  122. 122 http://dribbble.com/shots/852176-2D-Vector-Illustr-Kawasaki-Vulcan-Full-view-Fireworks-CS5
  123. 123 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2011-kawasaki-vulcan-original-large-opt.jpg
  124. 124 https://www.smashingmagazine.com/wp-content/uploads/2014/07/2011-kawasaki-vulcan-outlines-large-opt.jpg
  125. 125 http://www.bohemiancoding.com/sketch/
  126. 126 http://www.bohemiancoding.com/
  127. 127 http://tribaloid.com/
  128. 128 http://twitter.com/AlanMusselman
  129. 129 https://groups.google.com/forum/#!forum/underdog-discussions
  130. 130 http://bjango.com/mac/skala/
  131. 131 http://twitter.com/marcedwards
  132. 132 http://bjango.com/mac/skala/
  133. 133 http://gravit.io/
  134. 134 http://us8.campaign-archive2.com/?u=75ff003d79c86ba72f9eb1765&id=e3ff6c8a6f
  135. 135 http://gravit.io/#newsletter
  136. 136 http://twitter.com/gravit_io
  137. 137 http://affinity.serif.com/
  138. 138 https://affinity.serif.com/#beta-form
  139. 139 http://twitter.com/MacAffinity
  140. 140 http://twitter.com/smashingmag
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

    Great article – I don’t think I’m going to stop using Fireworks for a good few years. Been using it since version 1, and it’s pretty much the only part of Adobe’s Creative Suite that I use these days!

    3
  2. 2

    John Passarella

    August 7, 2014 5:56 pm

    What are the chances Adobe would sell Fireworks to another company that could take over and advance its development. I’ve never liked Photoshop for web design work. It always seemed like shoving a square peg into a round hole. I still use Fireworks every day but I’m worried the passage of time & the advancement of the web will take their toll on FW’s design relevance.

    3
    • 3

      What are the chances Adobe would sell Fireworks to another company that could take over and advance its development.

      — Chances are extremely thin, IMHO. I think Adobe will prefer to “freeze” Fireworks and never give it up to another software company (or open-source it)… :-(

      0
      • 4

        I think they won’t freeze FW, not until the at least bring over some of the key features that the other apps doesn’t have. Like pages, easy prototyping via quick linking, etc. Among some other key features. But I don’t see them freezing before you can do mostly everything in PS or another similar app. We can hope.

        0
    • 5

      Me too, I have always used Fireworks for the web conception since 2005 and I have made a lot of beautiful website you can see my conceptions here http://yacinekebir.com/#portfolio – I have never liked Photoshop. The last work that I have done with Fireworks is http://www.xwiki.com/ last march in 2015, Fireworks is better than Photoshop, we can make a conception in a short time…

      0
  3. 6

    Fireworks is still frequently in marketplaces only because of dedicated authors investing time in creating wonderful resources to help us out. Here’s one I think you should link in the article. A set of flow charts that you can use in your next project. https://creativemarket.com/firetuts

    1
  4. 8

    So happy to see an article about Fireworks! I still use it everyday. I feel like its a little secret tool that I use, that gives me super powers over other designers struggling with Photoshop or the like… FIREWORKS FOREVER!

    5
  5. 9

    dude, it’s 2014. Leave the poor program in rest in our memories. Like freehand.

    -8
    • 10

      I know it’s 2014. And as of 2014, many designers still continue to use Fireworks.

      And it’s not because they’re soooo stuck in the past, but because finding a good replacement UI design tool is still a challenge. On the Mac side, things look pretty well, actually (Sketch 3.0, Skala, Affinity Designer…) but on the Windows side, there are no many tools (yet) that could replace the Fireworks’s extremely flexible workflow.

      This is why I compiled these two long lists of Fireworks resources (extensions, tutorials, resource libraries, etc.).

      Also, the difference with FreeHand is that Fireworks CS6 (and CS5.1 and CS5 for that matter) runs perfectly fine on Mac OS X Mountain Lion and Mavericks, and on Windows 8 and 8.1 Pro x64. :)

      2
    • 11

      Show me an alternative that works on Windows (or any platform) that can do everything FW can do with the same ease-of-use and I will forget Fireworks. Until then, I’ll continue to use it happily, every day.

      1
  6. 12

    Nice article, tons of nuggets. FW is like the Blackberry and its qwerty keyboard. Built to do certain things extremely well, but not sexy enough to sell to the masses. Love me some FW. I use it for 99% of all my UI Design work, have been since 2000.

    1
  7. 13

    There are some great premium UI Toolkits for Fireworks at http://www.fireworkstoolkits.com

    0
  8. 14

    There’s another beta alternative only for Mac called Antetype: http://www.antetype.com/

    1
  9. 15

    Let’s all agree to stop beating a dead horse. Personally I’m going all in on Sketch. I’ve been a staunch proponent of Fireworks for years. But enough is enough. I planning on not having *any* Adobe products installed on my next machine.

    Smaller dev teams that can devote themselves to specific software for specific purposes will get you further than behemoths that only want to charge you monthly so they can add your monthly payments to their bottom line.

    2
    • 16

      I hope that someday sketch be available for windows…

      1
    • 17

      Fully agree. This is why I mentioned Sketch as a very promising alternative to Fireworks. :-)

      This post was intended for those who still are using Fireworks for UI design; yes, there are alternatives, but as of 2014, I haven’t yet found an app that can fully replace a Fireworks-based workflow. Even Andrew Clarke admitted recently that it’s hard for him to replace Fireworks in his toolbox (but he moved to Sketch 3.0, nevertheless)…

      0
    • 18

      Robert S.P. L.

      August 22, 2014 4:33 am

      For those of using Windows, Mac-centric programs won’t due us any good.

      0
  10. 19

    Long life to Fireworks!!

    I’m so happy when I see articles like this. Fireworks is the best, tool for prototype and design interfaces… I love it!

    Thanks for the resources! are very helpful!!

    1
  11. 20

    It would have been nice if you had included some tutorials for people who are entirely new to Fireworks. I avoid Adobe products like the plague because opening one up is like sitting down in the cockpit of a Boeing 787. I have absolutely no idea how things work or where to start.

    1
  12. 22

    Matthew Trow

    August 9, 2014 6:27 pm

    Whilst I admire the passion behind this, it’s telling that Michel Bozgounov works as editor at Smashing – and loves fireworks – hence the rather heavy presence of fireworks related content?

    I’ve been in the industry as a coder since 1995 – fireworks had a very large role in my career up until about 2005 – yet in all that time, working with a great deal of designers, I’ve yet to meet any designer who considers fireworks an integral part of their workflow.

    Perhaps I’ve been hanging out in the wrong circles, or just maybe, Smashing is heavily bias toward the product?

    0
    • 23

      Whilst I admire the passion behind this, it’s telling that Michel Bozgounov works as editor at Smashing – and loves Fireworks – hence the rather heavy presence of Fireworks related content?

      — Is it only me or I don’t see any problem here?

      For example, we have also tons of content related to Adobe Photoshop — does this mean we’re biased toward the product, or does it mean people use it and love it, hence, its popularity and presence in our magazine? ;-)

      Perhaps you’ve been really hanging out in the wrong circles, because I can show you a very long list of designers, developers and illustrators that are (or were, in the near past) using exclusively Adobe Fireworks, for UI, Web, mobile, and icon design.

      1
      • 24

        Well, there seems to be a new post about fireworks ever other day now. We get it, you like the tool and think it’s vital for web development. That’s perfectly okay, but most of us out there have moved on to other tools and won’t be coming back.

        0
  13. 25

    Great article!
    The dead horse is still alive. I started in 1999 with FW2, stopping to work with Photoshop for webdesign.

    1
  14. 26

    Thanks for writing this article. We’ve explored other replacements after Adobe announced its impending doom, but I have yet to find a replacement. We’ve tried Sketch and Macaw but neither offers all the same tools.

    It’s still the fastest, most versatile program I’ve ever used. I wish Adobe would reconsider it’s decision.

    Thanks for holding the torch.

    1
  15. 27

    Fireworks is still the best web design tool EVER. It is a SHAME that Adobe announced to not keep on developing this great software.

    0
  16. 28

    I still use it for webdesign, and still love it.

    The way I can make slices, name those, and easly set export optimizations for each slice so easly is priceless and I don’t know any tool that can do it that well.

    0
  17. 29

    So many great articles here. Thanks.

    0

↑ Back to top