| Masking: Fading out one side |
|
|
| Masking is basically seeing one object through another. Sort of
like a window. Effects can then be added to the mask or "window"
which then change how the underlying image appears. In this example
we will create a fade on the left side of this photo. The window
or mask will be a rectangle the same size os the photo with a gradient
from black to white. When the rectangle is masked the white becomes
transparent and the white become opaque. The gray area is where
the fade will occur. |
Click to enlarge |
|
- Open the sample file or any image you would like to mask.
Note the length and width. This image is 600 x 400.
|
Click to enlarge |
|
- Use the Rectangle Vector tool to drag out a rectangle don't
worry about it's size, color or position yet.
|
Click to enlarge |
|
- Select the rectangle and use the Properties bar to change
its width and height to match the photo. Set the x, y coordinates
to (0, 0). The Rectangle should now be exactly the same size
and in the same position as photo.
|
Click to enlarge |
|
- Now add a gradient fill by first select the rectangle and
use the fill drop down menu in the Properties bar to change
from solid to linear.
|
Click to enlarge |
|
- Fireworks will pick up two colors and create a gradient. Don't
worry if the colors aren't black and white, we will change them
next.
|
Click to enlarge |
|
- In the Properties bar selection the fill color button will
get you this panel instead of the usual color palette. The two
little hatted squares represent the two colors being used in
the gradient. To change one of the colors just click right on
the square and the normal color palette will pop up. For a gradient
mask you need to use black and white.
|
Click to enlarge |
|
- These little squares can also be moved around to change the
look of the gradient.
|
Click to enlarge |
|
- If you want to and another sampled color just click next to
an existing one. To remove a sample completely drag it up and
off or down and off.
|
Click to enlarge |
|
- When you look back at the rectangle it now will have an extra
handle with a circle on one end and a square on the other. The
circle is where the gradient starts. You can drag it around.
The square controls the width and direction of the gradient
it also can be dragged around. Remember White is fully transparent
meaning we will see through it like a clear window. Black is
opaque and when masked will become completely not see through.
The gray area will be where the fading will occur.
|
Click to enlarge |
|
- Select both the rectangle and photo by using the Black pointer
to drag a rectangle around the two objects.
|
Click to enlarge |
|
- You can tell they are both selected by looking at the layer
panel and seeing both objects highlighted blue.
|
Click to enlarge |
|
- With both objects selected go to Modify
>> Mask >> Group as Mask
|
Click to enlarge |
|
- The image is now masked. The checkered pattern on the left
is the canvas color showing through. It is set to transparent.
|
Click to enlarge |
|
- The canvas color should match the color of the background
on the web page it will end up on. To change the canvas color
go to Modify >> Canvas >> Canvas
Color.
|
Click to enlarge |
|
- Select Custom and then use the Color Palette to select a color.
|
Click to enlarge |
|
- The image should now look like this.
|
Click to enlarge |
|
- Preview it in a browser by pressing F12 to see how it will
actually appear. and you are now ready to Export it. Don't forget
to save a .png version of the image incase you ever need to
edit it.
|
Click to enlarge |
|
Search 
Site
Map 
