Page 1 of 2 The very first response to my politically incorrect blog entry, entitled "Fireworks is better than Photoshop", turned out to be a good example. Not too complicated and not too easy, this example also turned out to be a good one for showing off some of the benefits of using Fireworks vs. Photoshop for web design.
Craig Hartel submitted this design by Michael Heilemann, and provided a link to Michael's site from which you can download a zip of the source files for the site. You can also download the Fireworks PNG file that I created in response to this challenge at the bottom of this page.
| Photoshop | Fireworks |
 |
 |
The design itself is very clean, being made up of some basic shapes and a photographic header. The shapes and associated shading can be created in Fireworks quite easily, leaving us with the task of importing the remaining few bitmap elements: the photographic banners and the Firefox button. Finally, a mask object will be needed to mask the banner images in Fireworks.
The first thing you should notice after opening the Photoshop version of the design is that all the elements are bitmaps. Operations like resizing and changing stroke and fill are more complicated because of this fact. For example, in Photoshop you minimally have to use the paint bucket tool to fill the bitmap with a new color — a minimum of four clicks. Whereas, in Fireworks you only need to change the fill color in the Property Inspector, requiring only two clicks. (Recent versions of Photoshop do have some vector capabilities, however they are quite limited compared with what is available in Fireworks.)
The second thing you should notice is that in Photoshop most of the areas of solid colors are built using masks. While this is not the only way, or even necessarily the best way, to do this, it is very common, especially since editing an object in Photoshop after it has been applied to the canvas can be an issue because frequently those objects are bitmaps. Using masks to trim an area of color down is quite common. Now you have two resources to keep track of: the object and its mask.
The third thing you should notice is not a criticism, but a compliment. I like the way Photoshop lets you throw a bunch of objects under a single mask. Notice that the Header mask is affecting all the bitmap headers, giving them their rounded corners. In the Fireworks section below I'll address a few ways you could approach this in Fireworks.
Keywords
Photoshop, Fireworks, Challange, Graphics, Design
