Fireworks General Discoveries
I very rarely open Fireworks since I do most of my graphic work in Photoshop and Illustrator. That is why I decided to take a peek at the Lynda.com videos Fireworks CS4 Essential Training with Jim Babbage. I watch and read a lot of web developer tutorials. Many of these give some reference to Fireworks so I decided to take a look. I thought that I would include in this post something about Fireworks. Since compressing/optimizing photos is such a critical part of web design and it is somewhat different in Photoshop, this post is going to be all about optimizing photos in Fireworks.
The first thing to note about Fireworks is that it integrates optimization tools right in the main workspace of the program. Additionally, it has an optimize panel which was turned on in my program and visible from start-up. That alone suggested to me that I may have been missing the boat on keeping this program buried within my Adobe directory. Once I really started looking, the program is obviously created with web development in mind. This is in stark contrast to Photoshop, which is very much geared towards photographic manipulation, and Illustrator which is geared towards print.
Optimizing in Fireworks (Exporting)
All of the general optimization principles that apply to Photoshop also apply to Fireworks. In other words, JPG’s are still generally the best choice for photographs and graphics with gradients and millions of colors. GIF is still the file type of choice for flat color images. You still do the major tuning for JPG’s with the quality setting, and the major tuning of GIF’s with the number of colors.
Fireworks does not have a Save for Web & Devices option like Photoshop. Instead it has an optimize panel through which you export the native PNG file to some other file format. Save As in Fireworks has more options that the optimize window with respect to the number of file types you can save. The main idea with Fireworks is to export a flat file using one of several techniques that I will go through below.
The Original, Preview, 2-up and 4-up views are accessed from the top of the workspace right in Fireworks proper. This is much different that having to go to another window like in Photoshop. You can view the optimizations simply by clicking one of these button directly from the main workspace.
Export Wizard
One way to export and optimize is by using the export wizard. The export wizard walks you through the process of exporting PNG files to other, web ready formats.
File > Export Wizard...

The export wizard allows you to specify a target file size and it will assist in the optimization to maintain the target file size.
Additionally, the wizard will ask you what you want to do with the file. You can choose “the Web” and it will tell you that it recommends either GIF or JPG. Then it will show you its best shot at those two formats. It will preview both GIF and JPG side by side for comparison of the file size and the quality.
Once you see the previews, you can then click on one of them and further optimize the image manually in the options tab. Once you are satisfied with the optimized image, you then just click the export button and save it to the desired location on your computer.
Image Preview
Fireworks also has an option for exporting that looks very similar to Photoshop’s Save for Web & Devices dialog box. It is called “Image Preview”.
File > Image Preview...

This will get you to the Image Preview as shown above. The Options tab in the Image Preview gives a very similar view to Photoshop’s Save for Web & Devices dialog box.
There is another tab called the file tab that allows you other options like scale down the image and export a specific area. This is cropping on the fly when you export the image.
The last tab in the Image Preview window is the animation tab. If you have an animated GIF, you can change things like the timing of the animation and looping settings.
Export Area Tool
In Fireworks, you can export specific areas of your file, or page. You don’t have to crop the area and export; you can simply click the Export Area Tool, which is in the tool bar with the Crop tool. Just click and hold the crop tool and you will see a fly out that shows the Export Area Tool.
You use this tool like the crop tool, by drawing out the area that you want to export. Then you either double click on the area or press enter and the Image Preview dialog box will appear with only the selected area in the preview. At this point you can optimize and export just as you would with the Image Preview.
Overall, I have been missing out on some very cool features by not using Fireworks. That is not to say that I am going to immediately give up on Photoshop and Illustrator, but I will use it for quick edits to web elements and I expect that my usage will grow as I move forward.