Vector Maps
Pixel-based images and path-based images have traditionally been thought of as belonging to different worlds of style and technique. No longer! Adobe® Fireworks CS3® offers a unique design model that combines bitmapped and vector graphics in a single environment.
Now, you can use Fireworks to leverage the best that each type of graphic has to offer without having to switch from one program to another, or from one mode to another. Not only does this make your workflow more efficient, it opens up a world of creative possibilities. In particular, you can use Fireworks vectors as “clipping paths on steroids” for bitmaps, other vectors, and even groups of both.
This article introduces some simple and timesaving ways to use Fireworks bitmaps and vectors together to quickly create useful masking effects.
Prerequisite knowledge:
You should have a working knowledge of the basic concepts behind vector and bitmap graphics.
The Fireworks Tool panel
Take a look at the Tool panel for Fireworks (Window > Tools). You’ll see that the tools are divided into several types. You’ll probably recognize most of these tool icons from working with other software. This tool panel is your “Swiss Army Knife,” with any tool you need a click away. Grab a paint-brush tool from the bitmap tools section of the panel and create a paint smudge. Then grab the Bezier pen tool, or one of the many shape tools (use the little arrow next to the currently selected shape tool to reveal the shape choices) and add a vector graphic. Change the stacking order in the layers panel (Window > Layers). Notice how the properties of selected tools and graphics appear in the properties inspector (Window > Properties). You can use the color options in either the properties inspector or the tool panel to change your color choices. No steep learning curve here.
Bitmap fills: Filling vector shapes with bitmapped patterns
Now that you’ve combined bitmaps and vectors on the same canvas, the next step is to combine them within the same graphic. Fireworks comes with a fairly useful library of seamless bitmap fill textures and you can always add your own.
Start by creating a few simple shapes with the vector tools. In the color section of the Tool panel or in the Property inspector, you have the option to create solid, gradient, web-dithered, or pattern fills. If you choose a pattern fill, the library of named bitmap patterns (with handy sample image tiles) appears. Simply choose one you like.
Once you choose a pattern, your vector will have a bitmap fill, and will appear on the canvas with fill handles that allow you to further manipulate the scale and rotation of the pattern fill. Deselect the shape, and the handles disappear; reselect the shape to restore them.
Figure 1: You can further manipulate a vector shape after filling it with a bitmap fill.
Did you happen to notice that the Text tool is in the vector section of the Tool panel? Fireworks treats text as a vector element and you can easily choose a pattern fill for any text box (and then scale, stretch, distort, stroke, and add effects) without destroying the editability of the text.
By the way, there is a Filters menu that works much like the one in Adobe Photoshop®, but if you apply filters from within the Filters box at the right side of the Property inspector, you can remove, adjust, or rearrange the order in which they are applied at any time. Unlike the filters applied from the Filters menu, these are nondestructive filters that won’t actually modify the graphic elements they are being applied to, much like adjustment layers in Photoshop.
Paste As Mask: Quick techniques for distressing type
Fireworks can use one graphic as a mask for another. This has a million applications. To make circular thumbnail images, simply mask them with a vector circle. To knock an object out of its background, simply trace its outline with the Bezier pen tool and then use the resulting vector object as a mask.
Start with any two graphic elements. One will be the mask shape and the other will only be visible within the area of the mask object. Position the mask object on top of the object to be masked, cut (Command-X/Control-X) the mask object out, and then choose Edit > Paste As Mask.
Figure 2: Use one object as a mask for another.
You can create the same effect by cutting out the object you wish to mask, and then choosing Edit > Paste Inside.
For distressed text effects, start with a homemade ink texture (or try crumpling up a laser-print of a black page several times and then scanning the result back in). Position a text box on top of the texture. Choose Edit > Cut, and then choose Edit > Paste As Mask.
Figure 3: Create a distressed text effect.
You can separate the objects by simply selecting them and choosing Edit > Ungroup. In the Layers panel, you can unlock the pair of objects (by clicking the lock icon) and then move or manipulate either the mask or the masked image. Also, Fireworks gives you the ability to use either the path outline or the grayscale value of the mask so you can create masks with feathered edges or varying degrees of transparency.
The Combine Paths function and the secret Path panel
Fireworks offers tools very similar to the Adobe Illustrator® Pathfinder tool that allows you to knock one path out of another, create a union of two or more paths, find the intersection between paths, etc. In Fireworks CS3, a new Path panel is now available from the Windows > Others menu. (Also worthy of mention in the Others submenu are some fantastic new color selection and blending tools that are modestly labeled Color panel.) The Path panel places a whole spectrum of path and point-editing tools a single click away.
Figure 4: The Path panel is similar to the Pathfinder tool in Illustrator.
The Combine Paths options (also available by choosing Modify > Combine Paths) are useful for things like manipulating type that has been converted to paths, and it also allows you to build complex clipping objects by combining several pieces together.
One unique application is to create “digital marqueting” (marquetry is the art of combining cut pieces of wood into a visual composition). By working with vector shapes in Fireworks, you can preview a photorealistic result, export Illlustrator files that can be sent to a computer-controlled laser-cutting service, and have actual wood pieces cut with astonishing precision.
To create a digital marquetry composition:
- Start with a black-and-white photo.
- Trace out the shadows first. The color doesn't matter. It's just important to try to define the shapes.
- Here, the lighter tones have been added. Notice that they’re just roughed out. Fireworks allows you to “punch” one shape out of another so you'll get the edges of the different areas to match perfectly in a later step. You can see the pen points that define the curve in the image.
- Now go back and add in some of the in-between tones that aren't too dark or too light. You can temporarily turn off the layer containing your highlight areas in order to see and trace the midtones in the photo.
- Separate the exact outlines of the various areas by first combining the areas of similar color. Choose Modify > Combine Paths > Union, and then choose Modify > Combine Paths > Punch to knock the various shapes out of each other. (When you punch the highlights out of the shadows, the highlight shape is lost, so don’t forget to paste a copy back into the hole you created during the punch operation.) Some of the shapes are surprisingly complex considering the source is created “by hand.” I have deep respect for people who do this work with great precision cutting out tiny pieces one at a time with a jeweler’s saw.
- A personal library of custom wood textures was used here, but you can fill the shadows, midtones and highlight shapes with any texture you like. Because Fireworks allows you to apply color-adjustment filters to any object, regardless of whether it’s a vector or bitmap, you can even fill the shapes with the wood texture from the Fireworks library, and then use an Adjust Levels, or Hue, Saturation, and Brightness option to give each group its lighter or darker, or beiger or browner character.
- Add a circle to the background. This will provide the wooden “canvas” into which the other pieces will be “inlaid.”
- Copy the circle (Command-C/Control-C), group all the visible elements together so they can be masked as a single object, and then choose Edit > Paste As Mask to use the background circle as a clipping mask for the composition. Voila! Instant Django Reinhardt pickguard medallion.
Conclusion
Vector masking is one of many useful features in Fireworks, but the program’s greatest strength comes from its demolition of the traditional line between vector and bitmapped graphics. Having both kinds of tools available in one program is convenient, but being able to combine and harmonize them in new and unexpected ways opens a lot of creative doors. Fireworks allows you to change the way you design with old, familiar, and comfortable tools.
