The second image you need to add is a photo. Because the ad mixes text and a photograph, you'll have to design both elements carefully to ensure that they don't compete with one another.
1.
| Open banana.jpg, located in the Lesson01/Start folder on the CD.
|
Attractive graphics are usually created using high-quality source elements, such as this photograph of a banana. (This stock photograph was purchased from Photodisc.)
Eventually, the ad will have text over the photo. But if you were to add text now, the text would be hard to read, as there would be too much competition with the banana photo. In the next several steps, you'll force the banana into the background of the image; it will still be visible, but not overwhelming.
The first technique you'll use is a mask. A mask is when one image or shape is used to reveal another. For example, in the figure below, the letter
B is used to mask the banana photograph.
You'll use a rectangle with feathered edges to reveal the center of the banana and make it fade around its edges.
2.
| Select the Rectangle tool. Use the Fill Color box in the Colors section of the Tools panel to set the Fill Color to white (hexadecimal #FFFFFF). Use the Stroke Color box to set the Stroke to none.
|
When you click in the Fill or Stroke Color box in the Colors section of the Tools panel, a palette appears containing a number of color swatches. The white swatch appears on the left side, while the no-color swatch (with a red slash through it) appears near the upper-right corner of the dialog.
You might be wondering why it matters what color the rectangle is, since it will eventually be used to mask the banana and you won't see the color anyway. In fact, the color is quite important. Masks use up to 256 shades of gray to show/hide the masked object. A black mask fully hides the masked object; a white mask fully reveals the masked object; and a gray mask partially reveals the underlying object. By specifying that the rectangle should be white, you are ensuring that everything beneath the rectangle (once it is designated as a mask) will be fully visible.
3.
| Draw a rectangle over the banana, as shown in the figure.
|
At this point, the rectangle is still a just a rectangleit is not yet a mask.
4.
| With the rectangle still selected, in the Edge drop-down in the Fill section of the Property inspector, change the Edge to Feathered and the amount to 25.
|
The rectangle now has fuzzy edges, which will result in a nice gradual effect when it's converted to a mask.
5.
| Switch to the Pointer tool. Hold down the Shift key, and click the banana photo.
|
At this point, both the rectangle and the photo should be selected. Verify that both are selected, or the next step won't work. You should see a blue outline surrounding the banana photo, and the four corners of the rectangle should also be highlighted in blue.
6.
| Choose Modify > Mask > Group as Mask.
|
The rectangle now reveals the banana photo wherever it overlaps the photo.
Tip
Fireworks lets you create vector or bitmap masks. This is a vector mask, because the masking object is a vector rectangle. However, you can create dramatic mask effects by using one bitmap to mask another. Since Fireworks has 256 shades of masking, a bitmap used as a mask can create interesting compositional effects.
The background now has a checkerboard pattern, which indicates a transparent background. You want a white background, however.
7.
| Choose Select > Deselect. In the Property inspector, use the Canvas Color box to change the canvas color from transparent (red slash) to white.
|
The checkerboard pattern disappears, and the background is now white.
8.
| Click to select the mask, and use the Property inspector to lower its opacity to 75 percent.
|
By lowering the mask's opacity, you further fade the banana photo into the background.
9.
| Press and hold the mouse button over the Blur tool, until a submenu appears. From this submenu, select the Dodge tool. In the Property inspector, change the Size setting to 26.
|
Tip
Use the keyboard shortcut R to toggle through the group of tools that contains the Dodge tool.
The Dodge tool is a bitmap editing tool that lets you "paint" pixels lighter. You'll use the Dodge tool to fade the banana a little more, without further degrading the quality of the photograph.
The default size, 13, is a little too small. By increasing the brush size to 26, you'll be able to apply the effect quickly and evenly.
10.
| Press and drag across the image, until it has lightened a small amount.
|
When you're finished, the banana photograph will be faded a little moreenough that text can be legibly layered over it. Although it's not as colorful as the original, the banana still has appeal.