Join Jim Babbage for an in-depth discussion in this video Using the Compound Shape tool, part of Fireworks CS5 Essential Training.
- View Offline
You can create complex Vector shapes quickly and easily with the Compound Shape tool, which is found in the Properties panel. Rather than creating a single Custom Path with the Pen tool, Compound Shape tool allows you to temporarily group multiple Vector shapes together as they are drawn. Making it easy to move the objects at the same time, it also allowing for quick and easy editing of any shape within the compound group. You can also test effects such as Punching, Intersecting, Cropping, or Overlapping Vectors. By using the Subselection tool, each vector is easily accessible and editable. Let's give this a try. We've got our logo_working file up onscreen here and you see our main finished logo has a symbolic golden gate bridge running through the background, and I've got a sample of that golden gate bridge down here as well, to help demonstrate how the Compound Shape tool works.
So, I've got my Pointer tool selected. I am going to click on that bridge. We see, in here, a whole bunch of different vector shapes, all these different individual control points. Now, if I just click and drag I move the entire bridge as a whole, but if I grab the Subselection tool, I can click on individual parts of that Compound Shape, which means I can edit them individually. I can grab a control point on the roadway and change the length of it, change the angle or do whatever I like with that. I have complete control over the individual elements without affecting anything else.
So, it means I can build up a complex shape bit-by-bit without having to try and do it all in one go. So, we are going to give this a try. We are going to rebuild our bridge again, and we'll walk through some of the features inside the Compound Shape tool. I am just going to move my original bridge a little bit further out of the way there, give us some workspace, and we are going to start off by creating one of the bridge towers. So, I am going to go and grab my Rectangle tool. All I want to do is draw a plain old rectangle, just like so. Now, it's only just a simple rectangle. but we are going to add to this and see how the Compound Shape tool makes this a lot easier.
Now, if you take a look down in the Properties panel, over by the right-hand side, you'll see variety of little icons that basically are our control areas for our Compound Shape tool. We've got our Normal shape. We've got our Additive, or Union, shape. We've got our Subtract and Punch, Intersect, and Crop. Now, what I am going to do is I am going to select the Subtract/Punch option. I am going to draw another rectangle. Now, in this case, I am holding down the Shift key to draw a perfect square. When I click and drag, let go with the mouse, you'll see I cut right into that original rectangle, really easy to do.
I'll do the same thing again. I'll add in a couple more of these openings, and there is three of them right there. Now, they are grouped together, but they are also independent from each other. So, if I want to, I can go and grab my Subselection tool. I can select each of those individual shapes, like so. I can do things like check alignments. So I am going to go to my Align panel, and I am just going to align them based on each other. I think I also want to resize them. So, they are a little bit big, and I'd like to have four of those windows in there.
Now, they are currently all three selected. So, I can go ahead and grab my Scaling tool. All I have got to do is grab from a corner and drag upwards, and I can rescale all three of these at the same time. I'll just press my Enter key or the Return key to lock those into place. I'll grab my Subselection tool again and just reposition these three selected objects. I can do this with the mouse. I can do it with my Arrow keys, whatever works for me. I want to add one more little square down at the bottom.
So, make sure that I have got my main shape selected, grab my Rectangle tool and just click and drag, and then we added one more in, now that one wasn't drawn quite at the right size. So, I am going to zoom in a little bit, and let's see if I could scale this one, just select the one shape. You notice when you select one out of all the different shapes inside of this Compound Shape it gets a blue highlight. All the other ones have a black highlight. You know which shape is currently active. I am just going to reposition this, and I'll grab my Scaling tool again, and I'll just drag outwards still I match up with my other windows.
There we go, just like that. I'll zoom out by pressing Ctrl+Minus a couple of times so I can see more of the whole bridge. There we go. If my Pointer tool is selected, I'll just click away and then click back on my shapes, and the whole thing moves as one piece. So they are individually selectable using the Subselection tool. But with the Pointer tool, they basically move as one shape. Now, we'll add in a couple more things here. I am going to zoom out just a little bit more. I want to add in the bridge roadway. So, I am going to switch to my Add Union tool, and I am going to go and grab my Pen tool.
In this case, what I want to do is draw my roadway to create that forced perspective. So, I am going to start over towards the middle of the canvas. I am going to click once. I am going to drag across in a straight line. You remember, working with the Pen tool, if you just click and then move your cursor and click again, you basically get a straight line. I'll do that again for the bottom, and I'll come all the way back to the beginning. And then go right to the very first square and click once to lock that in.
So, now I've got my bridge roadway all set up. Again, this is selectable with the Subselection tool. I can change it. I can reposition it if I am not happy with the original location. Now, the last little bit that I want is I want a copy of the bridge tower down at the other side and sort of enhance that forced perspective. So, I am going to go and select my bridge. I've got rectangle shapes in there, and they are fairly small detail elements so if I accidentally try to select corner of one of my rectangles, I get this little message from Fireworks.
So, I am just going to zoom in a bit to make it a bit easier for more accurate selection. There we go. I'll grab my main rectangle, and I'll just hold down my Shift key, and I'll grab the other one. So, I've got all five elements there, the four windows, or openings, in the bridge, the tower and the tower itself. Now I am going to go to Edit > Clone. I get an exact copy of the bridge in exactly the same location. Now I'll zoom out a little, so we can see things a bit better.
I'll just drag my copy of my bridge down to the other end. Now, it's still currently the same size, so we'll need to do some scaling of that as well. But it was a pretty straightforward process to move it to the different location. I'll grab my Scaling tool and click and drag, and I can make this as smaller as large as I want. I want to really give an enhanced forced perspective. So, something along that line works out pretty well. Again, with my Pointer tool selected, notice these guys are all one piece.
It's not until I grab my Subselection tool that I can go inside and edit the individual elements. So, there you've got the Compound Shape tool. I think you'll find this to be a really handy feature, especially if you are new to working with Vectors or if you are trying to build complex shapes. And even if they are not so much complex in themselves, but having multiple shapes that are working together to create your final design. One last little point I'll make about the Compound Shape tool that's really a nice timesaver. We were doing that punch work by punching out those little squares inside of my bridge tower, that's a pretty easy thing to do inside of the Compound Shape tool.
If I was to do this with a Standard Vector, I'd actually have to go into my Modify menu > Combine Paths and choose Punch. So, I've got a couple of more steps to go before I could actually punch something with a standard set of Vectors. So, the Compound Shape tool I think is something you'll find to be quite helpful. This is just one of many examples of how Fireworks CS5 speeds up your workflow.
- Customizing the workspace
- Working with pages, layers, and states
- Importing content
- Comparing bitmaps and vectors
- Creating and editing vector shapes
- Converting artwork into graphic, button, and animation symbols
- Animating in Fireworks
- Maintaining crisp text in web images
- Sharing content between pages
- Optimizing images for export
- Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst