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.
The advantage to masking is that it's not permanent. You can always change the mask, even after the file has been saved and closed. Try doing that with the Eraser or Crop tool. Making a mask from a Bitmap Selection is a pretty common technique. It's a great way to isolate different images withinside of another image. Now I've got my file open here red_rock_ adventure.png, and you're seeing kind of the starting point for things. Let me just quickly show you how this file ends up. I'm going to hide my start layer in my Layers panel.
There is my final version of the file, and you can see this is a much more interesting image. It's not as jumbled together. I've isolated different elements of each photograph, and place them on the Canvas in a way that I find to be pleasing, and it's all done using Bitmap masks. So we're going to switch over to our start layer here. I'm going to hide and lock my finish layer, so I don't accidentally select anything there. Let's walk through this process. I'll just collapse the finish folder. I'll expand my start folder here, and we can see there are all the individual images inside of our design, and adding a Bitmap Mask is a pretty easy thing to do.
We'll just grab our Bitmap Selection tool, and I'll draw a rectangle over our cyclist in the foreground here. No I'm not going to get an exact match to the finished file, and that's not the important thing here; the important thing is to experiment and try things out. Once I've released the mouse, I get my little Marquee moving around my cyclist. If I go over to my Layers panel, I want to make sure that my individual cyclist is selected. There he is there. All I have got to do to add the Mask is go down and click on the Add Mask icon.
And just like that, he is cropped. Now I haven't actually removed any image information. In fact, if I grab my Pointer tool, you'll see that I still see the outer border of the original image. What's really need about a Mask is once it's been applied, you can actually move your object around inside of the Mask. You'll notice this little control handle right in the middle of the photograph. If I click and drag that, I can reposition my cyclist within the Mask. So if I didn't get him exactly in the right spot, no big deal. I can go ahead and make other changes to it. There we go.
Now the same kind of concept applies to the other images and to different degrees of severity. Now I'm going to hide my top image. It makes a little easier for me to see it, what I'm doing. I'm going to go down to my cyclists that are moving along the shoreline, grab my Bitmap Selection tool again, and just draw my next Bitmap Selection, just like so. Again, make sure that the image that you want to apply the Mask to is currently active in the Layers panel, and then all you've got to do is click on the Add Mask icon and bingo, it applied just like that. And the same concept applies to the other three graphics.
So I'll just quickly go through those ones. So you can see the end result. Lastly, our alone cyclist. Nice shadows in the foreground. So in fairly short order, I've been able to mask all five of my images. Now the other effects you noticed with the finished file, we had a little Drop Shadow behind our photos, and as well we had a Stroke behind the photos, and that, again, is an easy thing to do.
I can do this in a couple of different ways. I'm going to try this with the group idea in mind. First, I'll grab my Pointer tool, hold down my Shift Key and select each of the images in my designs. So, all five of the photographs are selected. Now I can do it on the Canvas like I just did there, but if you find that difficult to do because of the overlapping images, there is nothing wrong with selecting them from the actual Layers panel as well. If you find that easier, by all means, go ahead and do so. Now we're going to go into our Live Filters menu here.
We're going to go to the Photoshop Live Effects. These are basically Photoshop layer styles. Now we don't have quite the robust interface that we have with Photoshop for handling these layer styles, but we can do the basics. The nice thing is these Effects are directly supported within Photoshop. So I'm going to select my Drop Shadow, and you'll see because I have all my images selected at the same time, all five images get the Drop Shadow at the same time. I'm going to increase the Size to about 10, and the Distance to about 10 to get myself a little more impact with the Drop Shadow, and now I'm going to go down and select my Stroke.
I really like this feature. It's not perfect, but there is no feature inside of Fireworks that allows you to run a Stroke directly around an image. So it's a great tool for adding a border around a photograph. Now we're going to make a couple of changes here. First of all, I want to set the Size of this to, well, let's go to about 10 pixels as well, a nice round number. I also want to change the Position of the Stroke. You'll notice that aside from it being incredibly violently red, it's got rounded corners, and I don't really like that.
So I'm going to change the Position of the stroke to Inside, and that gives us a nice, crisp corner around all four sides. I'm going to change the Color obviously from that bright red to white, and click OK. That one Photoshop Live Effect, by selecting all those images first and then going into the Live Filters, and working with the Photoshop Live Effects, I'm able to add that same effect to every single image. The nice thing about that is it makes it consistent. I didn't have to go and apply them one at a time, and then worry if I had the right settings each time.
This gave me the ability to do it all at once. Masking gives you the ability to crop an image with the freedom to change your mind later on. You can edit a mask while it's applied to an image. You can apply Live Filters and even reposition an image within a mask without having to ungroup the two objects.
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.