Why More and More Designers Are Switching to Fireworks

Have you ever wondered which tool, Adobe Photoshop or Fireworks, is better suited for web and application design? There are many designers who use Fireworks. But there are far more who use Photoshop. However, this is starting to change. More and more designers are switching to Fireworks as their tool of choice for many reasons. Here are four of the most compelling ones supported with in-depth articles written by other designers:

Everything Is Faster and Easier in Fireworks

This reason is huge. It’s not just one or two things that are faster in Fireworks than Photoshop, it’s everything. You not only save time, but you also save your energy because you can do less to get your desired result.

Fireworks Gives You a Better Output for the Web

Images and graphics used on the web need proper compression so that they load efficiently and don’t use too much bandwidth. Fireworks gives you a proper output every time that’s suitable for web usage.

Fireworks Is Full of Powerful & Flexible Features

There are many powerful and flexible features that Fireworks offers that Photoshop doesn’t. This isn’t just one or two features, this is a lot of features. The articles below go into detail about each of them. Just Fireworks’ features alone is a make or break deal.

You Can Use Fireworks for the Entire Design Process

From the first stages of wireframing, to designing visual mockups and to finally making an interactive prototype, you can do it all in Fireworks. Fireworks lets you create your own library of symbols that make wireframing a breeze. It also lets you create your own graphic styles that make designing mockups quick and easy.

There are also reasons many designers use Photoshop. Photoshop came before Fireworks. It’s what many started out using and what they’re used to using. In order to convert over to Fireworks, they have to change how they do things now. And for some people, that’s asking a lot. But if the change is an upgrade from before, the change is well worth it. In this case, the upgrade is huge. You’ll not only work faster and easier in Fireworks, but you’ll get better results in everything from designing your graphics to exporting them for web development. The process is seamless from start to finish.

Photoshop has its strengths. But designing websites and applications is not one of them. That honor belongs to Fireworks. If after reading this article you still don’t see it, then maybe these interviews with Fireworks users can convince you.

Subscribe to Newsletter







Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 19 Comments

  1. Toby Keller Reply

    Man, I tried this a few months ago, I really tried. I just could not escape the feeling that I was stuck in the crumbling remains of a condemned building. Compared to the CS5 incarnations of Illustrator and Photoshop, Fireworks feels like a Macromedia app circa 2003. Probably because IT IS. I don’t think Adobe has ever given Fireworks the attention it deserves – instead they just keep polishing the same old turd to fill out CS5 spec sheets.

    For now I’m sticking with Illustrator for my web design work, which IMO offers many of the speed benefits of Fireworks over Photoshop but with a much more polished interface. Not to mention vastly more powerful graphic styles, with multiple fills and strokes per shape, which is sorely lacking in Fireworks.

    • Eyal cagan Reply

      Well Fireworks is… Illustrator and Photoshop together + like 100 more features, that you can’t even think about, because you work with software that made for the printed media…
      Consider that every ‘web’ related feature you got in this software is a patch made to try and clone a ‘native’ Fireworks feature:
      You remember image ready? do you think slices shouldn’t have the ability of being named and keep the names from within the software? only from this patchy window call ‘save for web’? and why you actually need a special tool to select them…
      I can count many features you don’t have access to, but then it will be a really long post (Hint – check Fireworks extensions, there is more then 10)
      And don’t forget to check transparency when exporting 24 bit PNG (You still get more Kb’s on your file size 😉

  2. Bryan Chalker Reply

    Terrific article, Anthony. Been an avid FW user since v4. Love Photoshop, but Fireworks fit like a glove when I first started using it. It now fits like my own skin 🙂

    I miss one feature that I used quite frequently, years ago…the Data Wizard plug in. Allowing the dynamic banner/graphic creation. A real strength of the program, that was never truly leveraged. Perfect time to bring it back, imo.

    Thanks again for an article I can forward on to “the others”.

  3. Chris M. Welsh Reply

    A better option is to run your images through pngcrush before you launch your site. It reduces the file size while maintaining the same exact image, pixel-for-pixel.

  4. Igor Reply

    I use FW to work since Macromedia. During this time he is only getting better. His ease and simplicity, so amazing … I had to write commands for him, and they worked, removing a lot of hours of routine work. I want to thank the developers FW, they made simple and extremely flexible product.

    Personally, I do not have filters in Photoshop, for example, reduce noise or color actions. And I think Adobe did not do that in the near future, because it will replace photoshop far back in time in web design.

  5. F. Reply

    Thank you for this article!

    This might be some redundant info but these are some of my reasons why FW works much better than PS when it comes to digital graphics:

    PS: Adding a blur to a shape, you have to rasterize it.
    FW: You can add any filter to any object

    PS: Suddenly you can’t use a certain filter for a certain layer. There are no explanations on why this is the case and you can’t even see the fly-out menu with filters that “used to be there”.
    FW: You can apply anything to anything at any time

    PS: Shape layers are more confusing than they have to be. You can’t apply effects to vectors in Photoshop.
    FW: You can interact with vectors directly in the artwork, just click on it and you can move it around without having to pay close attention to which layer the object is on.

    PS: Rounded rectangles: You can’t change the radius after drawing it. You can’t see the result of the radius until you have drawn it.
    FW: Each object can be reviewed and analyzed quickly by looking at the property inspector when the object is selected. A rectangular shape has a “rounded corner” setting and when changing the value it updates in real time.

    PS: You can select an object from the canvas by holding down ctrl (PC) but after adding a few objects to the artwork you basically have to work from the layers if you don’t want to interact with pop-up dialogues telling you layers are empty or locked etc. You basically have to name every object you create in order to find it again. Selecting something from the canvas when you get a complex document is just impossible. You end up “searching” for your objects for way to long. This makes it trickier to “sketch” or make something quickly in PS. Example: Draw ten lines on top of each other in random directions. Try moving or changing one of the lines without interacting with the layer panel. It’s pretty much impossible without naming every object. The objects you draw are “sinking into the artwork” and the more you create, the harder it will be to get hold of them.
    FW: Every object lights up as soon as you hoover over it, letting you know you can select it by just clicking. If you need to select an object that lies below the highlighted one there is a “select behind” tool

    PS: Nudging a pixel when zoomed in further than 100% or less than 100% and the object will move in half-pixels (etc). There isn’t even a setting to get the nudging to snap to pixels.
    FW: One nudge click equals one pixel. You can set each object to be anti-aliased or not, there is even a “snap to pixel” fuction for objects that might be off-pixel, real simple (when using sub selection tool you can move anchor points to half-pixels)

    PS: Even if a layer is locked you can accidentally select that layer.
    FW: A locked layer is locked and you will not be bothered by it.

    PS: When a transform is ongoing, or a text field is being altered, you can do nothing except work with the transformation. You can’t close a document, you can’t “unselect” by clicking on the outside, in other words you are locked until you press enter (or ctrl-enter when working with text). Because of this you have to let go of the mouse/pen and interrupt your workflow.
    FW: You hold down ctrl and press outside of the object and you are ready to interact with other objects. A very quick way to work.

    PS: When you press ctrl-H it means you want to hide all the stuff around an object but when you do that for a text you still have the “transformation box” around the string.
    FW: Ctrl-H hides everything and you can see the artwork clearly.

    PS: If you want to apply a layer blend mode for more than one object you have to do it one object at a time. When selecting two at the same time, PS “forgets” what modes they have. Even if they have the same mode.
    FW: You can select multiple objects on multiple layers and create the same blend modes for them. You can add the same effects to them etc. Even if they have different properties before.

    PS: When selecting a color for an object or a shape you might want to select other colors than the ones in the artwork, say for instance the color of a shape in the layer panel. You can’t.
    FW: You can sample colors from anywhere on the screen, even from the FW GUI if you would like to.

    PS: Handling gradients is cumbersome.
    FW: Every vector object can be set to have “Gradient fill” instead of “Solid fill” in the property inspector. The gradient is then controlled from either the property inspector or the actual object. Like in Illustrator but in a more straight forward way.

    – – –

    Other benefits with FIREWORKS:
    – PAGES. Great (and fast) way of organizing your work.
    – QUICK PROTOTYPING with linking and toolboxes filled with functional UI elements
    – SYMBOLS. Well developed in FW. Compared to PS and AI the handling of symbols (smart objects) is superior.
    – PROPERTY INSPECTOR. Instead of showing effects etc in the layer panel you see and alter the effects by clicking on the object.

    This list is just recently started will get longer with time.

    • Gary Coyne Reply

      I will not argue the benefits and/or advantages of FW. But I really really suggest you learn PS before you start knocking it. A number of the Issues you have with PS only display your ignorance of either the program, how it works, or what you can/cannot do with it.

      If you were, for example, to say that PS was never designed to have lines “snap to pixels,” that would be a valid comment. But to say it can’t, is just foolish. My van was never designed to go to 120 in 3 seconds because it wasn’t designed to. But then again, a racing car can’t take a 4 x 8 sheet of plywood–it wasn’t designed to.

      You can write a book in FW but I’d recommend against it. That’s not to say that it has dreadful text tools, but that it’s not designed for long text work (neither is Word for that matter).

      Rather than being snarky, I’d suggest you learn the difference between real features and the focus/intent of a given piece of software. You’ll do both FW and PS a big benefit.

  6. Alex Reply

    I always assumed that developers used FW’s and designers use PS. I switch back and forth depending on what i’m doing. This is a first to hear someone say it’s better than Photoshop.

    • Isabel Reply

      Hi Alex.
      Nobody says it is better. The article says it is a more appropriate tool for screen design. A simple example would be slicing images. I am not a dev, but a visual designer, and I can tell you I’ve been using FW for more than 10 years now as the right tool for my work. But hey, if I need to deal with photos, retouch or any similar task, I’m not gonna use FW, for PS is the tool for this.

      • Terry Reply

        Well said, Isabel. It just really bothers me when people don’t understand the difference and argue back and forth. It is a matter of preference, what you feel comfortable with. I used PS for web GUI design a long time ago and then switched to FW because it was easier to get the prototypes with multiple pages out and with some interactivity if I wanted to mock that up too. If I need to retouch photographs or use special effects with filters, brushes and such, then PS is where I go and then bring the artwork into FW for the screen design. Again, it is my preference that fits into my workflow. If you’re a designer that prefers PS and find alternatives to be more productive for web design UI work with PS, that’s good too.

  7. Pablo Massa Reply

    FW was maded from scratch for screen graphics. That’s why will be always better than PS in this area. Now Adobe have more responsability and pressure on FW because the industry is taking a lot of attention to screen graphics since Web 2.0 (2004) > Smart phones (2007) > Tablets (2010)

    Here you can find a lot of FW lovers and arguments: http://fireworksinterviews.com

  8. Nick Reply

    I use Illustrator all day for work, designing software UI and documentation. I haven’t fully tried Fireworks yet. Does Fireworks have an easy way to output to some sort of documention format? We design in use cases, so each page of the document only has 3-6 “screens” and then tons of notes describing the flow. Is this something that Fireworks could handle? It is a pretty manual process in Illustrator, but it works.

    • Nick Reply

      I see that you can output to a pdf file, with each page representing one of the pages of the Fireworks file, but is that the only sort of static output that is available? I want to make this work for our workflow, I just can’t figure out how just yet.

      • Dave Reply

        Nick, you can use rectangular hotspots in Fireworks to link from page to page in the exported PDF. Make sure you use rectangular hotspots, because PDF does not recognize the polygon hotspots. When you add the hotspot to a page in Fireworks, use the Link field in the Properties panel to choose the page to which it should connect. You can have many hotspots per page, so it is possible to do more than just a linear, page-to-page flow. Hotspot links created on the Master Page in Fireworks will work on EVERY page in the exported PDF, so this is a great way to simulate the navigation of a web site and only add the links once.

  9. Lorenzo Reply

    Everyone prefers the app that he used to. It’s normal that Photoshop gains more users, it’s an application that Adobe keeps filling with more and more features.

    Anyway, Fireworks has the key features that make UI/web designing really easy, intuitive, fast.

    Every app has its purpose. Illustrator handles vectors, Photoshop born to manipulate pixels, and Fireworks is made for UI, web and prototyping design.

    Give it a try. Just because Adobe is making Photoshop like an application that can do anything, it doesn’t mean it’s the right way.

  10. Bruno Reply

    Somebody use Fireworks on Mac OSX? How is it performance? I tried to use on OSX but it’s too slow.


  11. Asim Reply

    Brush is not as good as photoshop in fireworks otherwise the tool is specially designed for web designing If we want to work on heavy printing work, image editing etc. we’ll have to use the photoshop instead of fireworks

  12. Pali Madra Reply

    Can you refer me to a good learning resource on the web for FIreworks.

    One of the shortcomings of Fireworks is that he community is not as developed as that of photoshop.

  13. Paul Reply

    I still prefer Fireworks over Photoshop, but then again, I started using it 1st. To me Photoshop has a very big learning curve to do simple things that Fireworks does.

Leave a Reply

Your email address will not be published. Required fields are marked *