Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with: Ben Alman
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with: Ben Alman@cowboy )

If Fireworks Was A Woman, I Would Make Sweet Sweet Passionate Love To It

By Ben Nadel on
Tags: Work

I spent all of Thursday night with a client designing a site in Macromedia Fireworks. They asked for changes and I made them happen in real-time. That's the power and the beauty of Fireworks. It's amazing. For those of you still using Photoshop or Image Ready, stop. Switch over. You will not regret it.

If you are resistant, I understand, I used to be like you. Three years ago, before I came to Nylon Technology all I ever used for web development (graphically speaking) was Photoshop and Image Ready. It was good; I loved playing with the filters and Alien Skins. So you can imagine there was an adjustment period when on the first day, my boss Jim Curran sat me down and told me I am required to learn Fireworks 'cause that's the way we did things.

So I went ahead and learned it inside and out. Within a week, I came to realize that Fireworks was the superior product to Image Ready and Photoshop (for web development) by leaps and bounds. Now that I've been doing it for three years, having to do anything in Photoshop is just frustrating due to it's lack of functionality.

What's that? I'm crazy? I probably enjoy throwing my own poop around and can't possibly know what I am talking about? Maybe you're right. But, here's a list of features that I LOVE in Fireworks. You judge for yourself if these things can be easily done in Image Ready or Photoshop:

Click-Select-Alter Functionality

One of the most horrible "features" of Photoshop is the way they deal with layer and object selection. How many times in Photoshop have you clicked on an object, like a box or graphic, then went to drag it and ended up dragging around a completely separate object? That is because in Photoshop, you have to manually select a layer from the layers window before moving it. In Fireworks on the other hand, it is much more intuitive; you click on an object, it highlights, its layer is automatically selected, then you can move it around like would EXPECT it to work. Fireworks is very big on work the way people would EXPECT things to work.

Now, not only does the correct layer/object become selected in Fireworks, it actually gives you some feedback. A border appears around the selected object to be like "Hey, me, over here, I am selected". How do you know if a Photoshop object is selected? I'd say guessing is your best strategy, but in actuality you can sort of see the layer highlighted in the small layers window. Of course, there is no feedback in the main graphics area.

The amazingly more intuitive and user-friendly point-and-click features of Macromedia Fireworks makes it a hands-down better product. There's much more, but at that point, I'm already sold.

Data Driven Graphics Wizard

Fireworks can generate files based on XML data and a single graphics template. I don't even know if Photoshop people can think at this level so it might not even be worth going into? The XML file can contain information that will allow Fireworks to dynamically, on the fly, create batch images that have customized file names, customized content text, even customized IMAGES in the resultant graphics. Have you ever had to create 300 graphical page titles each of which is named according to an ID in the database? Yeah I have, it takes about 2 minutes in Fireworks!

Flash-Style Symbol Library

Fireworks uses a symbol library to create graphics that can be used in a multi-instance fashion. This is the way Flash libraries work and... This is AMAZING. Imagine trying to create a screen shot with 8 thumbnails. Let's say each thumbnail has a border and glow effect. In Fireworks, you can create a thumbnail symbol and instantiate it 8 times. Then, if you want to change the glow color, you change it in ONE place and it propagates to all instances. In Photoshop, you know you have 8 different layers and have to change the filters on ALL 8 LAYERS! Can you say waste of time?

Flash-Style Interface

