
Page 1 of 1 In this introductory masking tutorial we will take a photograph and mask it with a string of text. This technique is requested often in various user groups. While not difficult, it certainly expands the creative options for text. You can use your own image, or the one I have supplied in the support docs, leaves.jpg.
![]()
Figure 1 - A Photograph masked with text
Open a new Fireworks document. Set the dimensions to 600 x200 pixels and make sure the canvas color is set to white.
Import the image you wish to use as the "fill" for the text. Go to File > Import and browse for the image. Once you locate it, open the file in the Browse dialog box. If you're new to the Import function, the first thing you will notice is that the image does not open immediately, but the mouse cursor changes to an inverted "L" shape. If you want to size the image to fit within your canvas area, click and drag the cursor. When you let go, the image will be inserted at the desired proportional dimensions.
If you want to import the image without sizing, click anywhere on the canvas.
Now select the text tool from the tool bar. Choose a relatively heavy, bold font, such as Poster or Arial Black. These heavy fonts will show more of the image when the masking is complete. Set the text color to white and choose a large pixel size. I am using a font called "Elephant" and my text size is set to 40.
Type some text, such as (but not limited to) "Text Masking is Fun!"
Choose the Pointer tool, hold down the Shift key and click on the image behind the text. Both images are now selected as you can see in Figure 2.

Figure 2 - Both objects need to be selected in order to
create the mask
Choose Modify > Mask > Group as Mask. The photo shows through the text, but is invisible anywhere else!
![]()
Figure 3 - The completed masking effect
The great thing about masking is editability; the text is still editable and the image is still movable. If you select the text tool again and click inside your text, you will see your cursor change. You can edit the text in this way. If you want to make a lot of changes to the text, go to Text > Editor to bring up a more robust editing tool.
By using the Pointer tool, you can reposition the entire image by clicking and dragging. You can also just move the photo around, so that you can have a different fill inside the text. To do this click and drag the blue Move handle, identified in Figure 4.

Figure 4 - The move handle lets you reposition the image
inside the mask
You can also move the two objects independently by clicking on
the chain icon that appears between the two thumbnails in the Layers panel.
Then select either object and use the Pointer tool on the canvas to reposition
the object.
![]()
Figure 5 - You can unlink and relink the objects within
the Layers Panel
Another way to do this masking technique is to cut the text out of the document (select text, then press Ctrl/CMD+X), select the image and choose Edit > Paste as Mask. The advantage of this technique is text color is not important. For Group as Mask to work as I described, the text color must be white.
For more information on Masking and masking effects, check out these tutorials:
Approximate download size: 178k
Page 1 of 1 1
Keywords
Fireworks, text, masking, group as mask, introductory, layers, paste as mask