I’m a fireworks lover. I do alot of press printing for clients and if Fireworks had cmyk support and a few other export features I would love to use it exclusively. I really combines the best of vector and bitmap all in one package. The recent versions of PS and AI leave alot to be desired. Sometimes I feel like I’m being milked by adobe for some really straightforward features. You have to bend aound backwards to do some “simple” things in PS alot of the time.

Design Analysis
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.
Photoshop Critique
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.
Construction in Fireworks
As mentioned above, the basic layout in Fireworks is comprised of a simple set of vector shapes and the requisite bitmaps. The background object in the Photoshop version is no longer required as we can set the background color of the document in Fireworks. The three objects are the sidebar, footer and main box.
The main box is just a rounded rectangle the bottom edge of which extends beyond the bottom of the document. This is a quick way of creating a rectangle that appears to be only rounded on top. An inner glow has been applied to give the illusion that the surrounding background is casting a shadow on the box. Also, an outer glow is used to give the background a beveled look.
The footer is a rectangle that is the same width as the main box, positioned at the bottom of the screen. Now, if the footer shape was simply filled with a solid color then the faux shadow would be covered up by it. By setting the footer to 50% transparent we can see the shadow through the shape, giving us the impression that the shadow is on the shape, not under it.
The sidebar is a group with two boxes: one for the header and one for the body of the sidebar. They are separated by one pixel and set to 20% transparency.
At this point we have created the same base design that required 7 bitmaps in Photoshop.
Finally, before importing the header graphics, I completed the basic design by importing the Firefox bitmap and creating the “Info” item using the text tool.
The Headers
As mentioned in the Photoshop Critique section above, the five header graphics were placed under a layer mask in the original design. In Fireworks, we don’t have this capability. The solution is to create a rounded rectangle the right size and shape for the mask, then cut it to the clipboard (Edit>Cut) and then paste it as the mask on each of the bitmaps (Select the bitmap then click Edit>Paste as Mask). There is, however, an advantage to doing it this way…
Comps
One of the other responses to my challenge was to create multiple comps in Fireworks that you could switch between with a single mouse click. Well, here is where we can take advantage that each image has its own mask. In order to set this up I made a separate frame for each header. I then put all objects, except the header graphics, into their own layer, titled “Background” in the screen shot below. Double clicking on this layer in Fireworks opens a pop-up that allows you to name the layer and contains a checkbox labeled Share Across Frames. By selecting that checkbox all the objects in that layer will show on every frame in the document. So you can, for example, change something in that layer and the change will be visible across all your comps, kind of like a master page. The next thing I did was to create a “Header” layer and move each header image into this layer, but each in its own frame. Now I can view any of the headers in the design just by selecting the Frame in the Frames panel.
The annotated screen shot below shows the layout of the design in each program with arrows showing how the header images were placed into separate frames.

Score
In the final tally, the Photoshop version of this design has 14 bitmap objects and one vector object (the text). The Fireworks version has 6 bitmap objects and 5 vector objects. The Fireworks version is much easer to manipulate and modify because it is mostly vector based. I would say this 1st round goes to Fireworks. Let me know what you think

I use fireworks from some time now, and before that i used Photoshop.
Conclusion:
Photoshop is better for artistic stuff and printing tasks, since it has more tools suited for that and more effects to play with, but as user interface/ ease of use, Photoshop is well behind fireworks. At web design/graphics for web, Fireworks is much better. What you do in Photoshop in 3 hours, technically, with fireworks you do the same thing in one hour and much cleaner. You consume much more time thinking at your idea, than concentrating on user interfaces, menus and sub menus and overwhelming tools that you`ll probably never use as web designer. For that, adobe payed 3.4 billion USD, to acquire Macromedia. For tools like Fireworks, Flash and Dreamweaver, that beats everything in web design and not only(fw,fl). This Macromedia tools are well designed not overdesigned like Photoshop, wich tends to be an ostrich-camel cross-breed :).

I have both installed on my computer, and im having trouble learning both of them aswell.

I mean, you cant find a good introductory tutorial anywhere.

I guess drawing and painting really isnt for me after all…

I have never used Photoshop, and I have used Macromedia Fireworks. However, I am less of a web designer and more of an artist, and I find simply drawing and painting in Fireworks very tedious and the result doesn’t look as finished as some Photoshop works I’ve seen, where the artist claimed only a few hours of time spent while mine is spent in days. This is more of a question then my own personal experience, but for artists, which is better, Photoshop or Fireworks? You know, an artist who wants to make graphic novels and such?

I always thought Photoshop was the mother of all graphics programs… I got fireworks yesterday as I couldn’t open a .PSD with my latest version of photoshop, very strange error

Adobe should just scrap photoshop & improve on fireworks, since fireworks is really more efficient & easier to use.

I use Fireworks mainly as my web designing application. However, there are some bugs… I’ve also used Photoshop for designing for the web and there are some things that I wish it had that Fireworks does, and vice versa! I think they need to take some of the best parts of Photoshop that are web design friendly and introduce them to Fireworks because Fireworks is much more web designer friendly! They are both awesome applications and do great things! But as a designer I would just like to see them tweaked a bit. But there’s no doubt in my mind that they’ll just keep getting better.

While I did complain loudly when having to learn Fireworks for my current job, I am mostly ok with it now in terms of pure web design. I do both print and web at an in-house marketing dept.

My only request, or maybe complaint, about Fireworks is in terms of Web Design only. I think Adobe should do something with the color picker. I find that Photoshop and Illustrator have much stronger color palette systems than Fireworks.. which is based heavily off Window’s system color picker (this is just based on my only working with Windows version)

I think it is just as important to create a color scheme on the fly with the tools at hand instead of going to a different program. It also helps me visualize better. When I am using Fireworks, I often find myself trying to get inspired or just look for more subtle color changes from my original colors and I end up using external resources such as Kuler, Firefox addon color picker, or a nifty little Java-based program. I do this because I can’t really change what mode I am viewing color in. I find for Web.. I love the Firefox color picker best because it lets me go in very small steps, and lets me change color mode similar to PS.

So along with color, I hate the way Fireworks handles anti-aliasing fonts and text layout. I always seem to struggle with the layout part but that might be due to user error. In CS3, Fireworks handles font anti-aliasing very horribly in comparison to PS. I’d love to see improvements in Fireworks that would make my job easier instead of having to straddle more than 1 program for web layout for the simplest of things. Also PS integration into Fireworks is only half done. You can use layer effects in PS and port then over to FW, sure. But you cannot fully edit those effects within Fireworks for things such as gradients. One point for PS side is that I love the thin outlines I get from PS stroke vs Fireworks. It’s much more subtle but thats a preference thing.

I believe each program has its place for the specific tasks that need to be done. For image editing and creation (think freehand art, non-vector or textures for 3d) Photoshop can be very powerful. For quick web layout creation, Fireworks is pretty good (coming from someone who learned PS first). For full functionality with vectors, Illustrator is your man.