Adobe Fireworks CS3 Tutorials
Pages/Layers/Masks / Working with Layers
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 / Pages/Layers/Masks / Working with Layers)
Let me now review the important concept of layers. When you add objects to the Fireworks canvas, each object in a document resides on a layer. You can either create layers before you add your objects, or add layers as needed. It's important to remember that the canvas is below all of the layers, and not is itself a layer. If you use layers in other applications like Photoshop, Illustrator, or Flash, Fireworks layers work much the same way with a few exceptions, most importantly something that Adobe calls the Web layer up here, which I'll get into later. We'll use the Layers panel, which I have open here, to view the stacking order of the layers, sub-layers, and objects on each layer. Notice for example, button number 1 layer. I can expand and contract it to show both the inter sub-layer and the rectangle sub-layer. These are objects that are on that layer. Likewise, the geek head here only has a bitmap object, right there. Text layer has two objects on it, the multimedia Web authoring, and then this rectangle, this yellow rectangle. Let me go ahead and turn off the slices there, so we can just look at the objects that are on those layers. Fireworks stacks layers based on the order in which you created them, placing the most recently created layer on the top of the stack. The stacking order determines how objects on one layer overlap objects on another. For example, notice that my rectangle is on the bottom, but I can bring that to the top, bring it up here to the Button 1 layer, and then notice that it covers the other objects below it. The reason you can see the other objects below it is my opacity on that rectangle is set to 71 percent, but if I close my layer panel over there, and then bring up the opacity to 100 percent, notice that the only thing that's showing is that Enter, and the reason for that is, notice that the Enter sub-layer is right above that rectangle, but again, I can move that down below. So, now everything is hidden. Let's bring this back down to my text layer, and put it on the bottom so I can see everything above it. So the stacking order that you see here in the Layers panel determines how objects on one layer overlap objects on another, and you can change the order of the layers and the objects within the layers very easily by just clicking and dragging them to different locations. You can also compress or collapse those layers, and now move the entire layer and all of its contents above or below this stacking order. Now the layer panel also displays the current state of all layers in the current frame or page of a document. You'll notice, for example, I have another frame, which I'll also cover a little bit later in this tutorial, here in the Frames panel. I have two frames, Frame 1 and Frame 2. If I set that to Frame 2 and then go back to the Layers panel, notice that I still have my button text and geek head layers, but there's nothing in them. I still have my Web layer as well. Notice that there are some differences. That Web layer notice goes through all of your various frames. Notice also that the name of the Active Layer is highlighted here in the Layers panel, so right now I'm working on that rectangle in the Button 1 layer. Also notice over here, it's highlighted on the canvas. Masks will also be shown in the Layers panel. I'll be covering Masks a little bit later in this section of the tutorial. Selecting the Mask thumbnail allows you to edit the mask, which we'll do a little bit later. Perhaps most importantly, opacity and blend mode controls are at the top of the Layer's panel, so notice I can take my rectangle and I can lower the opacity so it really becomes transparent. That's what that checkerboard pattern means there, is that that's representing negative space, showing you that there's a high transparency setting, or low opacity setting on that element. Notice that if I go all the way down to zero I see the checkerboard pattern clearly, but moving up, making this more opaque to 86, I can barely see it. Likewise, I can take my multimedia Web Authoring text and bring down it's opacity, making it more transparent, so this is probably one of the most important controls that you'll use here in the Layers panel, is controlling the opacity or transparency of each of the layers and also the contents on each layer. So there you have a quick review of the Layer capabilities, including the Layer panel, here in Fireworks CS3. Now I mentioned Masks earlier. Let me now move on to the next movie and discuss more about Masks including bitmap masks, vector masks, and how to use this Layers panel to create masks.
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
