15 years of excellence
Get a QuoteReady to get started on your project?

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

2. Draw a rectangle with the rectangle tool( img: a)on that image and cover the image with the rectangle. I am using white as my rectangle color,(img:b).

Creating image fading effects with Fireworks

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

Creating image fading effects with Fireworks

Like this,

Creating image fading effects with Fireworks

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

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.(see the final image img:c)


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

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

6. Now you get this effect,

Creating image fading effects with Fireworks

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

Creating image fading effects with Fireworks

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

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

articles



Please fill in the fields below and click the "Send" button.
We will e-mail a link of this article.

Your Name
From Email Address
To Email Address
Subject
Please note: We will not spam or share your Email Address

Write to me at [email protected] if you have some better ones. I can add them here with credits.

Quick Enquiry

Related Readings

Case Studies

Website details: A blog site with social networking features and user..

Challenge: This is a social community website, with..

More Case studies..

Recent Blog

What our clients Think

CLIENTS

  • todd
  • RIDGE WEB DESIGN
  • DUNKIN BRANDS
  • Store Point
  • HARVEST
  • Open Solutions

Expertise

  • WordPress
  • Joomla
  • Prestashop
  • CodeIgniter
  • Laravel
  • Responsive Web Design
  • Mobile Apps
  • HTML5