Start learning with our library of video tutorials taught by experts. Get started
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.
Rarely do the images that we need arrive at exactly the right sizes for all users. Resizing images on the canvas can be handled in a variety of ways. We can work with the Scaling tools in the selection part of the Tools panel. We can go into our Modify menu and choose one of the Transform submenus. But in CS5, we have a brand-new feature for scaling right inside the Properties panel. Down near the left-hand side of the Properties panel, right beside the Width and Height, you will see a little icon. This is the Constrain Proportions icon. When I click on that icon, and it gets filled with a little black square, it means that I can change either the width or the height, and I will proportionally scale the other dimension.
So I am going to go and change my width here from 3888 pixels down to a much more manageable Web size. I am going to try about 600. And as soon as I press the Tab key, the image automatically resizes inside the window. Now, you might notice that while the image got smaller, the entire file didn't shrink at all. We still have a 3888 pixel wide file. And that's fine, because we can fix that really easily too. I am just going to click away from my graphic.
And inside the Properties panel, I have a nice magical little button called Fit Canvas. And when I click on that, the Canvas is resized to fit the current image size. So it's a great way to resize things without having to go into numeric transform or fiddle around with the scaling tools. Now, another type of scaling can be done using the 9-slice scaling tool. And this is a tool that was introduced in Fireworks CS4. So we are going to try this with a different image. So I've got a file here of a bird.
So what I want to do here is I want to turn this into more of a panoramic image. Now, if I try to do this with my standard scaling tools like the Regular Scale tool here and just drag, like so, you will notice that what happens is the bird gets distorted. Everything gets stretched. And that's really not ideal here. Now, with certain images, and this one's a pretty good candidate, we can actually work with a tool called the 9- slice scaling tool to give us some of the scaling without the same kind of distortion that you were going to get by using just the plain old Scaling tool.
So I am going to go into my Scale tools and use 9-slice scaling. And the idea behind the 9-slice scaling tool is that you're basically keeping elements safe from being distorted or stretched. And I will show you what I mean as I drag these guides around. I am just going to move this guide over this way and my right-hand guide I am going to move over that way as well. What I am looking for is an area in the vertical middle that doesn't have a lot of detail that we can get away with fudging a little bit for scaling.
And I've got that area there. I have got a little bit of mountain range in the background, but it's fairly blurry. So we can probably make that work out fairly well. The key is the bird is not part of that central grid area. So I basically can now stretch this horizontally like so, and you notice nothing happens to the bird. The background, in this image, is sufficiently out of focus to begin with that we are getting a pretty reasonable result. I am just going to go ahead and commit to this.
And I'm going to click away from my image and then fit the canvas, and you can see there, we have got a fairly decent rescaled image. It's a little more of a panoramic image. We have certainly changed the geography a little bit in the process, but we have gotten a fairly interesting result here and we maintained our main key element, that being the bird. It's not been distorted whatsoever. Now like I said, this won't work in every single image. If you have an image with a lot of detail, the 9-slice scale tool is probably not going to be much help to you. But if you have this kind of image where you have got areas that don't have a lot of information that can get away with being distorted in and of themselves, you might find this to be a tool that's helpful.
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.