Should I use Photoshop or Fireworks?

February 10, 2012
Photoshop or Fireworks -- which should I use?

Every time I start a new project, I find myself struggling to choose between using Photoshop or Fireworks. They're both great, but I'm thinking of calling Fireworks my preferred choice for all web design, and here's why.

One file for everything

I love keeping all page designs and client iterations in ONE file. Fireworks has the same concept of layers as Photoshop, but it goes a step further: in Fireworks, I have Pages and States as well as Layers. Use the Pages palette to hold the Home Page, Content Page and other page designs you need. Use the States palette to hold each iteration of each page design.

Here's an example of the Pages Palette showing a Home page and Content page comp. I also like to keep a Page for design assets that I'm going to need — icons, logos, photos:

Here's an example of the States palette showing two iterations of the Home Page design:

Grouping simplicity

When I'm in Photoshop, I miss the easy selecting and grouping functions of Fireworks. In Photoshop, I need to change the mode from selecting layers to groups, or I have to very carefully click on the correct element of a group to move a set of layers. In Fireworks, this is simple. I can select layers, group them and then click and move the group ... easy peasy.

Better scaling

Scaling works better! There are two aspects of Fireworks that work better for me in scaling. First, the 9 slice scaling feature allows me to resize things like rounded rectangles without skewing the corners. Second, I am able to keep an object editable without having to rasterize it. I know I can often keep an object editable in Photoshop, but more often than not, the nature of the tool and adding effects in the different tools invariably requires me to flatten something in Photoshop before I would have to flatten the same thing in Fireworks.

Other little wins for Fireworks

  • Drag and drop from browser or desktop works better. Often when I drag something into Photoshop, the transparency doesn't come through unless I use the Place command. In Fireworks, it just works.
  • Easily adjust objects to pixel sizes by typing in the width, height sizes. One extra click can also ensure the aspect ratio remains intact.
  • Slices are easier to turn on and off and manipulate with Fireworks' Web Layer.
  • Illustrator-like control of vector shapes.

The best for last

The best feature of all that makes me prefer Fireworks? Fireworks has a CSS3 property palette which can give you all the CSS3 code for an object you select — brilliant! In my screenprint, you can see the property/value pairs at the top of the palette and the cross-browser CSS3 at the bottom. I can click copy and paste all the code into my CSS editor. I do like to clean out the extra comments in the code, but that only takes me a moment.

Here's an article that explains how to accomplish this.

What I miss

I do miss a few features in Photoshop when I'm in Fireworks, but Photoshop is never far away. I can always make an element in Photoshop and drag it into Fireworks if I need a special function that only Photoshop can do.

What do you think?

I'd love to hear other opinions! Photoshop is such a robust tool, sometimes I wonder if I just haven't wandered into a feature. Perhaps some of the things I prefer in Fireworks are just features I haven't discovered yet in Photoshop?

Comments

I can't help but chime

I can't help but chime in!

Photoshop has Layer Comps which according to Adobe can be used to create, manage, and view multiple versions of a layout in a single Photoshop file. Perhaps this is the same as "States?"

Also, when you free transform an object in Photoshop (⌘+T) you can, in fact, type in the pixel widths in the top menu. By default it shows %, but you can simply type '200px', for example, and then click the link-looking button to maintain the aspect ratio.

The CSS3 property palette is pretty cool, I'll give you that. Then again, themers should earn their pay, don't you think? :)

Nice post!

I've used Layer Comps in

I've used Layer Comps in Photoshop, but all they really do is turn on and off various layers ... there is still no equivalent to pages and states in Photoshop. I wish PSD had it!

Thanks for the pixel sizing tip :) Truthfully, I did forget that one ... can it work with objects that are flat or rasterized? I've liked that Fireworks can resize anything in the property palette.

Another nice thing about

Another nice thing about Fireworks is that it lets you save alpha transparency even for PNG-8 format.