Masking: Rounded Corners in Fireworks

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 rounded corners using the rounded rectangle. When the rectangle is masked to the image we only see the image through the rectangle and outside of the rectangle we just see the canvas where the image used to be.

Open the image and select the Rounded rectangle tool. Click and hold on the Rectangle tool all the option. I used the image below:

Lab Puppy

Select the rounded rectangle rectangle tool on the tool bar:

Rounded Rectangle

Draw out the rounded rectangle by clicking and dragging. Try to get the rectangle approximately the right size and position. Use the Scale tool Scale Tool to put handles on the rectangle to fine tune it's size and position.

Position the rectangle centered on top of the picture. If you select the rectangle the Properties bar allows you to change how much the corners are rounded. Change the fill color to white.

Select both objects in the layers palette with the selection tool Selection Tool while holding down the shift key. You should see two blue lines, one around the image and one around the rounded rectangle:

Select Both Layers

Select Modify >> Mask >> Group as Mask. You should now see only the image in the shape of the rectangle. The white space around is the canvas.

Before Saving and Exporting press F12 for a preview of how the image will look within a browser. See my finished product below:

Lab Puppy in Rounded Photo

Fireworks 8 Tutorials