How to Make Images with Rounded Corners in Fireworks CS5

There are a number of options available for creating an image with rounded corners for web pages. You can use cascading style sheets to apply the corners (works in browsers that support this feature) or apply the rounded corners directly to your image in an image editor.

In this tutorial, you’ll learn how to apply rounded corners to your image within Adobe Fireworks CS5.

Step 1. Open the image you want to customize in Fireworks.

Open image you want to give rounded corners.

Step 2. Select the “Rectangle” tool from the Tools panel. Fill and stroke options aren’t important here since we’re only using the rectangle’s shape.

Step 3. Left-click, hold and drag your mouse from the upper left corner of the canvas to the bottom right corner, so the rectangle completely covers the image.

Increase the Roundness value to make corners of image rounder.Step 4. Go to the Properties Inspector in the bottom pane. You can open this pane if it’s closed by selecting “Window” and “Properties” or pressing “Ctrl” and “F3.”

Click within the “Roundness” box and enter a value. To make the corners rounder, enter a larger value, such as 40. Notice how the square corners of the rectangle become rounder.

Step 5. Go to the Layers panel on the right. Make sure only the layer containing the rectangle is selected.

Select layer in Fireworks to cut it, then it paste as mask.

Step 6. Select “Edit” and “Cut” or press “Ctrl” and “X” to cut the rectangle from the canvas.

Step 7. Return to the Layers panel and double-check that the layer containing your image is selected, then select “Modify,” “Mask” and “Paste As Mask.”

Paste as Mask to apply rounded rectangle's shape to image.

Your image should look something like this:

Image with rounded corners in Fireworks.

Be Sociable, Share!
This entry was posted in Web Page Design and tagged , . Bookmark the permalink.

4 Responses to How to Make Images with Rounded Corners in Fireworks CS5

  1. Mike Swansey says:

    Thank you for the tutorial. I no longer have Photoshop and couldn’t remember how to do this in Fireworks.

  2. Great tutorial :) Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge