Why More and More Designers are Switching to Fireworks

by on 10/21/11 at 9:00 am

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:

Why More and More Designers are Switching to Fireworks

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 a whole host Fireworks users can convince you.


Why More and More Designers are Switching to Fireworks Why More and More Designers are Switching to Fireworks

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

18 Responses to “Why More and More Designers are Switching to Fireworks”

  1. Toby Keller

    Oct 21st, 2011

    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

      Nov 3rd, 2011

      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

    Oct 21st, 2011

    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

    Oct 22nd, 2011

    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

    Oct 24th, 2011

    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.

    Oct 25th, 2011

    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:

    FILTERS
    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

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

    OBJECT PROPERTIES
    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.

    CONTROLLING & SELECTING
    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

    PIXELS
    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)

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

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

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

    MULTIPLE OBJECTS
    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.

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

    GRADIENTS
    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

      Dec 14th, 2011

      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

    Oct 26th, 2011

    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

      Nov 3rd, 2011

      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

        Mar 3rd, 2012

        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

    Oct 26th, 2011

    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)
    http://pablomassa.com

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

  8. Nick

    Nov 10th, 2011

    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

      Nov 10th, 2011

      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

        Nov 21st, 2011

        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

    Nov 25th, 2011

    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

    Dec 19th, 2011

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

    Thanks.

  11. Asim

    Feb 11th, 2012

    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

    Sep 9th, 2012

    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.

Leave a Comment