I was amazed at the ease of use and powerful features geared towards web design that Adobe integrated in to Fireworks CS3 when I introduced it to my girlfriend last night. The multitude of brushes themselves, including all types of color changing confetti and “alien paint”, many of which respond to pressure from the pen for the Wacom Bamboo tablet I got her for Christmas, provides all the tools a design will need. I was so impressed that I had to check out those features for myself, and there is no better way to do test Fireworks potential than to produce a real world design.
Ironically the design itself is inspired from Fireworks’ feature set. The grid background was inspired from the show grid feature available in Fireworks, and the glow for these boxes was inspired by an accidental click in the styles panel of Fireworks. I’m pretty satisfied with the new layout that I created in a few hours(would have taken 30 minutes if I knew exactly what I wanted). Fireworks makes applying styles extremely easily by providing a preset that takes only one click to apply and can be easily edited under the properties panel to match your needs. Although I didn’t need it, the integration with other Adobe products such as Dreamweaver, Photoshop and Flash is definitely there. Fireworks has now replaced Photoshop for all my web design needs, I don’t miss anything from Fireworks’ reduced feature set.
However, it is not without its faults. It would run very sluggish in Windows Vista until I disabled in Aero interface, documented on Adobe’s site after a quick google search. This is just unacceptable since the final version of Windows Vista was released prior to CS3 and the beta of Vista has been available for testing for years. I was also unable to take advantage of Fireworks’ slice feature since it refuses to save in any format other than horribly compressed jpeg, that distorts the dotted lines and ruins the glow from boxes. I believe all the images on a site except for colorful images should be PNG, since jpeg sucks at compressing fancy designs with transparency and gradients. Fireworks also save flattened PNGs as PNG 8, which only saves a very small subset of the color spectrum of the file ruining any gradients. I didn’t notice this until I had already made all the components to the design and realized how horrible the gradient from the blue glow looks.
It only took 5 minutes to implement the new design after I prepared the images(there are only three of them, one for the header, body and footer) since all that was required was small updates to less than a dozen lines in my CSS. If you are using Firefox just right click on the header body and footer too see how I implemented the design. You can checkout my old design here.
The next step is to clean up my left side nav and move some of it on to the header. By the way, I did all of this with a sprained and/or fractured right wrist, and I’m right handed, which shows how efficient Fireworks workflow is.