Print Story

In last month's article I led off with the same quotation from Yeats. At the risk of seeming culturally challenged, I'll lead off with it again for the second treatment of how masks function in Fireworks, simply because it is so apt.

A mask in a graphical editor like Fireworks (or Flash, among others) has the same function that Yeats describes to control how much we can see of the object behind the mask. The interplay between the mask and the mask wearer is what makes our hearts beat. And of course, when we're dealing with art in any form we do want to get the hearts of our viewers to beat just a little harder. The idea is to grab and draw and maintain attention with our graphics, be they in print or online.

Last month you saw how to do that with bitmap masks. The focus for this month's article is on how vector objects can be used in Fireworks to hide and reveal images and objects in our compositions. And just as in the previous article you'll have the chance to see some practical examples of how vector-based tools in Fireworks can be used for some common creative effects. But first the obligatory review.

Masks and Masking Reviewed
What is a mask? A mask is 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 working in concert to allow creative interplays that modify the appearance of the two. Masks are a marriage between two objects: a masking object lies above its partner and, through its properties, hides or reveals the masked object sitting below.

As well as the how of masking, it's also important that you understand the why of masking and the advantages that these techniques afford you.

Masking is a non-destructive process that does not alter the masked object. If things go awry, deleting or editing the mask does no damage to the original photograph or art.
Masking techniques can help you overcome Fireworks' limited tool set for working with bitmap images. It should come as no surprise that Fireworks is not Photoshop, but many people still insist on grumbling that the tools are dissimilar between the two applications. Fireworks is made to produce screen graphics and Photoshop targets print images. So while they both push pixels around, Fireworks doesn't have the precise bitmap editing tools that Photoshop contains. Does this mean that you can't get creative with Fireworks? Not at all, but you do have to use different techniques, and many of those involve masking.
Masks remain editable in your source Fireworks file unless you take conscious steps to merge your objects together and flatten them. So while Fireworks may not allow you to select pixels with the same precision that Photoshop has, the ability to go back a year from now and open a Fireworks PNG file and make some minor adjustments to a mask has significant advantages over techniques that may throw pixels away. Once those pixels are gone, they're gone for good. Masks help you avoid making changes that you can't recover from, or edit, when future revisions need to be made.

Masks themselves are relatively easy to understand. When one graphical object interacts with another as a mask, new transparency values are created for the masked object based on the color of the masking object. If the masking object is entirely white then nothing will appear to have changed in the masked image. If on the other hand, the masking object is completely black the masked image will be totally transparent. Additionally, areas outside a mask will be hidden as well. Figure 1 illustrates how a mask with varying fill properties affects the masked image below it, creating areas that are opaque, transparent, and semi-transparent based on the size and position of the mask and the colors used in the masking object.

When it comes to Fireworks then, knowing how to create vector objects and using them in different combinations allows you a great deal of creative license. Those who master Fireworks have learned how to mask properly, and whether they use bitmap objects or vector shapes, they have a handle on how the interplay between objects can be used to maximum advantage.

Using Masks in Fireworks for Creative Effects
The rest of this article will focus on those fundamental vector masking skills and three common methods for using masks in Fireworks for creative effects.

The use of vector objects can be broken into three categories based on the effects you hope to achieve:

Masking with text allows you to paste a bitmap image such as a photograph inside text objects. You can also create text masks with complex stroke-and-fill properties that give you even greater control over the output in your final composition.
Vector masks can be used to crop or fade an image to perform tasks such as cropping an irregular shape or creating a collage. This type of mask can be performed either with the automatic tools that Fireworks provides or with your own custom combination of fills and strokes on a simple vector shape.
Removing backgrounds is also accomplished with vector masks, most commonly created using the Pen tool to create an irregular shape that covers the part of the image that you want to show, while hiding the rest of the photograph.

You'll take a look at each of these methods in turn as the rest of this article shows how each of these techniques is accomplished.

Masking with Text by Pasting Inside
Combining text with images is a great way to create interest in a composition. Any image can be pasted inside text, which automatically creates a mask.

To begin, start a new Fireworks document and choose File > Import to find a appropriate image to work with. In these examples I've selected sunset.jpg from My Documents/My Pictures/Sample Pictures that Windows contains. (Macintosh users can find some great photos to work with at MacintoshHD:Library:User Photos.)
Choose File > Import and browse to the image you wish to use. After you choose Open you'll be returned to your canvas where you can click once to import the image. Save your file.
Using the Text tool type some text directly on top of your image. A nice heavy font works best here.
Select the image and cut it from the canvas by choosing Edit > Cut, or press the Ctrl/Cmd+X.
Select the text and choose Edit > Paste Inside. Your photograph will now replace any fill that has been applied to your text.
In the Layers panel note the way that your photograph has been combined with the text. Figure 2 illustrates how a text mask applied in this manner will appear in the Layers panel.
Click on the thumbnail of your text on the right in the Layers panel to select the text. You will see a yellow border appear around the thumbnail and your text will also have a yellow box surrounding it.
With the text selected you can now use the Property Inspector to change some of the text properties. In the example you see in Figure 3 I have added a stroke color and set the stroke to 3 pixels wide. I've also applied two instances of a drop shadow effect to the text to get a good heavy shadow.
Notice that when using the Paste Inside technique that by default you see the path outline and the fill and stroke, as indicated in the Property Inspector. This differs from the technique you'll use next to apply a mask manually.

Masking with Text Objects
In the first method for applying a text mask we cut and pasted the image into a text object. In this next lesson you'll see how to create a text object and set its properties before applying your mask. This technique uses the ability that masks have to set varying degrees of transparency to create an effect.

Start a new Fireworks document with a black canvas color and import your practice photograph. Save your file.
Import the image you wish to mask by choosing File > Import and browsing to your photograph.
Use the Text tool to create a text object with a message of your choosing. In my example I used an Arial font set to 96 pixels, bold.
Click on the Fill color button in the Property Inspector and select the Fill Options button at the bottom of the pop-up window that appears. Set the fill color to black and the Texture value to Hatch 1 with 100% of the texture showing. Figure 4 shows how your Fill options should appear.
Use the same method for creating a Stroke on your text. Select the Stroke color button and click on the Stroke Options button to see all of the possible selections. For my example I chose a white stroke color with a grain texture applied at 88% and a width of 4 pixels. Refer to Figure 5 for a look at how your text should appear.
Once you have the text appearance set the way you'd like, Shift+click the text and the photo so they're both selected. Or, if those are the only two objects in your document press Ctrl/Cmd+A. Both the text and the image must be selected before you proceed.
Choose Modify > Mask > Group as Mask to apply the mask. Depending on the colors you've used the lighter colors in the text will allow the image to be seen while the darker colors will hide the photo.
You can add additional effects to get some interesting results by selecting the text object in the Layers panel and then turning to the Property Inspector to apply your effects. In Figure 5 you see my sample where a red glow effect has been added.

Masking with Vector Shapes
Now that you've seen a couple of examples of how masks can be created with text, let's move on to the next category masking with vector shapes.

Once again there's an automated method for making masks like this and techniques that allow you greater control over your final output. Let's look at both methods so you have a handle on the basic principles.

Masking with the Fade Image Command
Using the Fade Image command that ships with Fireworks allows you to quickly fade images using 8 presets that ship with Fireworks. The command automatically draws an object with a gradient fill then applies the mask to a selected image to create a fade effect. This method is fast and easy, but since preset fills are used the creative options are a little limited. Let's take a quick look at how it's done.

Open a file or import one of your existing images to a new Fireworks document. Select the image you wish to fade.
From the Menu Bar select Commands > Creative > Fade Image.
Click on one of the fade thumbnails, shown in Figure 6, to set the shape and direction that you want your image to fade. Click OK.
Your image will now be converted to a masked object with portions of the image changing from transparent to opaque based on the size and position of the masking object that the command creates. You can modify the fade by adjusting the position and width of the gradient inside the masking object by adjusting the control handles that appear on screen.

