Fade Image

Original artwork courtesy of my old mate, Ron Thayne, with a little help from Adobe Photoshop6!

Yet another popular effect for images and banners is the "faded image" shown above. This is produced in Fireworks4 using "masks" and is done as follows:

Open a new canvas, big enough to contain your jpg/gif image.

Click FILE>IMPORT and navigate to the jpg/gif image you wish to apply the effect to.

The cursor changes to an upside-down "L" at this point. The corner of this L represents the top-left corner of your imported graphic. Click on the canvas to place the image, like so:

Trim away any excess canvas by clicking MODIFY>TRIM CANVAS.

Draw a rectangle completely covering your original image. Don't worry if it overlaps the edges! Click the paintbucket tool and select a white fill for this new rectangle. Click to open the FILL panel and select LINEAR from the drop-down menu. This should default to a BLACK>WHITE fill as shown here:

HINT: It's worth pointing out here that the Linear Fill suggested above is not the only method of "blending" your image into the background. It's just the one used to produce the image at top. Basically, ANY black/white fill effect you apply will work just as well! Whether that's a "Radial" fill, or simply a diffused "Inner Glow", they will work the same, giving faded edges to the image.

Now, click/hold the black Arrow tool in the Toolbox and choose the "Select Behind" tool (it's the arrow/square combination). When you now mouse over the black/white image, the red outline of the original image will show. Hold SHIFT, and click to include this image in your selection. You should now see BOTH images highlighted in blue, like this:

Alternatively, you could click EDIT>SELECT ALL, if the only images on the canvas are your jpg/gif and the newly created filled rectangle.

Then click MODIFY>MASK>GROUP AS MASK and the magic happens!

You should now have something resembling the effect shown above. You may, however, feel that a little bit of "tweaking" still needs to be done to the effect. If that is the case, then move on to:

Whilst the image is still selected, open the LAYERS panel and click the BITMAP icon that shows. You will now see the gradient fill control bar, as shown here:

By click/dragging the SQUARE handle you can stretch the gradient effect across the image until you are happy with the result. By click/dragging the ROUND handle, you can increase the amount of "full density" in the left-hand area of the image.

You're nearly done!!!

HINT: If you intend exporting and using this image "as is" on your web-page, the last thing to consider in this basic introduction to Masks, is the "Matte" colour. The colour picker icon for this can be found in the "Optimize" panel. Use this to set the Matte colour to match your web-page background colour. Your image will then fade smoothly into the page. Alternatively, you could try setting the original canvas colour to match your web-page colour. The above tutorial will work without any amendment by you for WHITE pages only, so you're gonna have to do some tweakin'!!!

You can, of course, import the png file straight into any existing png files (such as banners) without worry. It will blend perfectly with your png background.

Now, export your chosen file format.

It's as easy as that!

Experiment!