Adobe Fireworks CS3 Tutorials
Exporting / Publishing Files
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Exporting / Publishing Files)
Fireworks has been designed as primarily a Web graphics tool, so its main use will be to work on graphics that are going to be published on the Web. As I mentioned previously, one complication to this is that the native Fireworks file format, the PNG, or ping format, is not supported by many browsers, so usually you'll need to export, or publish, your Fireworks images in order to convert them to formats that are more friendly for display on the Web. There are two menu commands for exporting in Fireworks: the File Export command, and the File Export Wizard command. The Export Wizard will help you establish your optimization and other settings, so I recommend that you start here. The Export option is great if you've already exported once using the Export Wizard, and you've already set up all of your optimization files, and perhaps you need to change the file name, or the export location, the file format, or the slices, how the slices will be exported or other export details not related to the optimization of the image. Now, I have an image here that's a good candidate to demonstrate for you the various techniques and features involved in exporting files out of Fireworks CS3. I have some slices, and some of those slices have been converted to HTML, which means they'll be empty. Some of the slices have been optimized. Here's a JPG slice. The rest of the file will probably be a GIF image. And then I also have an enter button with a behavior and some frames that go with that behavior. So I have frames and layers, behaviors, and slices here. So, let's start by choosing File, Export Wizard. That'll bring up this introductory dialog. The Export Wizard helps you to select an export format, find ways to minimize the size and maximize the quality of your image. I call that image optimization, what do you want to do now? Select an export format. You can also target an export file size, for example, ask Fireworks to limit the size to 20K, so because I have a behavior and frames in this file, it's asking me whether I want to make an Animated GIF, a JavaScript Rollover, or a Single Image file. I want to do a JavaScript Rollover. That's what will allow the behavior to work in the browser, so choose that option. Click Continue, and then I get an analysis of the results. We recommend GIF or JPG, both of which are displayed in the preview. If your exported image has a transparent background, it's important that you select the GIF format. JPG does not support transparency. And then after you select a format you can choose the Export Wizard again to change any of these settings. So if you click on Exit, actually you get the Image Preview dialog, which is really the heart of this export process. So, let me slow down a little bit and review this dialog here, this preview dialog, in more detail. This Image Preview panel is dominated by the preview window over here to the right. By default it's divided into two sections: one for determining the size and image quality of a GIF, the other for a JPG. In this case, I have text on this image, so I'm going to go with the GIF setting. Once I've determined which of the two file formats I'm going to choose, I then click on the Four Preview Windows option, and then I can go ahead and change each of these to one style of GIF. Over here I have my various settings: the palette that I can use, Web 216, Exact, Macintosh, Grayscale, Black and White; so the idea is you change each of the settings and then choose the specific GIF format, including the palette, the dithering, the number of colors, as well as transparency. Notice that I can set a transparency over here. Index Transparency, click on the eyedropper, and then choose one of these colors to basically make transparent. You can only choose one color, but you can use transparencies with Fireworks GIF images. You cannot with JPGs. So once you've set all your options, let's say that you choose this image here. You want it to be a GIF that's adaptive, 128 colors, select that choice there, and then click on the Export button. Make sure you've selected the correct image. It'll be highlighted over here. It'll also be displayed over here in terms of what the settings are. Notice that this over here changes, so let's click here, make sure that's the image I'm exporting, and click on the Export button, and that'll bring us to the export dialog, another very important dialog here in Fireworks. Now you need to be careful at this juncture of the export procedure. If you're going to make a mistake that will hurt you, it'll be here in this dialog. The first thing you'll need to ensure is that you're saving it to the correct location, right here, Save In, at the very top. Usually you'll want to save this to an Images sub-folder that's within your Website. It's very, very important if you're working with Dreamweaver. Next, give it a file name, export1, usually you'll want to have no caps, no capitalizations, no weird characters, no spaces, and probably a put a number there to indicate which export it is, because oftentimes you'll be exporting multiple versions. The next drop-down is very important. If you want to export HTML images, Images Only, a Dreamweaver Library, CSS Layers, Director. You can actually export to the Director application. Now, I have slices and JavaScript in the form of behaviors, so I must choose this HTML in Images. Likely Fireworks is smart enough to know that that's my default. If I don't choose HTML in Images, but Images Only, my behavior will not work. You'll notice that I'll be just exporting a GIF image, whereas if I choose HTML and Images, I'm exporting an HTML image in addition to my graphic image. Next, my Slices option; I do have slices, so I want to export the slices, not slice along the guides, but export the slices themselves. I don't want to choose Selected Slices Only, or Current Frame Only. I want to include areas without slices because there are some areas of the image that don't have slices, and the Current Page Only, new in Fireworks CS3, you can work with pages. So, I would double check, or even triple check that everything is okay here, the location, the name, the export, make sure you include the HTML if you have behaviors, the slices options, and then click on the Save button, and Fireworks will then go ahead and export this PNG file. It actually converts it into the various file formats that you've chosen here in the Optimize Panel, in this case, this slice will be a JPG, and the rest of this black area will be a GIF, and because these are empty, these bright green areas, they will not be exported at all. There'll just be an empty spot there. Actually Fireworks will create a table that you can open up in an HTML editor, and those will be blank. So, there you have a summary of some of the very important export procedures and techniques when publishing or exporting your files out of Fireworks CS3.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
