Adobe Fireworks CS3 Tutorials
Optimizing Images / Optimizing Images in the Workspace
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 / Optimizing Images / Optimizing Images in the Workspace)
Exporting graphics for use on the Web is a two-step process: optimizing, and then exporting. In some cases, rather than exporting, you'll simply save your file. I'll be talking more about export techniques later in this tutorial, but right now let me cover more about optimizing graphics in the Fireworks workspace itself using the Optimize Panel, and the Preview Two-up and Four-up tabs here in the main interface. To review, optimizing ensures that your graphics possess the right mix of color, compression, and quality to display as quickly as possible with the best possible quality on a Website. After you finalize a graphic's optimization settings, the graphic is then ready for export. I demonstrated the Export Wizard in the previous movie, but you don't have to use this Export Wizard by choosing File, Export Wizard, and then going through the various questions here enclosing these dialogs to get the image preview dialog here. You don't need to use these two. If you're comfortable with optimizing and exporting graphics, Fireworks actually has optimization and export features in the workspace itself that actually give you greater control over how files are exported. Those two controls here are using the Optimize Panel and also the Preview Two-up and Four-up tabs here. The Optimize Panel as the name suggests, contains the key controls for optimizing. The Active Selection on your canvas determines what is displayed in the Optimize Panel. If you have a slice on the canvas and you select the slice, the Optimize Panel displays the optimize settings for that selected slice. In this way you can customize how each slice will be exported. In this case, for example, I can export this slice, since it really covers this photograph, as a JPG since JPGs usually work better for photographic type images, but the rest of the image, I can click out here, notice that my Optimize Panel changes. What this means is that whatever setting I have here is how the rest of this file excluding the slice, will be exported. In addition, when a slice is selected, notice that the Properties Inspector also has some settings for the type of slice that you'll be creating, whether an image, or an HTML. An HTML changes the color of that slice indicating that this will be basically an empty table cell when it gets exported. If you choose Image, you also have a drop-down menu for choosing optimization presets. Notice the GIF Web 216, GIF adapted 256, are also found here in the Optimization Panel right here, the export's default presets. Another very useful tool is the Two-up and four-up tabs. Generally I start with the Two-up tab, and then change one of the images using the Optimize Panel to a JPG. Let's go ahead and close the Properties Inspector. You can see that this one is a JPG. And now let's click on the other image and let's convert that to a GIF, and then you can compare the relative sizes of the image. Notice that this GIF is a 7.19K. If I change this to one of the JPG options, it's a little bit bigger, so once you determine which is better, JPG or GIF, you can then move to the Four-up tab, and now you have four different copies of the image. You can then set each one to a slightly GIF or a JPG setting to fine-tune exactly what kind of JPG, how much compression, or how little, or what kind of GIF, how many colors, whether to do dithering or loss, I have a loss setting here, which one of these types of GIFs will give you the best possible optimization, and then you choose that individual image by clicking on it. It's a little bit hard to see that this one is selected. There's a black outline there. Select the one that has the best optimization, or the best balance between image quality and image size, and then choose that one to export the rest of the file outside, that is, of the slice. Now, it turns out that these optimization presets are pretty valuable and pretty important. So, let me now move on to the next movie and review each of these optimization presets as well as how to set custom presets, and how to create them and use them. I'll be covering all of this in the next movie.
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