If you are a web developer, especially a ColdFusion developer, you probably have had to deal with Flash at some point. Fireworks uses a very similar interface (though I think it's even better). This makes the transfer of skills from one application to the other much more easy and efficient. If you go from Flash to Photoshop, you go back to zero; no transference at all. You go from Flash to Fireworks, you might not even realize that you are in a different program. You're comfortable, at ease, and ready to produce high-quality work.

Improved Optimization

Fireworks simply has better image optimization upon export. I find in my person experience that Fireworks creates a higher QUALITY image than Photoshop can even with SMALLER file sizes and LOWER compression rates. Photoshop's optimization algorithms are simply sub-par (Image Ready is also disappointing).

Multiple Frames

Fireworks has multiple layers like Photoshop, but it also has multiple frames. This is amazing. Not only does this help tremendously with creating mouse-over images (frame one is OFF, frame two is ON - exported automatically), but it creates a more manageable way to create different screen shots. How many times have you gotten a Photoshop file from a designer where the navigation is duplicated in EVERY layer? I have, many times. When you get into a Fireworks frame of mind, you can share layers across frames. One layer for navigation, shared across frames, makes for easy editing, easy exporting, smaller files, and a more maintainable design.

Of course, not all layers need to be shared across frames. You might have one layer for the global navigation, where the first frame is the off-state. In the second frame you might change the text color of the navigation or the font weight. It's too easy.

Batch Processing

Fireworks can batch process image files in a directory. It can apply most optimization techniques, resizing, exporting, and a number of other excellent features. You can customize how it saves them, if it makes backups and how to name the new files. Ever need to resize 400 attorney face shots to fit in a 150 x 200 box... yeah I have, it takes about 30 seconds in Fireworks.

Stackable Filters

In Photoshop, you can apply multiple effects to a layer in the Layer Style blending options. However, you can only apply them in an arbitrary order. You can sort of drag them around from layer to layer, but it becomes very confusing very fast and you never really accomplish what you want. In Fireworks, on the other hand, you add filters on an individual basis. Once created, you can sort them and the sort order of the filters actually cascades the effect. The filters are built on top of each other, NOT just the base object.

Multi-Object Editing

In Fireworks, you can select as many objects from different layers as you want. Once selected, you can change colors, move them in unison, and add filters to all selected objects AT THE SAME TIME. In Photoshop... I couldn't even figure out how to select more than one layer at a time! I can lock two together, but I couldn't figure out how to apply a blending option like a drop shadow to more than one object at a time.

Automatic Bitmap Creation

In Fireworks, if you are working on a shape, such as a box or a circle, then you use the lasso to create a selected region and then fill it using paint bucket, it automatically creates a new bitmap layer and applies the action. This makes a lot of sense. In Photoshop on the other hand, if you try to do the same thing, it tells you some junk about the layer not being rasterized or not directly editable. I KNOW it's not editable; why would I want to paint bucket a shape??? In Photoshop, you have to manually create a new bitmap layer, then selected it, then perform bitmap operations on it. Wow that's a lot of work in Photoshop.

More Intuitive Interface

While this is probably one of the biggest selling points, I saved it for last so that the above arguments could make my point for me. Fireworks it just more intuitive. You click an object, it's selected. You want to change a background color, you select a color. You want to change the border width, you enter a different number in the properties box, you want to resize an object, you click on the little selection boxes and just freakin' drag it. IT'S TOO EASY!

Bottom Line

If you are not using Fireworks, you are wasting your time and you are wasting your client's time.


I am sure I have facts here about Photoshop that are (slightly) wrong. I am not a Photoshop expert. But you know what, I used Photoshop for like 10 years and I never became an expert. I used Fireworks for a MONTH and I felt like an expert. What kind of learning curve comparison is that?

Reader Comments

Ben -

Fireworks is definiitely here to stay and its only going to get better..

I've been a long time user myself and have also experienced exactly what you have mentioned in this post. Rest assured Fireworks will continue on!

In fact, if you are interested in joining the upcoming Fireworks Beta then send me an email. ;-)

hehehe i second that too, email alan man ! u wont regret it

fireworks is the best, check out this stuff i made >


That is music to my ears. Every since Adobe took over, I have tossed and turned in my sleep with the fear that some people will think that ImageReady is superior. Look, I will agree that for straight up Image manipulation, PhotoShop might rock. But we are talking WEB DEVELOPMENT here, and hands down, FireWorks has the most to offer.

Expect an email, beta me up :D

1) Click-Select-Alter Functionality
You say Fireworks just "knows" which layer/object to select.
I say that Photoshop offers so much fliexibility with it's layers, layers sets
and adjustment layers that Fireworks would just become confused. As for YOUR
interaction with layers, Photoshop makes it so easy to do. Here's a short list
of ways you can interact with layers and their data in Photoshop.

creating new layers
CTRL + SHIFT + N = new layer (and name it)
CTRL + SHIFT + ALT + N = new layer no naming options

dealing with multiple layers
CTRL + [ or ] = moves a layer up and down in the stack
CTRL + SHIFT + [ or ] = moves a layer to the top or bottom of the stack

ALT + [ or ] = selects the next visible layer (up or down) in the stack
ALT + SHIFT + [ or ] = selects the bottom or top layer in the stack

If you want to select a specific visible object on the workboard but you don't
know what layer it's on:
CTRL + right click brings up a menu of layers directly under your cursor
CTRL + ALT + right click takes you to the very top layer under your cursor

