Adobe Fireworks Tutorials and Downloads – Best of


Adobe Fireworks is the industry leader for prototyping and rapid web-site building. Some of you may not be aware of this, as you may be using Photoshop for each phase of web-site production. The articles, tutorials, and resources gathered here will convince you of the power of this application.

Fireworks uses the native PNG format to keep layered file sizes down. It has multi-page rapid prototyping abilities. It can quickly export code for client reviews at each stage of the design process. It has industry grade exporting and image optimization abilities. In fact, it is the tool of choice for information architects and web designers that build large corporate websites. Why? Well, there is a good reason behind it.

Adobe Fireworks Logo1
For rapid prototyping and site layouts Adobe Fireworks is definitely an option worth considering.

What is Fireworks good for?

There is a lot of confusion about what exactly Adobe Fireworks is, what it is good for and why one should actually use it instead of Adobe Photoshop or Adobe ImageReady. The answer is simple: Fireworks isn’t a replacement for both tools, but rather a more effective, integrated environment for designing site layouts and quick mockups.

As Stéphane Bergeron puts it2, “Fireworks was designed from the ground up specifically for the task of creating website layouts and graphics in an efficient, flexible manner. It is a creative powerhouse that can really do it all, from the creative visual design stages to the slicing, optimization, and exporting of finished web graphics.”

In fact, Fireworks offers a lot of benefits for web developers:

  1. you don’t need to switch between applications to accomplish different tasks because its tool set is deep enough to cover most of your needs. Both bitmap and vector tools are integrated in one single environment allowing developers to manipulate the layout right away,
  2. you can select any object and immediately read and set its size and location — Photoshop doesn’t offer such level of flexibility,
  3. you can use high-quality output and efficient optimization features, reducing the size of Web-ready images while you are designing the layout,
  4. you can use libraries and templates with Web-elements such as e.g. form buttons — you don’t need to draw them first,
  5. you can export your Fireworks-mockups to other applications — Fireworks is designed to integrate with other former Macromedia products, such as Adobe Dreamweaver and Adobe Flash.

    Adobe Fireworks Logo3
    Adobe Fireworks offers Photoshop and Illustrator integration, multipage support and intelligent scaling.

Fireworks is an optimal tool for quickly prototyping and building web-sites. It is more intuitive and more light-weight compared to other titans of the industry. It is also included in the Adobe’s Creative Suite 3. Below you’ll find Fireworks tutorials which will help you to improve your skills and become more efficient when designing web-sites. Hopefully, they’ll also help you to produce professional and maintainable results.

Fireworks Tutorials

  • Glowing light trail4
    Learn how to draw glowing lines and shape them into a colorful design. Download is available as well.

    Glowing light trail5

  • Creating an icon in Fireworks6
    Best practices for icon design in Fireworks are reviewed. Then a step by step tutorial on creating an attractive icon is covered.

    Creating an icon in Fireworks7

  • Apple Air Banner in Fireworks8
    The tutorial author states that the reasons for creating this tutorial are to showcase the simplicity and beauty of apple style design in Fireworks. Follow along and you’ll be able to create these designs quickly as well.

    Apple Air Banner in Fireworks9

  • Rapid Fire #1: Photo-Realistic10
    The website SixThings11 has a professional multi-part tutorial series showing quick techniques for improving your imaging abilities in Fireworks. This is part one. As of the time of this writing the series is up to eight rapid fire parts.

    Rapid Fire #1: Photo-Realistic12

  • Create a Night Scene13
    This step by step tutorial shows you how to draw an attractive night scene. The techniques for creating the clouds and moon are especially creative.

    Create a Night Scene14

  • Water Drop15
    This quick Fireworks tutorial will leave you with the ability to create a water droplet that looks like you could reach out and touch it.

    Water Drop16

  • Motion Blur in Fireworks Tutorial17
    If your considering adding new filters to your Fireworks setup then check out this tutorial that reviews a Motion Trail filter.

    Motion Blur in Fireworks Tutorial18

  • Create Vista-like Wallpapers with Fireworks19
    Popular wallpapers available for modern operating systems can be created just as professionally in Fireworks as Photoshop or Illustrator. Learn the Fireworks way in this tutorial.

    Create Vista-like Wallpapers with Fireworks20

  • Fading An Image Into The Background Color21
    This video shows how to quickly apply image fades in Fireworks. The commands for doing this are built into Fireworks and take seconds to implement.

    Fading An Image Into The Background Color22

  • Aqua-effects with Fireworks23
    A set of tutorials for creating Aqua-effects with Adobe Fireworks. Unfortunately only in Spanish Portuguese. (thanks, Rodrigo!)

    Aqua-effects with Fireworks24

  • Fireworks for Illustration25
    Alex Walker gives some tips for improving your drawing skills in Sitepoint’s Design View newsletter. He has this to say, “Fireworks has evolved to become an exceptionally good illustration tool. In fact, over the past 18 months, Fireworks has been the primary drawing tool that I’ve used to prepare SitePoint’s feature article illustrations.”

    Fireworks for Illustration26

  • Shiny Glass Tutorial27
    This tutorial will show you how to produce shiny glass letters.

    Shiny Logos Fireworks Tutorials28

  • Gettin’ Gritty with Fireworks29
    In another issue of Sitepoint’s Design View newsletter Alex Walker shows us how to add some texture to soften the hard clean lines of Fireworks vector tools.

    Gettin Gritty with Fireworks30

  • Creating a Collage with Fireworks31
    Learn techniques for creating a digital collage in Fireworks bound with digital tape.

    Creating a Collage with Fireworks32

  • Using the 3D Rotate command in Fireworks CS333
    Get access to this command to add to your Fireworks install. Then learn how to use it in this tutorial.

    Using the 3D Rotate command in Fireworks CS334

  • Vector Masking Interlocking Letters35
    This is just one of many Fireworks video tutorials available on You Tube36. In this tutorial learn how to create overlapping vector letters quickly with the mask tool.

    Vector Masking Interlocking Letters37

