Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
There're going to be times when you don't really need to export an entire document you're working with. Maybe you only want the client to focus on one specific element. Maybe it's some navigation buttons or a logo. In our case, with this file, it's going to be a group of icons we're going to use for the Explore California Web site. So rather than having to crop the entire document and save out what's left after the cropping, we're going to use a cool little tool called the Export Area tool in Fireworks, which really speeds up this process. If you go over to your Tools panel in the Select tools, you'll see our Crop tool and if we click and hold, you'll also see the Export Area tool, and that's the one we want to work with here, and it behaves a little bit like the Crop tool at first.
Once you've selected it, you move on your canvas and you click and drag, just like you would for creating a crop. Once you've got a crop drawn, you can adjust it, so that you're only including the elements you want and up until now, it pretty much seems just like a regular Crop tool, but here is where things change. As soon as I've got the crop that I want, I'll double-click on the crop itself, and I've brought back to the Image Preview window. I'll just scroll around inside my window here, and there is my icons, and you can see them there.
So what I'm going to be able to do here is export out just this one selection as a specific file format and be able to send it off to the client for them to review. The nice thing about this process is I'm focusing just on the elements I'm concerned about. So in this case here, they are just black and white images. I could probably just switch this down to about, well, I'd say, usually 8 colors, and I'm getting the exact thing that I want. It's a nice simple GIF file. It's a tiny little file, 2.5 kilobytes. I could probably actually do even 2 colors.
Well, 2 is a little bit rough around the edges. So I think 8 is probably a better choice. That gives us a little bit of blending between the icons themselves and the background. Once I've set up my optimization settings - the Format, the File Size and so on - all I've got to do is click on Export, and I can export that file out. I'm just going to call this snowgear_icons. And I'm going to export just the images themselves. Click Save, and that file is then exported off into my folder.
I've had no impact on my original image other than drawing that one crop. So I quickly hop over to my File menu and choose Open. Scroll around. There's my snowgear_icons right there, just a GIF image, tiny file. I can double-click on it. Open it back up inside of Fireworks. Now again, this has been exported out as a flattened file, so just sort of reinforcement on that concept of exporting, in the original image, these guys are all separate individual vector artwork components.
In the exported GIF file, we have one big graphic that has all five icons in it. They're all flattened. There're no vector capabilities left there at all. So there you go, just another way to get your images out of fireworks and into the flattened format that you can use for Web or other purposes.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.