Photoshop does not offer any sort of visual feedback on the currently selected
RASTER object, but it does offer visual clues for text boxes and vector objects.

2) Data Driven Graphics Wizard
I believe that Photoshop offers this functionality, but I've not used it. I know
that Illustrator has had this for the last 3 versions.

3) Flash-Style Symbol Library
Photoshop doesn't offer a library of symbols like FW does, but it does have layer
styles. This lets you create one styles and apply it to multiple layers/objects.
It also allows you to do this action to "all linked layers".

4) Flash-Style Interface
This will soon be a non-issue as Adobe will be appliying the same interface to
all of their applications in the next iteration.

5) Improved Optimization
As I haven't used FW in many years I can't say that this is true. However, when I
switched back to Photoshop a few years ago, I found it just the opposite. Image Ready
file sizes and quality were leaps and bounds ahead of FW. I'm sure that the two apps
played leapfrog.

6) Multiple Frames
Photoshop doesn't offer this (that I know of) but Image Ready does. IMO Image Ready's
animation tools are far superior to FW. In fact, that's one of the main reasons I
changed over back in the day.

7) Batch Processing
Are you kidding? Photoshop invented batch processing via actions and the ability to
even SAVE an action as a droplet and simply drop a folder or image onto that droplet.
I won't even go any further except to say that if you can perform it manually in
Photoshop, you can automate it using actions.

8) Stackable Filters
Photoshop can apply multiple effects to a layer, but I don't know if you can
rearrange them in the manner you describe.

9) Multi-Object Editing
That sounds pretty cool. Photoshop only allowed you to select multiple layers in CS2.
I would think that you could now apply a style/effect to all selected layers now, but
I haven't tried it.

10) Automatic Bitmap Creation
I'm not quite sure what you're talking about here, but in Photoshop, can you create
vector shapes, and fill them, as well as apply styles to them.

11) More Intuitive Interface
I'll agree that Photoshop's interface could be improved. But I've been using it for
11 or 12 years now and I don't know ANYONE better at Photoshop than I am. I'd
consider myself past Master level and I STILL learn cool things about PS.

I've said this in other topics too; comparing Photoshop with Fireworks is like comparing apples with oranges. Photoshop's main focus is image editing, Fireworks tries to imitate Photoshop, Illustrator and Dreamweaver all at the same time, but doesn't excel in any of these areas. It reminds me a bit of devices that combine printer/scanner/copy machine or tv/video/stereo in one device, they seldom are a success either.

It's sad that Ben feels the need to write about Fireworks and continue to put Photoshop in a bad daylight. I don'[t understand this, what's the whole purpose of it? Don't we have enough of those x vs y discussions on the internet, that often end in flame wars and trolling?

Fireworks is a good product, but don't compare it with Photoshop, for Pete's sake it's an image editor, 90% of all new features in Photoshop are always focused on image editing. It's so foolish to compare Fireworks with Photoshop. If you want to make a comparision, then compare it with ImageReady, a comparison, and I have no problem to admit that, that Fireworks wins hands down.

I run a large Photosohop and I have never like Ben put other image editors down, actually in some cases I actually advised people to use other products depending on what they really needed. x VS y articles like these are not only chlidish, they also causeannoyance and are a complete waste of time.


I will agree with the fact that Photoshop is 90% for image editing, as you say (or that that is what 90% of the new features)... but in all fairness, I am not talking to Photo Editors. My blog is not about photo editing, nor does it appeal to photo editors (trust me, I have photo editing friends and they don't read my blog).

My Blog is for web developers and especially ColdFusion programmers. When I speak, I speak to them. They are my community. They are not photo editors. I don't know where exactly you get this idea that I am only comparing PS and FW when it comes to Photo editing?

So, you say that PS for web development is Image Ready. That's fine. I have used IR and find that it is definitely geared more for web development. And you say that Image Ready is not as good as Fireworks, hands down..... so here's my problem, why are so many WEB designers designing WEB SITES in Photoshop and sending me PSD files?

Is it because Photoshop is a superior web design tool? If you want to use usage numbers, then obviously that is the case. But, my guess is that this happens because this is all that people know. It is because Photoshop is such an AMAZING photo editing program that its momentum has caused it to, IMO, be used inappropriately as a web design tool.

Hey, also, what's your web site address? It sounds like run a cool shop over there. I would love to take a look at your portfolio. Heck, the more you can sell me on PS the better, right?

> My blog is not about photo editing, nor does it appeal to photo editors

You compare a web design tool with an image editor. All I'm trying to do is convincing you that you're comparing apples to oranges.

> I don't know where exactly you get this idea that I am only comparing PS and FW when it comes to Photo editing?

Geez, I'm constantly telling you to compare Fireworks and Photoshopshop as web design tools (read w e b d e s i g n) and since Photoshop isbascially not a web design tool, you can't compare the two and even the fact that you get 10 million PSD files mailed to you doesn't change that.

> so here's my problem, why are so many WEB designers designing WEB SITES in Photoshop and sending me PSD files?

Exactly, this is what it's all about, the fact that you actually have a problem with that. I already wrote that several times in other replies; I don't understand your problem. If people want to use Photoshop as a web design tool, then why not? It's their choice. Does that mean Photoshop has a strong focus on web design? Of course not! Again, and it's the same story again and again I'm repeating myself…. 95% of the new features in Photoshop are always related to image editing, does that sound like Photoshop is a web design tool?

Most people who visit my forum do all vector stuff in Photoshop, does that mean that Photoshop is an ideal vector application? Or course not, because it's bit map based and Adobe would never allow it to compete with Illustrator, which is a true vector application like Corel Draw and Freehand.

> Is it because Photoshop is a superior web design tool?

Not it isn't! I keep telling you that a thousand times, it's an image editor; do I and others who have replied need to repeat that over and over? How can you allow your common senses be so blurred by the fact that a lot of people send you PSD files?

> It is because Photoshop is such an AMAZING photo editing program that its momentum has caused it to, IMO, be used inappropriately as a web design tool.

Exactly, now you make sense. Finally, because these are probably the last words I'm going to write about this subject.

> Hey, also, what's your web site address? It sounds like run a cool shop over there.

I've learned over the years that's it's never wise to share personal information in discussions like these.

> I would love to take a look at your portfolio.

Does an architect need the portfolio of a person he's talking to to understand that the guy has a lot of knowledge about architecture?
Do you have to convince me with a written piece of paper that you're a nice person or can people find that out themselves by just talking or hanging around with you?

> Heck, the more you can sell me on PS the better, right?

Unlike you I don't try to sell people on PS. All I do is help people in forums, blogs and by writing helpful articles and tutorials. Never ever have I started any discussion, whether it's on the blog, in an article or on the forum about product x vs y, however I did join some of these discussions started by others, but that's mainly to convince people that everybody should be free to use whatever he or she prefers and that no piece of software will automatically make you a great designer or artist.

That's all I had to say; good look with your web site and just have fun with what you're doing and don't get so frustrated about what others are using for software. :)

"That's all I had to say; good look with your web site and just have fun with what you're doing and don't get so frustrated about what others are using for software. :)"

Ok, so we're chill now? Seriously, at the end of the day, I only want to use the best tools that I can. I am a web developer, so maybe what we are agreeing on is that for web design (a subset of web development responsibilities), Fireworks is right for me. But, honestly, if someone came up to me and said that PS was the right tool for me, and it turned out to be, I would be more than happy to switch.

Plus, you have to remember my context. I am a web developer, so when I speak (or rather write), it comes from a developer's point of view. So, when I say a program rocks, it rocks in the context of web development. That is all I can speak from. It like adding "in bed" to your Chinese fortune cookies, except when you read anything I write, just append "for web development".

I do look forward to learning much more about PS as well as Illustrator and Flash, and that video stuff looks insanely cool also.

One final note, as far as the "selling" people on stuff. Remember, this is my personal site. I don't go to people, they come to me. I can't really ram anything down people throat unless they want it to be rammed in the first place.

Cheers dude. It's been good talking.

This was a helpful, re-assuring post for me as I've just switched to Fireworks from PS for its vector support, but I'm still wavering between the two. I'm slowly learning what types of people are drawn to this program. I hope to watch it improve as it draws a larger audience. Rock on, FW!

What happened to this:
Data Driven Graphics Wizard
Fireworks can generate files based on XML data and a single graphics template...

Has Adobe removed it in CS* or are the commands just harder to find?
Can Data Driven Graphics still be done with Fireworks?


Oh snap, is it not in there anymore? I used to use it all the time before CS3 to generate header images and other types of dynamic images. Truth be told, I have not used the feature since my CS3 install so I am not sure if it is still there. I'll have to check in the AM. It would be a shame if they removed it.