Fireworks PNG Downloads

Downloading artwork and reviewing its layers reveals how it was created. Adobe has some excellent source files available for review at Fireworks Developer Center – Samples38. Some of these samples are shown below.

  • XD Brownbag Poster39
    This is a rare example of an image being created in Fireworks and destined for print. The drawing techniques are well worth your time to download and review this source file.

    XD Brownbag Poster40

  • Logos41
    Exclusive sample logos created with Adobe Fireworks, shared to show Fireworks users how they were made. You can download the zip file for free.

    Logos for Fireworks42

  • Pen and gradient tools showcase43
    Download and review this creative website template design created in Fireworks – of course.


  • Web 2.0 styles for Fireworks45
    A free set of 48 Web 2.0 styles for Fireworks 8 & CS3.

    Logos for Fireworks46

  • RokWebify47
    The designers at Rocket Theme48 release new Joomla49 template designs every month. They switched from using Photoshop to using Fireworks to take advantage of Fireworks rapid website design abilities. Download and review one of their sample templates available through Adobe.


Fireworks Forums

Sometimes it’s easier to ask an expert directly instead of browsing through hundreds of tutorials trying to solve a problem by yourself. Fireworksguruforum51 will help you to find answers to your question. Besides, the forum also provides a number of tutorials and resources related to Fireworks. Below are some of the Tutorials and PNG downloads posted to this forum.

  • A Teddybear52
    As a tutorial this is short and incomplete. Though it is a beautiful and fun icon design created in Fireworks. The way that each piece is shown will give you an idea of how this was created. The artist also give some tips as well.

    A Teddybear53

  • A Simple Little Pencil54
    This is also an image that shows the pieces that make up its total design. A good learning resource and an excellent icon design.

    A Simple Little Pencil55

  • Using Blend Paths to Create Wavy, Abstract Background Effects56
    This is a step by step tutorial that shows you how to create linear blends and popular wavy abstract line designs. These types of designs make great header backgrounds.

    Using Blend Paths to Create Wavey, Abstract Background Effects57

  • A computer mouse in 7 layers58
    Another design that shows how each piece fits together breaking down its construction process. A good design to learn from.

    A computer mouse in 7 layers59

Articles About Fireworks

Further Resources

You can find more Fireworks tutorials and resources in the links below.

↑ Back to topShare on Twitter

