This set of tutorials deals with one of Photoshop’s counterparts Adobe Fireworks (formerly Macromedia Fireworks). If you use this program, visit the section.  Home Raster Graphics Fireworks Creating Image Fading Effects with Fireworks - Image Masking


Creating Image Fading Effects with Fireworks - Image Masking


This is a simple article which can help you add some fading effects, which we call it as Masking. Normally when you design web pages you may want to add images with such effects. When you want to add an image in a web page, it would be nice, if it can very well fix with the background color of that page. This will give a professional look to the pages. Just read and practice this, you will get a nice image effect, called image masking.

1. Open an image of any size, in my case its, 190 X 142 JPEG image. My web page background is white. Go to Modify > Canvas >Canvas color...; Change it into white.

This is my image with no effects.

Creating Image Fading Effects with Fireworks - Image Masking image 1

2. Draw a rectangle with the rectangle tool on that image and cover the image with the rectangle. I am using white as my rectangle color.

Creating Image Fading Effects with Fireworks - Image Masking image 2

I have created a rectangle and moving it to fix on the image.

Creating Image Fading Effects with Fireworks - Image Masking image 3

Like this:

Creating Image Fading Effects with Fireworks - Image Masking image 4

3. Select the rectangle and from the properties window > select the Fill Category as Linear. You can do this from the drop down menu.

Creating Image Fading Effects with Fireworks - Image Masking image 5

Click on Creating Image Fading Effects with Fireworks - Image Masking image 6 and you make the preset type as while,black. This is necessary since I want to give the fading effect in the right side of the image.

4. Now I want the fading effect gradual so I pull the line which is on the rectangle like in the following image.

Creating Image Fading Effects with Fireworks - Image Masking image 7

5. Now press ctrl + A, select all and navigate from the Fireworks top menu to, Modify > Mask> Group as mask.

Creating Image Fading Effects with Fireworks - Image Masking image 8

6. Now you get this effect,

Creating Image Fading Effects with Fireworks - Image Masking image 9

7. More effects can be given by adjusting the fading level, in the properties window.

Creating Image Fading Effects with Fireworks - Image Masking image 10

In Dreamweaver I have used this image and added it in a table. Here is is this to give you an idea.

Creating Image Fading Effects with Fireworks - Image Masking Tutorial: Final Result

If you play around a little more time on this topic you will be able to create amazing masking effects with Fireworks MX.



Author's URL: Benny
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

More Raster Graphics: Most Popular Materials | Fresh Materials

Add comments to "Creating Image Fading Effects with Fireworks - Image Masking"

Only registered users can write comment

No comments yet...