web academy title search icon Search mp iconSite Map  
Course Resources | Video Tutorials | Tutorials | Presentations | Handouts | Calendar | Evaluations | Contacts | UEN
Dreamweaver     |     Fireworks     |     Flash     |     my.uen     |    Virtual Tours
Fireworks
Photo Editing
Masks
Vector Objects
Text
Text on a Path
Shapes
Drawing
Borders
Web Tools
Samples
Tutorial Home
Masking: Rounded Corners  

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 on the top two corners of this photo. The window or mask will be a rectangle with rounded corners that is higher than the photo and then positioned so that only the top two corners are on the canvas. 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. thumb
Click to enlarge

  1. Open the image and select the Rounded rectangle tool. Click and hold on the Rectangle tool all the option.
thumb
Click to enlarge

  1. Draw a rectangle by clicking and dragging. Try to get the rectangle approximately the right size and position.
thumb
Click to enlarge

  1. Use the Transform tool the put handles on the rectangle to fine tune it's size and position.
thumb
Click to enlarge

  1. Make sure the top two corners of the rectangle are the only corners showing on the canvas. If you select the rectangle the Properties bar allows you to change how much the corners are rounded.
thumb
Click to enlarge

  1. Change the fill color to white.
thumb
Click to enlarge

  1. Select Objects and then 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. Like usual the canvas color should match the color of the background on the web page where this image will be. Select Modify >> Canvas >> Canvas Color to change it.
thumb
Click to enlarge

  1. Before Saving and Exporting press F12 for a preview of how the image will look within a browser.
thumb
Click to enlarge