A few weeks ago, CS5 was released, and with it, a new version of Fireworks. I decided to download the trial and give it a fair shot. Fast forward to today, and i’ve pretty much completely converted. It’s a hard process to learn a new tool, but I thought other people might be interested in learning about my experiences.
Here’s some of my initial observations.
The Good
First, it’s cheap. Only $300 for the full latest version. It’s nice to know that the software is not extremely expensive.
Fireworks snaps things to edges by default, making it hard to end up with blurry edges. That saves a lot of time. If you happen to get something off an edge, you can always hit Cmd-K and it will automatically snap your points to the nearest pixels. Love this feature to death.
Another thing that’s amazing is the 9-slice scaling. Using this feature you can scale objects that are oddly shaped such as boxes with rounded corners just as easily as you would scale a square shape. I can’t tell you how much time this has saved me already!
The font rendering is slightly closer to the OS rendering, and you can also customize the anti-aliasing.
The effects it gives you are non-destructive, and layered. This includes things like gaussian blurs.
You can group things together much like in Illustrator and the objects show up as one layer. This is much nicer than the way Photoshop handles groups.
You can also create “symbols” like in Flash, where you can make changes to one and they get synced to everything. Rogie has a great screencast about these.
It’s got support for multiple pages within a single file, so you can create a whole website with a single file. Not only that, but you can share all the symbols and styles across the whole site too since it’s all in the same file. Within pages is support for “states”. So you can also have multiple variations of each page.
Last but not least, you can easily create styles out of layer effects, and other attributes such as color, stroke, etc.
The Bad/Ugly
Definitely the worst part of Fireworks is the color picking. Instead of the decent color picker we find in Photoshop and Illustrator, Fireworks makes you use the system color picker, which is far more complicated and frustrating than the Photoshop color picker.
The only suggestion I can give is to use the built in Color Mixer palette. This color picker palette is much closer to Photoshop’s functionality. Unfortunately, it’s not tied into Fireworks directly, so you often have to sample the color you want to modify manually instead of it being auto-populated.
One of the other super annoying things is strokes combined with effects. Let’s say you wanted to put a stroke on something and then do an inner shadow in order to give the shape a beveled look. Well, in Fireworks, the inner shadow goes on top of the stroke. That can be super frustrating.
One solution i’ve found (other than duplicating the shape for the stroke only) is to use Photoshop Live Effects (you must have Photoshop installed, and have the plugins folder linked from the Preferences window). You can set a stroke as an effect (just like Photoshop), and then use the regular effects for your Inner Shadow. Still annoying, but at least there’s a way.
The keyboard shortcuts are slightly different in Fireworks too, which can be a big barrier to learning it. They are similar enough that it’s confusing. About half of the shortcuts are the same, and the other half are different.
Fortunately, you can change any and all the keyboard shortcuts.
Fill opacity is non-existent in Fireworks. That’s a huge bummer because it’s pretty important. In Photoshop if you have a shape you can choose a blending mode and control it’s intensity by modifying the Fill Opacity.
The solution is to use greys as your fill opacity. If you use Color Burn with 50% grey, it will be quite a bit less intense than if you did Color Burn with black.
Another downside is the swatches palette. I thought it was lame in Photoshop, but turns out Adobe is capable of making an even more lame Swatches palette. There are no names for colors like you can do in Photoshop. There is no way to manually manage the colors. There is no way to remove more than one color at a time, and there are no great default swatch libraries available, only the stupid “Web Safe” palette.
The only thing that can make Swatches better that i’ve found so far is to download a custom swatch library, or use one that comes with Photoshop or Illustrator. If you need a certain palette, I suggest using Illustrator or Photoshop to build your library, then exporting it as a file so that Fireworks can read it.
It seems like there are a few things missing from the typography engine in Fireworks too like all caps/small caps support, and other really small things. Not much I can say about fixing that.
Lastly, the export dialogs are kind of strange. I’ve found that Photoshop’s Save for Web is superior in the way it chooses colors. Not a huge deal. It seems to have a great deal of control, and it probably results in smaller files when you export. Those dialogs just seem unpolished.
Parting Thoughts
Is Fireworks perfect? No. Is Photoshop perfect? Not in the least. It’s a matter of what works better for you. I think Fireworks is a great choice for web design, and if Adobe fixes a few of these problem areas, I think it will just get better.
If you’re going to try out Fireworks, you have to commit to it. It is very hard at first, and seems so strange, but stick with it for a week if you really want to see if you like it more than Photoshop. Fortunately importing and exporting to/from psds works very well. Try opening up one of your designs in Fireworks, and mess around with it.
That’s all for now. I’ll post again with more notes and tips soon. In the meantime, check out Rogie King's blog for his tips and tricks (in screencast form)
]]>
