Adobe Fireworks CS3 Tutorials
Optimizing Images / Optimizing Images
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)
Although Fireworks can be used in a variety of situations to create or edit images for a wide range of uses, it's really been designed from the ground up as a Web graphics tool, so it's primary use to you will be to work on graphics that are destined for the Web. One complication to this is that the native Fireworks file format, the PNG format, or P-N-G, is not supported by most browsers. Also, since these PNG, or ping files contain all the layers, frames, slices, and other data that make them so useful in Fireworks, they're rather big and unwieldy for Web display. For these reasons you'll usually need to export or publish your Fireworks images in order to both optimize them and convert them to more Web-friendly formats. It turns out that the process of optimizing and publishing your Fireworks files will be a very important part of your Fireworks workflow. Let me spend the next several movies demonstrating these procedures, starting In this movie, with Fireworks Image Optimization. Optimizing is the process of getting the best possible image quality at the smallest possible cost in file size. Usually this is measured in kilobytes of memory. Your Fireworks files can be optimized from two locations: the Optimize panel, underneath the Window menu, right there near the top, or the File, Export Wizard. Generally, you'll want to use both of these tools to optimize your Fireworks graphics. The Optimize panel will usually be used with slices. You'll use it to refine and customize how you want sections of your image to be optimized. The Export Wizard sets the default optimization settings for those areas that are not slices, or those areas that are not addressed by the Optimize panel here. So, let me demonstrate how to use both tools, starting with the Optimize panel. Now in this image, I have three areas: I have text, a photo image, and then I have black background, and each of these will require different optimization settings, so this is perfect for the Optimization panel. So, the first thing I'm going to do is slice this photograph here. And using the Optimize panel, set this to JPG, photos almost always optimize better as JPGs. They'll be smaller and they'll also look better. Now the text here is probably best optimized as a GIF, because text will blur if you JPG it, and you want that text, especially the small enter text right there that will be a button later. You want that to be as sharp and crisp as possible. So the majority of this image would probably be better exported and optimized as a GIF, so that's where we'll use the Export Wizard. File, Export Wizard, the Export Wizard helps you to select an export format, so we're going to do that by choosing Select an Export Format, click on Continue. We want to choose Destination, the Web, which is usually the case. So it tells us we want to do either a GIF or a JPG format, which we already knew. That takes us to the Image Preview dialog. This is really the heart of the optimization process. Notice that I have two views here. What you'll probably want to do is set one to GIF and one to JPG, which is the default, and notice that for the most part this GIF is much smaller, it's 8.1K, versus the JPG which is 14.12, and if you notice carefully, the text will be clear in the GIF section. So once you determine whether GIF or JPG, then click on the four preview windows option here, and then adjust all of these to various styles, or varieties of GIFs. GIFs or JPGs, depending on which one is better, and then using these four options to refine which of those four looks the best, and provides the smallest file size. Usually it's a compromise between the file size and the quality. You don't always choose the smallest file, nor the one that looks the best, but something that's perhaps in the middle. So, let's say that this one here is acceptable for us. We choose GIF Web Snap 128. Choose Export, and then that will give us the Export dialog, which I'll cover in more detail in the next movie. Let's go ahead and cancel out of here. But that's the optimization process using the Image Preview dialog. Now there's one more Fireworks trick that I want to show you that will prove to be very useful for these types of images here. Notice that this image has a lot of empty black area. Now, because this is destined for the Web, I'm going to put this in Dreamweaver on a Web Page, and I can designate in Dreamweaver that the background of the page be black. So I don't really need to export these black graphics. So, what I'll do, is I'm going to take my Slice tool, and I'm going to slice up these empty areas on my page. All of them that contain no text and no JPG image there. Now I'm going to open up the Properties Inspector, and notice that when I select the slice up here I have a type drop-down. I can change that from Image to HMTL. Notice that it changes it to this very bright green. What this will do is Fireworks will not export anything in this slice. It will be empty, and then the black will show through in the Dreamweaver document. So, you. make the Dreamweaver do all the work, but the advantage here is that you don't have to pay for this image. This will drastically reduce the file size of this image that you're exporting without eliminating or reducing the quality, whatsoever. So you could actually go through here and very finely define these slices everywhere that there's black background being careful not to slice up any of the text there, and then designate each of those slices to be empty, don't export an image, so I've really drastically reduced, even with just this little bit of work here, the total size, or the total amount of bitmap graphic that I'm exporting here, whereas before, let's go ahead and close my Properties Inspector, I had this entire area was being exported. Now I really only have about 60 percent of this, and I can slice this up even further to reduce that amount. There's another large black empty area there. And also notice that you can modify these slices and change them and edit their dimensions. So, let's select that and then open up the Properties Inspector and set the type from Image to HTML. HTML is a little bit unclear. Notice that it also says HTML Slice, but that just reminds you that that color will be taken care of in your HTML document. So there you have three very good techniques here in Fireworks for optimizing your images: the Optimize panel, the File, Export Wizard, and then the Properties Inspector when you select a slice and convert it to either an HTML slice or an image slice.
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
