Learn about web site design and development, affilite programs, SEO, search engines, Google, and more.

How to Crop a Square Image To Have Rounded Edges Using Fireworks

Do you ever see images on a page that have nice rounded corners and wonder how it’s done? It’s very easy and you can do it. Here’s a short tutorial I wrote up on how to make a square image have cool rounded corners using Fireworks.

Start with a new canvas or make sure you have enough room to work on the canvas.

From the menu choose Insert Image, and navigate your computer to the location of the image that you want to create the effect of rounded corners. Select Open and click once to add the graphic to your canvas.

crop image tutorial 

Resize the image to whatever size you would like it to be.

Click on the Rectangle Tool from the toolbar on the left.

Look at the Options on the Pointer menu and change the corner to 13 or whatever you would like. The higher the number the more rounded the corners will be. To make the corners less round use a lower number.

Go ahead and draw a Rounded rectangle in the size that you want the new image to be cropped to.

Place the Rounded rectangle that you just drew on top of the image.

Select both items (the rectangle and your image) with your pointer.

Now Right Click and select Mask Group, Mask to Path.

mask an image tutorial

Voila! Now your image has been masked to have rounded corners.

Trim your canvas by selecting Modify, Trim Canvas.

image mask tutorial with fireworks

Export your newly created graphic into your web folder and use your html editor to add it to your web page.

You’re all done.

Here’s a bonus. You know you don’t have to use the Rectangle tool.  The same masking effect can be done using Web Dings Font and other fonts with symbols. Your image can take on any shape of a symbol font.  Just enlarge the font size to 300 or so and place the font symbol over the image you want to have the mask. Select both  items,  Right Click and select Mask Group, Mask to Path.


Content © 2008 Hoover Web Design http://www.hooverwebdesign.com

June 4th, 2008 at 7:47 am

Comments are closed.