Cropping with Vector Masks
Now that you've seen the automated method for creating a fade let's look at how the same principles are applied in a method that gives you more creative control. By creating your own object and setting its shape, position, size, and fill properties you have complete freedom to create your mask in countless ways.

Once again start by creating a new Fireworks document and importing one of your practice images.
In this example you'll create an oval crop with a textured appearance by positioning an oval shape over the top of your image. Using the Ellipse tool, draw an oval shape over the top of your image.
With the oval shape still selected, set your fill to the Jeans pattern by clicking on the Fill type drop-down in the Property Inspector.
Set the edge of your shape to Feather with a value of 16 pixels. Set the stroke to None. Figure 7 displays the correct Fill and Stroke settings for this example.
Once your settings for the oval shape are correct, select both the shape and the image under it by Shift+clicking the two objects, or select them both in the Layers panel.
From the Menu Bar choose Modify > Mask > Group as Mask. Your two images will now be combined as you see in Figure 8.

In this example the Jeans texture was selected because it demonstrates how color variations work when a mask is created. By using a texture that has a range of colors from dark to light, the effect of applying the mask is a textured appearance for your image.

Of course there are endless possibilities for using masks in this manner, including using textures and gradient fills to further modify how your composition will appear. You should be able to see clearly from this example that adjusting the masking object so there are ranges of shades from dark to light results in an entirely new appearance for your image.

Removing Backgrounds with Masks
Perhaps the most common use of masks is for the removal of objects from the background. Unlike Photoshop, where the pixels in the background are physically removed from the image, with masks the background is made transparent by not covering it with a mask. Typically the shape itself is created by using the Pen tool since this allows you the greatest possible control over the position of the anchor points that define your shape and the lines that connect your points.

By necessity this example will be brief, but there are several excellent tutorials online that cover the use of the Pen tool and how masks are used to remove backgrounds. The key to remember is that your shape must cover the area of the image that you want to remain visible, while leaving the background outside the mask.

Start once again by creating a new Fireworks document and importing one of your practice images.
Select the Pen tool and stitch a basic shape around the part of the image you wish to keep. By clicking and releasing with your mouse you'll create square anchor points that are connected by straight lines, as you see in Figure 9. Using this method allows you to quickly ³rough in² the shape of your mask.
With your basic shape in place, use the Pen tool to modify your anchor points as necessary. Click directly on top of an existing anchor point, represented by the tiny squares at the border of the shape, and while holding down the mouse button, gently drag away from the point. With a little bit (OK, maybe a lot) of practice you'll be able to modify your points so that the lines in the shape precisely cover your image.
Additional modifications to the anchor points and their connecting lines can be achieved by using the Subselection tool (the white arrow in the Tools panel) to modify the shape.
Once your shape covers the part of the image you wish to keep set the Stroke to None and the Fill color to white. If you want to blur the edges of the masked object a bit set the Edge to Feather with a value of 3 or 4 pixels. This is often helpful where you need to hide any minor imperfections in your mask.
Select both the masking object and the object to be masked then choose Modify > Mask > Group as Mask. The parts of your image not covered by the masking object will now be hidden from view.
For final adjustments to your mask simply select the thumbnail image of the shape in the Layers panel. Your path outline will appear in yellow and you can then use either the Pen tool or Subselection tool to further modify your mask. Figure 10 shows the final output that I achieved in this quick example.

Summary
In this article you've seen the three most common methods for combining vector objects with images to create masks. Masks can be generated with text objects, with basic shapes, or with complex shapes that you draw with the Pen tool. All three techniques are important skills to develop as you continue to develop your creative chops with Fireworks.

Uncovering Fireworks Masks: Masking with Bitmaps