Should I use Photoshop or Fireworks?
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:
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.
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.
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?