Your Customers are Mobile, you will be too …

In this tutorial we will show you how to add three round corners to a rectangle in Fireworks CS5.5. This quick Tutorial is in response to an email I received as this was not covered in my previous tutorial. If you only want to add one or two rounded corners please check out that tutorial here. That tutorial will give you the basic’s this tutorial will just be covering three corners as the process is a little more complex but still quite easy once you get into it.

We all know the standard Fireworks tools do not handle this very well, its every corner rounded or none at all. There techniques although I am using Fireworks CS5.5 will work with Fireworks CS5 and also CS4. I am not sure about previous versions.

Fireworks CS5.5: Adding Three Round Corners to a Rectangle.

The process involved in rounding off three corners of a rectangle in Fireworks CS5.5 is actually quite simple although not obvious at first glance. It involves creating two rectangles with 2 rounded corners each like we did the previous tutorial and combining them.

In the example I will do I will be leaving the top right corner square and rounding off the other three corners. I will round them off 30 pixels to make it easier to see what I am doing.

First we need to create a rectangle with 2 rounded corners at the bottom. So we will make our 2 rectangles over each other as before select them both and select Modify >> Combine Paths >> Crop … so we are left with something like this.Now we need to create a rectangle with its corners the same size as our previous rectangle but with both the corners on the right side are rounded this time. Its length and height must be exactly the same as our first rectangle.

To create a rectangle with 3 rounded corners both rectangle must be exactly the same size and neither rectangle must have a rounded corner where you want your corner to be squared off.

Once you have these two rectangles the same size sit them exactly on top of each other and then select both of them. You will need to select both layers in the layers palette while holding the Ctr button. Once they are both on top of each and you them both selected select Modify >> Combine Paths >> Crop … and you will be left with a rectangle that has three rounded corners.

Remember to try and create your rectangle as close to the size you want as you can but if you must change its size later ALWAYS use the 9 slice tool and not the transform to avoid warping the corners out of shape.

Hope you found this helpful and see you again next time.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: