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 may be times when you receive a bitmap image of some artwork which was, at one point, obviously a vector file. You need to edit the file but scaling and changing the colors can be problematic because a bitmap image is all pixel- based, and any alteration you make to the pixels can have a destructive effect on the overall image. Take, for example, our little sample here, this little symbolic landscape image. Currently, it is a bitmap. If I select it, you'll see it shows up as a bitmap in the Properties panel, which means if I try to scale this to make it maybe a base for a footer on a Web page, I'm going to end up with some significant issues with quality, especially when we go vertically with this.
You can see that the entire image is basically breaking down, and that's really not want we want. I'm just going to press Escape to get out of that Scaling mode. For whatever reason, we don't have the original vector to work with. But the good news is we can actually take this bitmap image and convert it into a series of vectors, which will be scalable. So I'm going to walk you through that process here. Now in the case we have with this particular image, the Magic Wand is going to be a big help. I'm going to zoom in a little bit, and I'm going to select my Magic Wand tool, and I'm going to set the Tolerance down to a lower number, probably around 10 or lower.
I just want to make sure that the only thing I'm selecting is specific colors. I'm going to click on my top yellow part here of my bitmap image, and I'll get my selection applied there. And if I hold down the Shift key, I can certainly see if I can get more of it. But that looks like the whole thing. Now, at this point, all I have is a Marquee selection. It's not really going to do me any good as it stands. However, I can go up to my Select menu, and I can choose Convert Marquee to Path, and this is a really cool feature, because it automatically takes the bitmap marquee and turns it into a path.
Now, in this case, here, it's also added some colors that I wasn't expecting, but that's not a hard thing to deal with. I'm just going to reposition this ever so slightly, and I can change the Fill, and in this case, get rid of a Stroke. And there's my yellow for my top part of my design. I'm going to do the same thing with the other two pieces. I'll grab my Magic Wand. I am going to select the mid ground here. I am going to go and choose Select > Convert Marquee to Path, and it will take on the last Fill color I had, which was the yellow, and I'll, again, just grab my Pointer tool, reposition that a little bit, and change the color by changing the Fill.
And then, I'll just position that up a little higher so it ties in with my top vector. And the last one to go, Magic Wand one more time, click on the bottom and yet again, same process: Select > Convert Marquee to Path. I'll just grab my Pointer tool. Reposition it slightly so I can get my color match. Now, I've got that selected as well. I am going to remove my bitmap out of the area there, take my bottom part of my landscape and just tie it in. And when I deselect my objects, you can I've got the same kind of effect.
But this is in a vector format, so I can actually scale this any way that I like. I can go and select all three pieces, grab my Scaling tool and if zoom out a bit so we can see more of the canvas, press Ctrl+Minus or Command+Minus to do that, I can run that right across. And that gives me the scaling that I need for that particular element. Now, what's most noticeable here, if I move that bitmap out of the way a bit more, I'm going to select all three, and I'm going to group them. So press Ctrl+G or Command+G to group together, and I'll scale them vertically too.
And you can see that I'm not getting near with the distortion I was getting with the original bitmap. If I try to do that with a bitmap, just give you a reminder of what that will look like. So this technique can come in really handy if you're handed over a JPEG file of company logo that you need to work with to rescale for a Web site design or possibly even something higher fidelity, maybe for print.
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.