Using Vector Shape

You can create unique frames for any bitmap content in your web sites by using a Masking Group.  In order to employ a Masking Group you must have a photograph or bitmap that you want to mask and a vector object to mask it with.  Select Modify/Mask Group to select your options.

Let’s try adding a Mask to a photograph.  We’ll open the "fish.jpg" image located in the "unit010" folder. 

Check your status bar to make sure that you’re in Object Mode.  The photograph is a bitmap image and opening it in Fireworks will automatically put you in Image Editing Mode.  Switch out of it if you are and use the Ellipse tool to place a black oval on top of the photograph.  Our oval is black because we want our mask to be completely opaque.  Fireworks uses an Alpha Channel for transparency when creating a mask.  A black object will create a mask that is completely opaque whereas a white object will create one that is completely transparent.  Shades of gray will give you varying levels of opacity.  Experiment with the color of your mask objects to adjust their level of transparency.

To apply the mask we have to make sure that both our object and photograph are selected.  Navigate your way to the Masking Group Options on your Menu Bar and select "Mask to Image."  The photograph should now be sitting inside the oval.

If you {Click} and drag on the white icon with the blue arrows that sits at the center of the oval you can move the photograph inside of the mask without moving the mask itself.  If you {Click} and drag anywhere else within the mask you can move the whole Masking Group.

You can modify the appearance of your mask in the same way that you modify a regular fill.  Select your Fill Panel and adjust the settings to see how they work.  Let’s try adding a feathered edge to the photograph by selecting "Feather" from the Edge of Fill drop down menu.  Use the slider beside the drop down menu to increase the amount of your feather to 30.  You should end up with a result that looks like this.

If you choose to use the "Mask to Path" instead of "Mask to Image" option you will find that any changes you make to the fill will be applied to the original shape and not the photograph you masked.  If you place your mask object underneath the photograph and choose "Mask to Image" a monochromatic effect is applied to your image.  The tint used for the monochrome is based on the color of your Mask Object.   If you want a red monochrome effect use a red mask object.

You can combine any number of different shapes and fill settings for your Masking Groups.   Use a gradient fill instead of a solid fill and see what kind of effect it has on the transparency of your image or create some of your own paths using the pen tool and use them to mask a photograph.

Use different shapes and photographs in combination to create images that fit in perfectly with the overall design of your website.  With a bit of forethought and a little experimentation you can create some truly unique imagery.