Hidden Gems - Fireworks Fade Image Command

By: Jim Babbage

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:

  1. Select your bitmap or vector object on the canvas, using the Pointer tool, as in Figure 1.

Camera object select on the canvas
FIGURE 1 - Bitmap object selected using the Pointer tool


Screen grab of the Commands menu, with the Fade Image command highlighted.
FIGURE 2 - Fade Image menu

  1. 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.

Screen grab of Fade Image dialogue box
FIGURE 3 - Fade Image Dialogue box

  1. 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.

screen grab of the Layers panel, with the new vector mask selected
FIGURE 4 - The Layers panel, with our vector mask selected

  1. 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.
  2. 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.
Results of the Fade Image command, with the Vector mask selected Results of the editing the gradeint in the vector mask

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

Downloads are disabled during your trial period.

Fireworks, fade image, masking, transparency, gradient