Articles

You've heard it before—the haters, the purists—you most likely either think Fireworks is the "free app that Adobe throws in when you buy 3 or more apps" or you're a Fireworks purist (read: snob) and feel the need to tell everyone how "Photoshop is for Photo Manipulation only." Let's be realistic, though; they are both completely adequate programs for web designers and one can happily design websites in both.

I believe, however, that many user's disdain for Fireworks is due to their unfamiliarity with the program (and possibly that it's one of Adobe's more crash-happy programs; though CS5 is certainly a huge improvement). The workflows they've spent years learning in Photoshop are "hard" to do in Fireworks (speaking from experience here). They aren't hard, just different, and I've found that now that I've gotten to know Fireworks, I actually prefer it over Photoshop for many tasks.

Let me be clear that I am not saying Fireworks > Photoshop. It's not; it's just different. I firmly believe, however, in using the right tool for the job. If you're editing photos, bitmaps, painting, drawing custom elements, etcetera, by all means, use Photoshop. If you're doing wireframes, prototyping, vector-heavy application design, layouts and web design in general, Fireworks should also be in your toolkit.

That being said, I'd like to tell you about some of its features I care about to make you think about giving it a shot on your next design project...

With many folks touting mobile-first design and mobile browsing growing by leaps and bounds, it's important to create responsive applications. Fluid layouts and scalable graphics mean thinking outside the 960x600 box we've designed ourselves into. Which brings me to items #1 and #2.

Decent Vector Editing

"Fireworks blends the use of bitmap and vector effectively, falling somewhere in between Illustrator's vector power and Photoshop's bitmap editing ability." -- Greg Lutze, Must Warn Others

Photoshop is the bee's knees when editing bitmaps, but vectors are a different story. If I want a scalable graphic I may fire up Illustrator and then create a Smart Object. In Fireworks, I can draw directly in the same app and create graphics that can scale to any size. Created a 320x480 design for an iPhone view? Scaling that up to 640x960 for retina display would pretty much be a complete redesign in Photoshop. In Fireworks, it's a quick Image Size change.

Speaking of size changes...

Pages & States

You Photoshop uses are probably saying "hey, we've got Layer Comps!" about now, right? Good, you should use them! Starting in CS4, Fireworks has Pages and States. States are similar to Layer Comps but Pages are like a whole separate design document in the same file. Each page can have its own canvas size so creating multiple layouts in the same file is a snap. Each page can have States within it. You can easily export Pages to images or to a PDF with a selection of Pages in it. I can't count how many times I've seen 3000px high Photoshop designs because the "Home Page" is only 700px high but that "News" layer is 3000px. That can be a bit confusing.

A document can also have Master Pages; pages which are used across all sub-pages. Put your navigation/header and global elements in there and make adjustments once to propagate across all pages. In Photoshop, if you make a global change, you may have to go back and update one of your layer comps to reflect the differences. This type of task is minimized with Pages and States.

There are things that both Photoshop and Fireworks do...

Grouping and Selection

Photoshop has great grouping. Select some layers, group them. However, I really like Firework's implementation of selection. When you select an object on your canvas, it shows it selected. Its not just a highlighted layer in your Layers panel. You can hover over a layer to show it's bounding box, so you know exactly what you're about to select. No toggling on/off "Auto-Select Layer", thank you.

Smart Objects vs. Symbols

Photoshop uses smart objects to make reusing assets easy. Edit your Smart Object in Illustrator or another editing program and update it throughout your file. Fireworks goes further with Symbols. They are almost like a MovieClip in Flash. You can create a reusable Symbols containing graphics and text, set properties on each, and add 9-slice scaling.

For example, you could create a Symbol that has a "label" property. Drag an instance of a custom button to your canvas and set the label property in the "Symbol Properties" panel, and the symbol will add the label and "9-slice-scale" the background to fit the text field.

Graphic Export

Both Fireworks and Photoshop have export tools for web. Fireworks gives you a bit more granular control and (I've found) better quality and superior compression on exported images overall. You can also set export settings per page if you are exporting the PNG document as images (one for each page). Fireworks also has a more sophisticated slice-creating tool, allowing you to create rollover states for buttons and export them all at once.

Trying It

I found the most difficult task when trying Fireworks for the first time was masking and gradients. They can be quite confusing compared to Photoshop. Making something like a gradient mask is quite easy though. Just like Photoshop, select the layer and click the mask icon in the layers panel. Then you just select the mask and use the gradient tool to draw the mask. The gradient tool in Fireworks is pretty cool as it has a sort of "live-preview" as you click and drag. The initial effort to learn the new methods is tough, sure, but I think you'll find that once you've established workflows for your familiar Photoshop tasks, you'll love Fireworks.

So, I've made my case for Fireworks. Obviously, these are just opinions, but give it a another shot. Perhaps you won't care for it, but I think it's responsible as a developer or designer to have both Fireworks and Photoshop available to you and to familiarize yourself with both.