Sean Hodge is the creative mind behind AiBURN, a weblog about design, creativity, inspiration and graphics.

  1. 1

    Todd Zaki Warfel

    March 18, 2008 7:14 am

    In fact, it is the tool of choice for information architects and web designers that build large corporate websites.

    Adobe Fireworks is rather unknown and unused.

    A bit contradictory. Don’t get me wrong, I’m a fan of Fireworks, but it’s not the tool of choice for information architects and web designers that build large corporate websites. Those guys are using Visio for IA, not Fireworks. Unfortunately, Visio is the standard in large corporations and most IAs are not using Fireworks.

  2. 2

    Vitaly Friedman & Sven Lennartz

    March 18, 2008 7:27 am

    @Todd: thanks, the article was updated.

  3. 3

    Finally, come on the fireworks!!!

    Very underrated piece of software, i use exclusively for the mock stage of my sites. Photoshop and illustrator will always have a place in my heart, but for combining an all in one web design tool you cant beat fireworks!!

  4. 4

    Great article!

    Thanks! (Dugg!)

  5. 5

    I’ve tried using Fireworks a few times, and I’m just not convinced that my productivity would be improved by it enough to effectively learn a whole new package and way of working. OK, so there are obviously instances where Fireworks is better than PhotoShop or Illustrator, but given that, like so many others, I’m much more comfortable using those packages, I’m inclined to think that my downtime/freetime would be better spent improving my skills in PhotoShop and Illustrator than trying to add yet another package to my arsenal

  6. 6

    The Aqua-effects with Fireworks tutorial is in portuguese, not spanish.
    By the way, I’m in the group of the people who prefer Photoshop than Fireworks. Let’s see if this article is gonna change my mind. ;-)

  7. 7

    It’s about time FW got some love in the design community! :)

    It is a phenomenal tool – really the best of both worlds from PS and AI. Great post!

  8. 8

    Well darndiggity…. I used to use fireworks, but that was 6 years ago… I then switched to photoshop and now i’m getting the feeling i should start switching back…. or at least step down from photoshop and start using illustrator for webdesign… argh…

  9. 9

    Great post may even make me crack open fireworks again!

    @wez: I think you wanted to say “bring on the fireworks”… the word choice you made creates an altogether different mental image.

  10. 10

    fireworks is definitely better for web layout ‘n design. i’ve been using it since it’s conception along with photoshop/illustrator.

    photoshop/illustrator is better for focusing on achieving a more complex image/photo/illustration effect. it’s a good thing they’re so integrated. although everything can still be done in photoshop, fireworks is more efficient. this is a superb article.

    another factor to consider: fireworks is so much cheaper than ps/il and it can do everything a site design needs(especially with clean web2.0 designs).

  11. 11

    I Love it, i use Fireworks since 4 years and i like his simpilcity, and the feautere range ist very big, it have the best of Photoshop and Illustrator but only for the Web. , something it´s better to too in Photoshop like Image Manipulation that´s true, but for Prototyping it´s the best for me. It´s really a phenomenal tool, and it´s my big favourite, PS or AI too but it´s a smaller love !

    Thanks for the great Post !!!!

  12. 12

    Great article, but I still prefer working in photoshop to create a mockup for a website, send it to a client to review and when done: slice it up and convert it to CSS! I guess it just depends on your own taste…

  13. 13

    Internet Tycoon

    March 18, 2008 9:13 am

    I’ve been an Fireworks user for ages, and I can advice other Fireworks users to use Photoshop tutorials also, because you can learn a lot from them and it’s not that hard to translate Photoshop to Fireworks.

  14. 14

    Christian Watson

    March 18, 2008 9:14 am

    Great post! I’m also a Fireworks lover — it’s so much easier to use than PS. Just in case you needed yet more links, here are my Delicious Fireworks links.

  15. 15

    Thanks for the post. As a big Fireworks fan, it’s nice to see it getting some publicity.

    Fireworks has been my weapon of choice for a few years now, quickly, here’s why:

    Photoshop was designed for… (get ready for this) Photos! Thus the name. For people editing and manipulating photos, nothing works better.

    Illustrator was designed for… (you guessed it) Illustrating! For illustrating or working on vector graphics, I wouldn’t use anything else. It is really good.

    When it comes to web graphics though, PS is too powerful and has too many unnecessary options. Illustrator isn’t optimal—graphics for the web, unless you’re using flash or SVG are always going to be displayed as bitmap images, Illustrator is designed for vector work. This fundamentally doesn’t mesh well.

    Fireworks, on the other hand, allows you to use any mixture of vector and bitmap objects but it always displays them in pixels (like you’d see them on the web). You have complete control over sizing and positioning of things (illustrator when exporting will size your image to fit the paths in it, this gives undesired results often). Fireworks has web-appropriate filters, effects, and styles. Then, maybe, most importantly Fireworks gives you the most control over how images are optimized and exported.

    Bottom line: Fireworks is completely designed for web graphic, PS and Illustrator are not.

  16. 16

    Carlos Leopoldo

    March 18, 2008 9:32 am

    I always use Fireworks because it’s so much easier to use than Photoshop :D
    Great Post!

  17. 17

    At last ! Fireworks has finally got some recognition. Great article.

  18. 18

    I’ve used Fireworks almost exclusively for web design for the past 6 years. It’s just a hell of a lot more conducive to rapidly building a site than Photoshop in my own opinion. And the export options are brilliant.

  19. 19

    good 1! :D

  20. 20

    Finally Smashing Magazine recognises Fireworks. A far superior tool for web page mock-ups. Massively underrated and far easier to use than Photoshop. Great article. Thanks.

  21. 21

    Great post guys !!!
    In the last few days I have been feeling a little disappointed with my skills in Fireworks, but now I just got a whole new world to explore.

    Keep up the good work.

  22. 22

    I absolutely LOVE Fireworks, I do most of my work in it. for advanced photo-editing PS is king, but Fireworks makes it really easy to design for the web very fast and with high quality too. The pages feature is really great. Thanks for this awesome roundup!

  23. 23

    Awesome article, guys. Thanks for giving Fireworks some love, as it’s really the unsung hero of online design tools. Even more so, now that the Mac & Windows versions have parity in CS3.

  24. 24

    After 5 years of intense photoshop use, switching to Fireworks a year ago has been a refreshing event. I am more creative and the app leaves a much smaller footprint. My occasional visit back to the big PS has left me frustrated every time with clutter and obstacles around every corner to perform even the simplest tasks. A simple yet powerfull interface lets you focus on being creative!

    If you are a web developer/designer then you should be using Fireworks. Make the effort and learn the app. You wont be disappointed.

  25. 25

    I’ve always liked Fireworks. Back when Photoshop didn’t have vector tools (v5?), Fireworks was the best tool for web design. I should really start using it again now that all the good tools come packaged together. Thanks for the perfect jumping off point for getting re-acquainted, Smashing!

  26. 26

    Thank you SM!
    I’m in love with Fireworks since v.4.
    This is definitely the best tool for web design!!

  27. 27

    That’s great collection of resources collected here. I’ve been with Fireworks since MX release, and soon enough it became the tool of choise for me. I was pretty much unhappy when Adobe bought Macromedia since i didn’t know what will happen to Fireworks, but luckly enough Adobe didn’t stop the development on it and with CS3 there’s so much more possibilities than ever before :)

  28. 28

    You guys rock! Thanx for this great website. I found out about this site 6 months ago and I’m lovin it so far. I know Fireworks is good and it’s great you guys point it out!

  29. 29

    Fireworks is a simple to use application, to complete a simple task, unlike photoshop. I know that PS has more advanced options in some effect-generating area, but, for web-development, by working in FW you’ll be more productive ;)
    It’s simple to learn software, so start using it :D

  30. 30

    Thank you for giving Fireworks its day in the sun. It is far better than PS for designing websites, and I hope it’s around for a long time.

  31. 31


    Great post once again! I learn so much things here! It’s amazing! I do not use fireworks for mock-up stage, I use photoshop… I could do all of these in Photoshop… What are the main advantage to use Fireworks vs Photoshop?

    Thanks !

  32. 32

    Thanks! I really prefer fireworks over photoshop, fireworks works much easier with great results, especially for web usage.

    Great article.

  33. 33

    Wow! I love lists giving me more information. Great work!

  34. 34

    I’ve been using Fireworks since version 4 and use it for pretty much all my web graphics work.

  35. 35

    happy to find good stuff about fireworks, thanks all for efforts

  36. 36

    “I could do all of these in Photoshop… What are the main advantage to use Fireworks vs Photoshop?”

    - Read the post – maybe you’ll find out……

  37. 37

    Just last night I was looking for some cool stuff for Fireworks…As always, you keep reading minds! Thanks!

  38. 38

    Thank you for the post!

    I have been using Fireworks for about 1.5 years now and I find it more efficient than Photoshop when it comes to Web UI works.

    I never took Fireworks seriously until about 2 years ago, when I went to an interview for UI Designer position, the hiring manager told me that she couldn’t hire me becase I didn’t know Fireworks. Imagine my shock! A manager decided not to hire me because of the software I chose to use, not because my design capability, critical thinking, attention to detail and team player quality.

    Anyways, I turned my outrage into positive energy and picked up a copy of Fireworks and digged right in.

    Now, I just can’t go back to Photoshop anymore for Web UI work. Fireworks is so much easier to use for creating UI. I don’t need to stop to create my design. I simply create it. :)

    Highly recommended!

  39. 39


    March 18, 2008 6:56 pm

    Its nice to see Fireworks getting some attention it deserves.

  40. 40

    Very usefull links, this is another tutorial for how to make a vista button menu, and change the all style color in one click, very simple and easy
    Is in Spanish, but is step by step with images.
    enjoy it.

  41. 41

    I am great fan of Fireworks from last 4 years. I was in hunt of tutorials and best practices like given in that post. So a lot of thanx to smashing

  42. 42

    I use Fireworks for all web related works.. Its easy.. and you can do it really faaaast.. Fireworks Rules..

  43. 43

    very helpful links. thanks! i’ve been learning a lot from smashingmagazine. keep it up :)

  44. 44

    Awesome article (as quite usual for Smashing Magazine!). I think Fireworks could be the -definitive- tool for prototyping and web design but … there are some inconsistencies and ingenuity in the UI that (sometimes) could drive you crazy!

    Four examples:

    - the slice-name field in the property inspector is waaaaay too short and not resizable. Try to write “headNav_item2_over_eng”!;

    - the slice-name field is NOT CaseSensitive! Woah! In a certain way … let me explain it. Try to make a slice and name it “sliceoff”, then unselect it and reselect it, now rename it “sliceOff”. Unselect, reselect and … ta-daa! … the name is still “sliceoff”.

    - you cannot find &rename slice-names (and it could be a great timesaver if you have to make a (for example) spanish version of the site and you would like to substitute alle the “_eng” occurency with “_esp”);

    - create two slice areas in the same document; define them as “gif” and “index transparency”. If you set the Matte Color for one of these gif’s you have set it for ALL. The Matte Color attribute is document-related, not slice related! This could be a silly issue, but if you’re planning to do some icons that have to be “gif “AND simulate alpha trasparency over different backgorund (one dark and one light) you have to make them in separate documents.

    I think that the serious web designer should make Adobe aknowledge of these (and others) small problems. If they could fix them FW would be perfect!

  45. 45

    After using Photoshop almost a decade, few years ago I’ve tried Fireworks because my colleagues used it and I was amazed, since than I’m using just Fireworks for designing websites or flash elements because is fast, reliable, stable, uses vector graphic much better than Photoshop and it’s really some cross-product between Photoshop & Illustrator. Of course for working with photos, printing materials etc. Photoshop is No.1, but for web it’s the best tool ever.

    Too bad that even in version CS3 it still cannot open Photoshop PSD files well, meaning it opens it but have problems with masked layers, hope Adobe will fix this issue in next version.

  46. 46

    Fireworks is just a great tool for web designers. I’ve been using it 4 years now and find it really simple and easy to use.

  47. 47

    Great post! Glad to hear that I am not the only one who loves Fireworks :)

  48. 48

    As inconsistencies there is one (big) annoying issue for me that it appeared in CS3 version, and wasn’t in the 8 ver:
    – when you have more than one layer into a folder(layer), try to drag&drop any layer(object) to be on the top of the others. can only get it 2nd. to get it to be the 1st one you have to move the f1st layer to actually become 2nd… pretty lame!

    FW has another issue when working on big files (size/resolution), but having to work on a file like that rarely happens :D Usually all things work smoothly on fireworks ;)

  49. 49

    I was almost almost going to switch to PS after using FF for 7 years as I could not find articles supporting it and was thinking Adobe is going to kill it. …this article restores my confidence in it. I am reinvigorated to learn more of it’s advanced features by studying the tutorials.

    BTW Do you know where I can find a tutorial on designing an ebook cover in FF?


  50. 50

    i think we should not mix concepts as IA is not equal to web design: Visio, OmniGraffle… are tools for information architects. Photoshop, Fireworks, etc… are tools for web designers.

  51. 51

    Awesome post and resource section. Fireworks is great and is commonly underrated!

  52. 52

    Using Photoshop for web design is like using an aircraft carrier to go get the weekly groceries.

    If you don’t think your productivity will increase with Fireworks, just try it and see how many LESS STEPS it takes to create a simple button for your web design.

  53. 53

    Hi, thanks for this concise overview of what Fireworks actually is, as well as all the useful resources. The timing of this article could not be better, as I am currently in the early phases of redesigning my website from the ground up to replace the WordPress template I’m currently using (and did not create). I will definitely give Fireworks a go now.

    One questions I have is whether or not Fireworks has smart color management, specifically being able to re-color multiple elements at once. For example, right now using Photoshop, if I have various elements that all use the same color, and I want to change the color, I have to change the color of each element individually. I’d like to the be able to tag an element color with a “reference color,” so when I go to change my reference color all the elements change color as well. Maybe I’m dense and this is already possible, I just don’t know!

    Again, thanks for the post,
    - Lee

  54. 54

    I’ve been a Fw user since v4. Love it. After Firefox and Outlook, Fw is my most used application. I was terrified when Adobe bought Macromedia, that they would rape, bloat, or abandon my beloved apps. Thankfully this didn’t happen.

    A lot of peers I’ve spoken with look at me strangely when try to tell them you shouldn’t be using Ps to design, web or otherwise. Ps is graphics editor, not a design tool. Whenever i open Ps it surprises me how much of a pain things can be.

  55. 55

    Thanks for coming out with the Fw article! We need to see more of these.

    A lot of good articles there, it’s going to help my refine my Fw skill even more.

  56. 56

    One of the things I dislike about Fireworks 8 is that it will not save 32bit PNGs with Alpha transparecy correctly if the image has any white in it. Granted you should use 8bit Firework PNGs for the web, I prefer to use the 32bit ones for Flash.

    The other thing is that Fireworks’ color palette is pretty weak compared to Photoshops, all they give you is the basic Windows color picker. And another thing is fonts, Fireworks is not great at styling fonts.

    Fireworks CS3 is pretty sweet though, the new UI symbols built in make it even easier to make sample forms in your web design mockups.

  57. 57

    I’ve been a user since Fireworks 3, ages ago.. and love the program… it’s simply the best. Don’t be fooled by it’s dull and unattractive appearance, which I hope they will update finally in CS4.

  58. 58

    I like Xara Xtreme for a quick layout creation
    I used FW once and it´s OK but I can leave without it :))


  59. 59

    This post is bulging with functional quality resources. In fact, it is rare when I make a written record of a resource. It must have earned its worth for that to happen. I noted several of these resources in my personal reference library.

    I commend you for the obvious time and effort you dedicated to this post.

    Continue to produce quality work.

  60. 60

    I’m glad to see fireworks getting some recognition. When I started at my new job 6 months ago, my creative director turned me onto fireworks right off the bat. Ive been using it ever since and haven’t looked back. Dont get me wrong, I still use photoshop and illustrator when I need to, But I use Fireworks at all costs. “Paste Inside” is so damn cool. Great article – I hope to see more Fireworks related threads.

  61. 61

    Awesome, you guys make wanna go and buy this software now even when i know it and i dont use it. Im gonna give it another try, maybe i end up buying this.

  62. 62

    Thanks for all the comments everybody. I’m glad the resources are helpful. And I appreciate the debate and counterpoints as well. Its great to read all the opinions and further resources brought up in the comments. Thx.

  63. 63

    I’ve been using Fw since v4 waaaay back, like many have commented here, and though using Ps and Ai when required, I can only praise Fw for web design and UI prototyping.

    My wife uses Ps for her photography, which is it’s main intented use, and she gets great results with it, likewise with Ai when she’s doing illustrations. But I’m a web designer, and Fw is my primary design and creative tool. Now with CS3 including more features and workflow enhancements, plus the Ps LiveEffects, I’m set for a while.

    Thanks for the top article Smashers. Keep it up!

  64. 64

    Thanks a lot, Smashing Magazine ! Checking your site everyday for months now (maybe years actually, time runs fast), I was waiting for THIS article for ages. I use Fireworks for most of my web design and rarely face the needs to open Photoshop or Illustrator.
    Big big thanks again, you’re still gonna be one of my start pages for a long time.

  65. 65

    such good effect you have taken and given us a good teaching on this adobe design it is simply appreciating very good work

  66. 66

    Thanks for pointing out the usefulness of Fireworks!

  67. 67

    Fireworks should be THE tool for Web Design but as stated here by many people it’s not still appreciated as much. Personally speaking I’ve used FW for many projects and of course in conjunction with PS & AI. It proved (FW) to be very fast an reliable and GTD like app for creating mockups. Another great aspect of FW is that it allows fast and accurate preview of the Web site layout and behavior which is crucial when dealing with clients wishes and inputs. This article motivated me to use FW for my current project so thanks SM for bringing that great piece of software back in the spotlight.

  68. 68

    I’m a huge fan of FW and use it daily for my mainstream work as well it being the subject of most of my articles for Adobe and Community MX.

    Thanks for the mention in your article, btw. Just a point though, Community MX has many free articles and tutorials.

  69. 69

    Thank for your tutorials.

  70. 70

    FINALLY!!!!! Fireworks gets some recognition!!!!!! This app is by far the greatest app for web graphics there is on the market. If you like PS and AI, just imagine both of those in 1 much more simple application to use. I used to use Photoshop until a friend of mine told me about Fireworks, like most uneducated designers, i dismissed it immediately. One day I decided to pick it up, and I have never put it down ever since. Just for those who may think, Fireworks is for amateurs, many of the top design firms in the world use it as their primary web design tool, collaborating with PS for their nice Brush system. Don’t be fooled, you can easily create almost anything in Fireworks as another designer can in PS and in much less steps and time. What a gem this application is. It’s to bad it’s so underrated and only now getting attention from the community. I HIGHLY RECOMMEND this tool to anyone from a novice to an expert, the learning curve is extremely short and its a fun application to fiddle with.

    One more thing, for those hardcore PS users that don’t like to reach outside their “bubble”. I was one of you a few years ago, until I opened my eyes and realized PS isnt the only tool out there and picked up Fireworks. Never will i go back!

    Good job Smashing Mag, thanks for getting this up!

  71. 71

    Add me in the list of Fireworks users. I’ve been using it for exactly 10 years now and love it. I learnt how to make websites with fireworks, right when i gave up page Pagemill for dreamweaver. At the time photoshop (4) couldn’t do much for you anyway in the field of web design.

    I actually started using photoshop for web designing only in the last couple years, but mostly because the company i started working at did not have fireworks…

    Now i tend to choose one over the other, depending on the final design idea i have in mind, and the importance of photography in the layout. But still FIreworks is by far the best, fastest, friendly way to create and export web layouts. That’s what it was madd for and you can’t beat that.

  72. 72

    thanks for the roundup fireworks is awesome, i always fire it up before photoshop

  73. 73

    Yup! When it comes to Web Graphics PS, ILL, FW can do the job but in Software Simplicity and Layout FIREWORKS is the first option. In fact the new creative suite of Adobe, interface was based on fireworks and flash.

    This is what i observed! Love FIREWORKS

  74. 74

    Brilliant article guys. I’ve been using Fireworks for rapid prototyping for some time now, and I absolutely love it!

  75. 75

    Great to see FW getting some props – aside from coding I spend 70% of my day using FW. After getting nervous that FW was about to bite the dust with Adobe ousting Macromedia, I was gearing up for an upgrade in my knowledge of PS, but FW goes form strength to strength.

    My colleague a once avid PS user has even come round to my way of thinking : keep PS for photo manipulation and web stuff for FW. There’s nothing better.

  76. 76

    Adobe Fireworks is really amazing. A web designer should use Fireworks in the Web design projects. I think it is easy to learn specially when we have fireworks tutorials.

  77. 77

    Awesome post and resource section. Fireworks is great and is commonly underrated!

  78. 78

    awesome resource.
    long live fireworks, it’s easier than photoshop


  79. 79

    Excellent list, I have to check out some of these links.

    Fireworks has always been my primary tool of choice for web design.

  80. 80

    Just!! AWESOME! thanksss!! from..Colombia

  81. 81

    Yes, FireWorks rocks. I have been using it since 2005 and I am happy with the results.

    Nice post by the way.


  82. 82


    can u make something like this in photoshop


  83. 83

    Stéphane Bergeron

    May 16, 2008 8:12 am

    comment 53:
    > Using Photoshop for web design is like using an aircraft
    > carrier to go get the weekly groceries.

    Not exactly. To me it’s not the size of the app but its nature and workflow. A better methaphor for me would be that using Photoshop for Web design (or any kind of layout work) is like using a hammer to drive in a screw. It will achieve the intended result but it’s completely the wrong tool for the job and once the job is done, changes and editing are far less flexible.

    Whether this is for the Web or for print, Photoshop is a terrible layout application IMO. If Fireworks didn’t exist, I’d create Web sites in Illustrator, not Photoshop.

    Any vector based apps makes for a far more efficion design and layout app than a pure raster based app like Photoshop. Object/vector based apps offer a lot more flexibility and precision.

    Like Paul says iun comment #24, Photoshop “offers obstacles around every corner to perform even the simplest tasks”. For example, just create a rounded corner rectangle with a stroke and a gradient fill at a specific pixel dimension. Creating it will be a similar job in both apps but, if you need to edit its corner roundness, give it just 1 rounded corner or modifiy the gradient, these are just a matter of modifying the existing object settings in any vector based app like Fireworks. In Photoshop, you have to re-do it from scratch. That is just a tiny example of where any vector based app is better suited to layout and design work…

  84. 84

    Stéphane Bergeron

    May 16, 2008 8:23 am

    @ Lee (comment 54)
    > One questions I have is whether or not Fireworks has
    > smart color management, specifically being able to re-color
    > multiple elements at once. For example, right now using
    > Photoshop, if I have various elements that all use the
    > same color, and I want to change the color, I have to
    > change the color of each element individually. I’d like to
    > the be able to tag an element color with a “reference
    > color,” so when I go to change my reference color all the
    > elements change color as well. Maybe I’m dense and this
    > is already possible, I just don’t know!

    Unfortunately, no it is not yet possible and this is a request that has been made to the FW dev team repeatedly for years. Please join your voice to the choir and request it as well here:

    Despite all its strenghts, color management is really one of Fireworks’ weakest areas. To me it is actually downright primitive when dealing with colors. Apps like Illustrator and InDesign (FreehAnd, Quark, etc, etc) have had sophisticated color management features, including global color swatches (what would permit you to do what you want) for many years now. Why this area of Fireworks still has not been improved is beyond me. Maybe for the next version…

  85. 85


    June 4, 2008 1:45 am

    i love fireworks so much cos u can go to internet and click google and type wallpaper after you do that click on image and then search up and then click on your flavourite image and then copy onto fireworks and then pasta and then you go to file and import click on your flavourite pictures and then click open and it will open up

  86. 86

    thanks for the great article and awesome tutorials – very useful! I love working with fireworks cause it is so handy and not too complicated.

  87. 87

    I used Firework a few time, but no have much plugin and element of design is developed for it. But Firework CS3 have “Photoshop live” filter, that’s great :)

  88. 88

    This is such a great spot for designing… Thank you. You are such a big help to me… Hope you’ll post more effects…. God Bless!!!

  89. 89

    Patrick Rushton

    July 28, 2008 10:50 am

    @lee (comment 53) – the simplest way to achieve this is through the search & replace dialogue where you can replace any instances of a colour with a different colour throughout the entire document.

  90. 90

    Wheres the download… ?

  91. 91

    This is a great ressource. Thank you! I have been using Fireworks for maybe a year or two now, and keep loving it for its simplicity and flexibility. I was wondering if there were sorts of extensions, a bit like the Photoshop brushes, that allow you have more shapes to choose from: like undulate lines, hearts and what not in addition to the straight line, squares, circles…

    Also, is there a good ressrouce for free/affordable Fireworks filters of decent to good quality ?

  92. 92

    wow, two of my works are featured, my logos and my nightscene tutorial , great !

  93. 93

    Just installed Fireworks CS4 and found it does not use the monitor profile to display colors correctly!

    Bizarre. Monitor is profiled to use colors correctly, photoshop is fine, but Fireworks doesn’t show clients’ palette of colors correctly since it doesn’t use the monitor’s ICC profile.

    How can Adobe do this with an app for design professionals? I need my clients’ colors to be correct and use the monitor profile. Come on Adobe!

  94. 94

    thks.It’s very good
    very butifulllllll .

  95. 95

    thanks.. very nice

  96. 96

    I dont like it, linking system shouldn’t be that complicated!!

  97. 97

    I would like smashing magazine to post ornament tutorials in 2009. I could not find on the web. Thanks!

  98. 98

    how nice,
    thanks ,lot of thanks

  99. 99

    Great sharing , thanks.

  100. 100

    Jeronimo Nuñez

    April 29, 2009 3:16 am

    Long live to fireworks!

  101. 101

    Dude whats next, Only ppl using it will be totally out of sync of blogging.

  102. 102

    whats is use of firework

  103. 103

    best help

  104. 104

    Nice tutorials! I’ve been using Fireworks for little over 10 years now. I recently created a video on how to design a website using Fireworks. Visit my site to check it out:

  105. 105

    @ Mr Locke

    Pity that I am not allowed to view streaming videos from work and my internet connection at home is messed. Do you by any chance have a text tutorial on designing a website in Fireworx?

    I’m definately interested.

  106. 106

    @Juanne – I don’t have a text tutorial version, only video at the moment. Sorry!

  107. 107

    I’ve been trying to move to photoshop but fireworks packs so mush punch that I’ve had to reconsider my decisions so many times. I use fireworks for my web design mock-ups and love it. This article will help me supercharge my skills because all I know about fireworks I learned mostly from trial and error. Thanks big!

  108. 108

    I used PS because everywhere you look you see it! But i will give FW a try, maybe i like it?

  109. 109

    Junaid Ahmed Atari

    November 19, 2009 12:00 pm

    Who can beat FireWorks when you want to do anything in Design :)

  110. 110

    In the future, fireworks will come close to photoshop and AI, as the need for it increases. If Adobe has a vision. Fireworks will become industry standard software when it comes to photo, graphics and image.

  111. 111

    worked great thank you very much my business;)

  112. 112

    I was a beta tester for the original version of Fireworks and have been using it since then, that makes about 12 or 13 years I have been using it for web graphics and site prototyping. If you don’t know how good it is after about ten minutes of using it then you never will. Stop telling people how good it is, the less people who use it the better it is for my business!

  113. 113

    I’ve been so depressed that I was going to have to use photoshop to do this because it works opposite to my thought process, but the addition of Fireworks and Smashing Magazine into my life has been absolutely divine! TY SM!!

  114. 114

    nice tutorial.. it helps me a lot.. I’m a I.T student.. very useful tutorial.. thank you very much.. keep on working.. :))

  115. 115

    Andre Reinegger

    June 6, 2010 5:08 am

    Nice list of great tutorials!!!
    I have recorded a video-tutorial to people who use Photoshop or Illustrator for web- and screendesign to show the difference and the real benefits of using Fireworks for screenlayouts.

  116. 116

    The tutorial is great. Still, I can’t decide whether it’s going to be our solution for the future. Guess I need to kessera it with ‘take-it-or-leave-it’ ;)

  117. 117

    Really nice tutorials! thanks for sharing!

  118. 118

    I m completely speechless for this article. I m very happy read this article and very helpful for me. bcoz I m faculty of ADMEC MULTIMEDIA Institute.
    my website is: admecindia

  119. 119

    Here are 50 reasons to prefer Fireworks for webdesign.

  120. 120

    Love the tutorials Thanks a lot!

  121. 121

    Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for – in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it.

  122. 122

    Please update the aqua-effects tutorial link. Imasters website has changed place from UOL to an independent company!


  123. 124

    Smashing article!

  124. 125

    Please where can i find the video tutorials on using fireworks?, whoever has a suggestion should please reach out to me through my email because i don’t visit this site often.
    my email is > malipotoasuquo(at)

  125. 126

    where can i take software tutorial downloads and keep them for my review files

  126. 127

    battlefield 3

    May 8, 2012 1:12 pm

    Its such as you learn my mind! You seem to know a lot about this, such as you wrote the e book in it or something. I feel that you can do with a few p.c. to pressure the message home a bit, however instead of that, that is great blog. A fantastic read. I’ll certainly be back.


↑ Back to top