Your Customers are Mobile, you will be too …

In this tutorial we will show you how to round off the corners of an image or bitmap in Fireworks CS5.5 by using vector shape masks. You can apply any shape you wish to a vector shape but the most common application is for rounding corners off. I am using Fireworks CS5.5 for this tutorial but you can use any version of Fireworks without modifying the techniques involved to achieve the same result.

Fireworks CS5.5: Round Corners on Images and adding Vector Masks

First of all we need an image to work with, so open the image you would like to work with in Fireworks and lets get started. The process is pretty simple and not as hard as you may think. Once you have you image open draw the shape which you want the image to be when your finished. I have drawn a rectangle the same size as the picture with 20px rounded corners on it in my example.

image and vector shape ready in Fireworks CS5.5 to round the corners off an image

If we were to use this shape where it is and apply it as a mask our image would disappear. We need the vector shape sitting on top of the image for it to work. So move our vector over the top of our bitmap.

Our vector shape need to be over our image before we cut it to paste as a mask

Now we need to select the vector shape we have just drawn and hit Ctr-X to cut the shape out. Right click on the image and select >>Edit >> Paste as Maskor hit Ctr-Alt-V.

Select paste as mask

And we have now rounded off the corners of our image or bitmap.

With our vector mask applied we now have an image with rounded corners

You can use this technique with any vector shape you like. Triangle circles even custom shapes. Any shape you like.

Hope you found this helpful and see you again soon.

7 Responses to Fireworks CS5.5: Round Corners on Images and adding Vector Masks

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: