Let’s say you need to cut down a tree for some reason. You have two types of saws at your disposal; a coping saw and a chain saw. They’re both saws but one was made for cutting and trimming trees and the other made for making intricate cutouts shapes. You’d use a chain saw of course, it was made for such jobs.
Okay, a bit extreme, I know. Here’s a better example; you’ve been tasked with laying out a multi-page publication (pamphlet, magazine, whatever). You have two applications in your tool box; Illustrator or InDesign (or Quark). Which would you use? InDesign or Quark, of course. Page layout is specifically what they were made for. You would probably need the assistance of Photoshop and/or Illustrator at some time during the project, but that’s not my point. My point is, Photoshop and Illustrator aren’t for multi-page layouts.
And so it is with applications used to design for the web.
I’m talking about Photoshop and Fireworks. Both are ‘design’ applications but they have different skill sets.
There are millions of designers that use Photoshop for web screen design. Sheer number of users doesn’t make it the correct tool to use, however. After all, Adobe even markets Photoshop as “The industry-standard image editing software, used worldwide by professional photographers, amateur photographers, and designers who want to perfect their digital images.” As for Fireworks: “[Fireworks] helps you create beautiful designs for websites and mobile apps in a snap, without coding. Deliver vector and bitmap images, mockups, 3D graphics, and interactive content for popular tablets and smartphones.”
First, let me set the record straight, I am not advocating the use of Fireworks to “code” and build your websites and web apps with. I am 100% against using Fireworks or any other WYSIWYG application to “code” or write for the web. Zach tests out various code editors from time to time (he is currently using Sublime Text 2) and I use CODA 2. I use Fireworks for wireframes, comps, mockups, prototypes, and slicing and exporting necessary images. That’s it. And no, I typically don’t design in the browser either. I’ll leave that topic for another day.
I honestly think that the volume of users comes from the fact that Photoshop has, for the most part, always been an Adobe product. When you think of design applications (print or web), you almost always think of Adobe. They’re the software giant in our industry. It’s what many colleges have used for almost two decades. Case in point, it’s what I first used when I was learning print and traditional design in college. When I shifted to web design, I naturally used Photoshop and Illustrator because it’s what I knew. On the flip side, Fireworks was a Macromedia product for the first part of its life. I don’t think my university even owned a Macromedia product. Primarily because the web was in it’s extreme infancy and it wasn’t even being taught back then. Yeah, I just dated myself.
I think another reason is because people who come into this industry hear web celebrities mention the use of Photoshop and think, “well, he/she uses Photoshop, it MUST be the best tool for the job.” Not at all. Not even close in my opinion.
Reason number one: The Page Pallet
(These are in no particular order, by the way.)
You Photoshop users might be scratching your head wondering, “What is this pages pallet?” It’s because Photoshop doesn’t have this feature.
Let’s say you need to design multiple pages or multiple iterations of a page page for a website. What do you do in Photoshop? You either A) save separate documents for each individual page/iteration, or B) you organize your layers so that you have to toggle a collection of layers off/on to show one page layout and then toggle another collection of layers off/on to show another layout. Doesn’t seem very intuitive to me at all. In fact, this can be down right confusing as hell if you have to pass that design off to someone else to make revisions or develop.
In Fireworks, you simply make a new page within the same document and you’re off and running. No layers to toggle, nothing. You can also share (and lock) layers between multiple pages. Which brings me to...
Reason number 2: Shared Layers
An easy example to illustrate here would be if you have 5 different designs (5 pages) for one site going on in one document but you want the header area to be the same in every page. You can share that layer with all of the other pages. Or lets say you only want the header to be the same on 2 of the 5 pages. You can share the header layers with just those two pages. You don’t have to copy or past anything into a new document or turn off or on any layers.
Reason number 3: File Size
A lot of designs might not really think or worry about this one all that much. However, having to move files around, hand them off to (and receive them from) other in-house development or design teams, etc., I do think about this. For example, I recently I received a Photoshop comp that was 55 megs. I opened it in Fireworks and re-saved it. The result was something like Charles Barkley on a diet; the file was trimmed 50 megs just like that. And no, there was no loss of quality. It was anything but turrable.
Reason number 4: The Common Library
Again, Photoshop users might be scratching their heads. The Common Library contains sets of commonly used browser items such as form fields (Apple and Windows versions) and buttons. I find these most useful when creating wireframes, prototypes and non-CSS-esque styled forms. There are loads of Fireworks common library extensions available covering things like browser cursors and stencils such as calendar drop-downs, sliders, etc.
Reason number 5: Vector Drawing Tools
This is one area that Fireworks really excels at over Photoshop. First and foremost, because Photoshop isn’t a vector-based application, it’s raster-based. Why in the world would you attempt to create vector graphics in a non-vector based application? Fireworks is vector AND bitmap. Look at as a lovely web hybrid of Photoshop and Illustrator. It really is the best of both worlds, at least for the needs of a web designer anyway.
Reason number 6: You can export ugly code
And yes, it is ugly. So why am I mentioning this then? Because it can be a fantastic tool for rapid prototyping. Exporting a working html prototype is fairly simple: wireframe or comp some pages, add in hotspots where you want functioning links and link those up (you can link them to other pages within the same document or external webpages) and then export all of the pages and files to html. Drop those on a staging server and you’ve got yourself a working prototype.
There are other areas that Fireworks excels at; one being exporting animated gifs. Although I don’t have a need for this feature that often, it is a cinch to do this with the Fireworks states pallet. The nice thing about this is that if you have a reoccurring element located in the same area on say 15 different states, when you export the animated gif, Fireworks will only count this element once as opposed to 15 separate times, potentially cutting down the file size way down.
I have often heard the statement that Fireworks doesn’t handle image editing that well. This isn’t true at all. For web-optimized graphics it does a phenomenal job. I say web-optimized because let’s be honest, none of us would think of opening and editing a high resolution image in Fireworks. We’d open it in Photoshop, since you know, that’s what it was intended for. The occasion is EXTREMELY rare that I have to open Photoshop to make any sort of image edits. I would put money on it that you could compare an image that sliced and spliced in Fireworks next to one that I edited in Photoshop and you wouldn't be able to tell the difference. The reason being, Fireworks has many of the same image editing tools that Photoshop does. Couple that with the previously mentioned vector tools and you have a great one-two punch for web graphics with Fireworks.
As for Fireworks shortcomings... I really can’t think of any honestly. Someone on Twitter recently brought to my attention that you can’t natively create, edit and export SVG files. I personally can count the times on zero hands that I’ve needed that functionality. There is a third party extension available (Export by Aaron Beall: http://fireworks.abeall.com/extensions/commands/Export/) that allows you to export them, however. You just can’t open them back up in Fireworks, you’d have to use Illustrator for that. But you can edit it in Fireworks and then re-export it. Problem solved.
There are a ton of extentions out there as well that help make Fireworks the optimal web screen design application. Three of my favorite, most often used Fireworks extentions are the Lorem Ipsum Generator panel and John Dunning's Placeholder Tool and Grids Panel. Be sure to check out this recent article on Smashing Magazine about optimizing and extending Fireworks. Those three extentions plus a few more are mentioned there.
The bottom line is this, don’t knock Fireworks until you’ve given it a legitimate chance. I was at one time a Photoshop user for my web designs. Once I learned my way around Fireworks, I never looked back. So long as Adobe continues to produce and support it, I never will either.