• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Exporting Slices Only

In this lesson, we will learn various export options, which depending on your purposes, you will need to use from time to time.

Typically, we want to export each slice of our layout individually. To do this, right-click on the titleimage slice and Export Selected Slice...

And save the file according to this dialog...

The filename that Fireworks provides to you in this dialog will be the name of your slice. And the format that will be outputted will be whatever is set in the Export Preview dialog.

Let's go to menu File -> Export Preview now.

As you can see, my dialog had been previously set to GIF format and that is why the saved slice came out as titleimage.gif.

For the sideimage slice, we are going to export it as a JPG since it is a photograph. In the Export Preview dialog, set it to JPEG with quality 80 as shown.

You may also have noticed that by setting to JPG, the image quality (especially just above and to the right of the tree) has improved. Compare the screen preview of this export dialog with the GIF export dialog from previous. But the price we pay is the larger file size. According to the dialog the JPEG will be 137K in size, which translates to about 22 sec for a 56kps modem to download it. In comparison, the GIF image is 52K.

Click OK to the export dialog. Clicking OK does not perform the export. It only sets the format. So export the sideimage slice by right-clicking on it and selected Export Slice. This time, Fireworks should save it as sideimage.jpg.

Hold on to the files titleimage.gif and sideimage.jpg. These will be the two files that will be needed for the Intro HTML/Dreamweaver lessons.

Saving Entire Comp Image

Sometimes you just want an single large image of your entire design to show someone for review, for example. Since you want to export the whole document, you will not be needing to work with the slice pieces. So turn off the Web Layer by clicking on the eye icon as shown.

To export the whole document, do Export Preview and set it to either GIF or JPG. I typically will do GIF. And then do File -> Export. You might get this dialog ...

Just click OK to it.

Set your Export dialog to ...

When you click OK, you will get an image of your whole design that is 800x600 pixels -- since this is the document size shown in the Canvas Size dialog.

Creating A Thumbnail Image

Suppose you don't want such a large image. You might just want a small image for a portfolio showcase that is about 250 pixels wide. You can export a smaller image through the File tab of the Export Preview dialog...

From here, you can export immediately with the Export button. Or you can click OK to save the setting and export later with File -> Export.

Note that this only sets the size of the file that is outputted. As you can see from the Canvas Size dialog, the document is still 800x600.

Let's make a backup copy now with File -> Save A Copy and give the copy some name such as creativeworks_2.png.

Changing the Canvas Size

If you really did want to change the acutal image size, you can do so through Modify -> Canvas -> Image Size with the settings shown. But don't make the changes, because we want to keep our comp at full 800x600 size.

Image Optimization

When exporting an image, you want to find the best combination of small file size and good quality. The Preview View in conjuntion with the Optimize panel will help you do this.

Now that you can see all four settings side-by-side, it will be easier for you to pick out the one with the right balance of file size and quality.

Since most modern browser can render the PNG format, you can use Fireworks' native PNG format in your HTML web page. However, it is often not done because the file size is quite large -- the upper left preview shows it to be 411K.

GIF format can support transparency as well as animation, and its file size is quite small. So GIF is most common and is used by default. The upper-left preview shows it to be 54K. However, GIF uses at most 256 colors and therefore may have difficulty with gradients and photographic details. For example, you may notice some pixelation of the sky area marked in the preview.

Since JPEG can support over a million shades of color, it is good if you require photographic quality. And there is a quality setting that you can adjust. The lower-left preivew has a high quality setting that results in a 135K filesize, whereas the lower-right preview is set at a lower quality that results in a filesize of 80K. With the low quality setting, the title text does not appear as sharp.

Note that in this example exercise, we are exporting the whole design comp as one large 800x600 image. That is why the filesizes are so large. This is just an example of the use of the preview views. This is not what we would do in building the actual webpage.

In building the actual webpage, we would be exporting the side image as JPEG and would be exporting the title image as GIF. And the rest of the site is pure HTML. If you look at the filesizes of sideimage.jpg and titleimage.gif that you had exported previously, they are around 17KB and 4KB respective. These are the right size and quality needed for a web page.

Conclusion

That's it for the Intro Fireworks course.

If you continue to the Intro HTML/Dreamweaver course, you will be using these two images in building the website: sideimage.jpg and titleimage.gif (Download by right-clicking the link and do "Save Target As").

You can download the final creativeworks.png in the same fashion.

Hope you have enjoyed the Introductory Fireworks Lessons. You are ready to move on to the HTML and Dreamweaver Lessons.