Hidden Gems - Fireworks Fade Image Command
Page 1 of 2
Set for printing
Note: If you are using Fireworks CS4, the Fade Image command has been renamed to the Auto
Vector Mask command.
Ever wanted to quickly fade an image from one side to the other? Or from the
inside to the outside? There's an often overlooked little gem in the Fireworks
Command Menu that does just that. Let's take a look.
Fading an image is normally done with a gradient mask and an underlying object.
While this in itself is not too hard to do (see my masking
tutorial for an in-depth look at masking), sometimes you just need to fade
an image really quick. The Fade Image command is just for
you, then. Here's how it works:
- Select your bitmap or vector object on the canvas, using the Pointer tool,
as in Figure 1.

FIGURE 1 - Bitmap object selected using the Pointer tool
- Go to COMMANDS > CREATIVE > FADE IMAGE.

FIGURE 2 - Fade Image menu
- From the Fade Image dialogue box, select the type of fade
you wish you use, by clicking on the thumbnail sample. In my case, I am making
a header image for a web site, so I chose a fade from left to right. This
blends the right side of the image into the objects beneath it. My choice
is currently highlighted in Figure 3. You can see how the Fade Image dialogue
box gives you a thumbnail example of how your choice will affect your image.
The checkerboard you see indicates the area that will become transparent.

FIGURE 3 - Fade Image Dialogue box
- Click OK. Fireworks automatically creates a vector mask with a gradient
fill. Take a look at your Layers panel, and you will see. In Figure 4 below,
I have selected the mask itself, Fireworks outlines the mask in yellow, to
indicate it is active.

FIGURE 4 - The Layers panel, with our vector mask selected
- Click on the mask and check your canvas. You will see that the mask has
a yellow handle at each corner, and that a gradient control arm is visible.
This control arm lets you adjust the angle and length of the gradient. This
in turn, controls how much of your image is visible, and how quickly it fades.
Try dragging the square end point of the control arm to the left. You'll
see that the gradient changes, essentially fading your image faster. Drag
the square handle to the right and you will see that the fade becomes more
gradual. In the case of my image, I can see the right edge of the photo.
- If you drag the round handle (the start point) to the right, you shift
the location of the gradient. This has the effect of making the left side
of your image more solid. Figures 5 and 6 show how I adjusted my gradient
after the command was executed.
 |
 |
FIGURE 5 - Results of the Fade Image command,
with the Vector mask selected
|
FIGURE 6 - Results of the editing the gradient
in the vector mask
|
Page 1 of 2 1
2
Next

Download Support Files
Keywords
Fireworks, fade image, masking, transparency, gradient