Fireworks

It is not so much what is behind the mask that matters - just as Yeats so famously describes - as is what is revealed. This is certainly true of graphical masking techniques in general, and particularly in the case of Fireworks masks where you have so many options for hiding and revealing your creations to the world.

A mask is simply a graphical object that is placed on top of another image and given instructions on how it should interact with its partner. Masks are always a pair of objects - the masking object and the object that is being masked. The beauty of masks is that they allow you to change a design or image without ever changing the image below the mask. You decide how much to reveal or hide based on your choice of masking object and the way you apply it.

Fireworks allows you to create masks with either a bitmap image or with a vector object that you've created. This flexibility gives you many options, but also may leave you with a question. "Which one is the right one to use?" This article and the one to follow next month will try to remove some of the mystery behind masking and give you practical examples of when to use a bitmap mask and when a vector mask is more appropriate.

Masking Defined
When one graphical object interacts with another as a mask, new transparency values are created for the underlying, or masked, object based on the color of the masking object. If a mask is composed entirely of white colors, the underlying image will be completely opaque. If the mask is made up of nothing but black, the object below will be entirely transparent. That's a simple enough concept, but it's really the interplay that you can create between the range of colors and shades between white and black that makes masks so powerful. One of the most common uses of masking is the fading of images from opaque to transparent, created by using a vector gradient fill that transitions from white to black. As the colors in the masking object become progressively darker, the underlying image is transformed and becomes progressively transparent.

When a bitmap object such as a photograph is used as a mask, you have a whole new range of creative possibilities. Bitmaps - with their more organic appearance and the millions of colors that might be in place in the image - allow for a far wider range of interactions than are possible with vector objects. This allows you to create effects such as you see in Figure 1, where a simple photograph has been used to mask a text object.

Masking with Bitmaps
The uses of bitmap objects in Fireworks can be broken down into 3 broad categories based on the effects they achieve:

1. A bitmap mask can be used to remove portions of an image by erasing or changing parts of the bitmap object.
2. Painting on top of an empty bitmap object allows you to reveal portions of an image depending on the settings used for the digital paint you apply.
3. Digital photographs can be combined with an object to provide interesting new textures, tints, and patterns to a composition.

In the following mini-tutorials you'll see how all three effects are achieved.

Fireworks Interface Tools for Masks
Before moving on to the "lessons on creating bitmap masks," a quick review of the way that Fireworks allows you to apply and control bitmaps is in order. Figure 2 shows the Fireworks Layers panel with the controls you'll use for creating and controlling bitmap masks labeled.

Any time a mask is created in Fireworks, the Layers panel will display a thumbnail of the masking object side-by-side with the masked object. The chain link icon that separates the two lets you see at a glance that a mask is in place.

Remember that one of the beautiful things about masks is that, while it appears that you're modifying the masked object, in reality you're only changing the mask. No pixels are damaged or removed during the masking process, which means that if things go astray you can simply remove the mask and start over again. Your original image is never changed when masks are used.

At the bottom of the Layers paneltake note of the two small buttons that allow you to generate new bitmap masking objects. You'll see those two buttons in action in the first two tutorials in this article.

Painting Over Bitmaps: Create a Funky Image Edge
A question that I used to hear pretty often at the Fireworks forum was "How do I get an irregular edge around a photograph?" It's surprisingly easy with the tools that Fireworks gives you. In this first lesson you'll learn how to apply a bitmap mask and then paint around the perimeter to get one of those funky edges.

1. To begin, create a new Fireworks document and choose File > Import. Locate a photograph that you want to practice with and click the Open button. When the insert cursor appears (a sideways "L"), click once to paste the image onto the canvas. (For my examples here I'm using the sample images that ship with Windows. You can use any digital image of your choice.)
2. Open the Layers panel and click the Add Mask button shown here.

   Adding a bitmap mask with this button creates a bitmap object over your imported image that is completely filled with white pixels. Since white pixels allow the underlying image to remain opaque, it doesn't really appear as if much has happened. The real magic takes place by removing or painting over some of those white pixels.

3. Select the Paintbrush tool from the Bitmap group in the Tools panel as shown here.
4. Since the goal here is to hide pixels around the edges of this image, you'll need to choose a black stroke color for your Paintbrush. Painting on top of the existing white bitmap object with black will cause those areas to be hidden. What's cool about using a bitmap brush for this effect is that you can play with the different settings for stroke and edge types to get some very interesting effects. In addition, painting with bitmap pixels in Fireworks allows you to build up paint on top of the mask by repeatedly painting over the mask. This allows you to create a range of opacity with some areas remaining opaque, some completely transparent, and gives you a wide range of possibilities in-between.

In this example I used the following settings:

• Stroke type: Watercolor, Heavy
• Edge transparency: 50
• Edge texture: Confetti

Using the Property inspector match those settings or choose settings of your own and stroke around the outer perimeter of your canvas. As you stroke on more black pixels more of the underlying image will become transparent. In the end you should have a new creation similar to the one you see in Figure 3.

This technique gives you a great deal of freedom for creating irregular image edges and for cool effects that move beyond simple rectangular shapes. By experimenting with different edges, textures, and buildup of paint your options of making those funky edges are nearly limitless.

Painting on a Blank Bitmap: Revealing an Image
Now that you've seen how to paint on top of an existing bitmap, let's look at the second method for working with bitmap masks. In this technique you'll start with a new blank bitmap object, and by painting on top of the mask, determine what parts of the underlying image is to be revealed.

As with the previous technique, painting on top of an empty bitmap with the Paintbrush tool allows you to get some cool effects by setting the Stroke and Edge settings for the tool. Let's put this method into action.

1. Create a new Fireworks document and import the digital photo you'd like to work on by choosing File > Import. Paste the bitmap object into place by clicking on the canvas when you see the Insert cursor.
2. To add an empty bitmap object to the canvas select on the button you see highlighted in Figure 4, or choose Edit > Insert > Empty Bitmap. Either method will place an empty bitmap above the imported image on the canvas.
3. Once again the Paintbrush tool allows you to build up paint onto the canvas with a great deal of flexibility. Select the Paintbrush and set the settings in the Property inspector to the following:

• Color: White
• Size: 25 pixels
• Stroke type: Unnatural > Fluid Splatter

4. Before painting, check the Layers panel to be sure that the empty bitmap object - represented by the checkerboard thumbnail in the Layers panel - is highlighted in blue to indicate that it is selected.
5. Using the Paintbrush, stroke color over your image. As you can see in Figure 5, I painted the bitmap I used in a spiral pattern so the center of the painted area is filled with color.
6. Once you have your painted mask all set, hold down the Shift key and select both the bitmap and the image that you're masking. You can do that directly on the canvas or select the thumbnails in the Layers panel.
7. Now choose Modify > Mask > Group as Mask. Your painted mask will now reveal the image below it, as you see in Figure 6.

Combining a bitmap mask with the ability that the Paintbrush tool gives you allows you to generate some fascinating images. No longer constrained to those basic rectangular boxes, masking with an empty bitmap gives you complete control over what parts of an image you'll reveal to the world.

Masking with an Existing Image: Towards More Organic Graphics
Vector images are terrific things. Small in file weight, and incredibly easy to modify, vectors are amazingly versatile. Vectors have a drawback though in that they often appear plastic, and lack life and character. Sure, you can add textures, and even a bit of noise in Fireworks MX 2004, but the vector format itself is limited when you want to create a graphic that is a little more lifelike, or organic.

There's a solution though, and once again the secret is in the masking process. By using a bitmap object as a mask you can start with a basic vector object and then add a realistic texture that takes advantage of the subtle shades and variations in texture that only the real world provides.

In this final lesson you'll see how to apply a bitmap mask over the top of some vector-based text. As you'll see, the technique is similar to what you've done before in that you'll place the masking object over the top of the object to be masked and Voila: Organic images!

1. Create a new Fireworks document and add some text to the document. For my example I typed in the text "Wintry Days" in a large heavy font. I chose Copperplate Gothic Bold and set the font size to 58.
2. Set the font color and a stroke to your liking. My example uses a medium blue fill with a stroke set to Crayon > Basic, with a width of 2 pixels, seen here.
3. Choose File > Import and locate an image to your liking. I chose the file named winter.jpg that Windows users will find in their Sample Pictures folder.
4. Increasing the contrast before the mask is applied will improve the masking effect that you're about to apply. A simple method for getting this done is to turn to the Effects area of the Property inspector and click the Plus sign to add an effect. Choose Sharpen > Sharpen More to really make the contrast in the image pop.
5. Position your bitmap over the top of the text. This is a good time to scale the image, and even turn down the opacity of the object so you can get it just where you want it. Figure 7 shows an image prepared and positioned over the top of the text.
6. Once the masking object is in place turn the opacity back to 100%. Hold down the Shift key and select both the text and the bitmap. Remember that this can be done either on the canvas, or by using the Layers panel and selecting the thumbnails.
7. With both objects selected choose Modify > Mask > Group as Mask. Not too bad right? Figure 8 shows the final results of this operation.
8. Once the mask is applied you can tweak things a bit by selecting the thumbnail of the bitmap in the Layers panel and use Filters to adjust the color further. Look for the yellow border to appear around the masking object in the Layers panel so you know it's selected.

Filters are a destructive process, so go slowly and undo if you don't like the effect you achieve when the mask is modified. Unlike Live Effects you won't be able to change the image again after the file is saved. In Figure 9 you see the results I achieved by choosing Filters > Adjust Color > Brightness and Contrast.

And there we have our lovely masked image. Like so many creative techniques it takes a bit of time to develop the knack for using bitmaps in this manner. You'll get the best results when images that have sharp contrast between light and dark areas are used. Take some time to play with different settings and combinations of effects and Filters until you're able to get your own unique designs looking exactly the way you want.

Conclusion
In this article you've seen three ways that bitmaps can be used as masks. You've learned that masks can be used to hide parts of an image, to reveal parts of an image, and for adding organic textures to objects. All of these processes are easy enough to apply. It's up to you to take things to the next level in your own designs.

In the next article in this series you'll learn how to use vector objects as masks. Using vector-based shapes and the careful application of color fills you can remove backgrounds from a photograph, fade images in a multitude of different ways, and even tint your images for some interesting creative effects. As Yeats would say, it's all about what those masks reveal, just as it is with bitmap masks.