T and S Web Design

When designing a site in Fireworks, I have found that working with rounded corners can be a bit tricky if you don’t know some specifics. First off, there are two main ways to make rounded corners, the rectangle tool, and the rounded rectangle tool.

When using the rectangle tool, you can round the corners by using the ‘rectangle roundness’ slider on the properties panel. Yes, this creates pretty rounded corners, but a couple problems can arise when using this method.

First off, the rectangle roundness is relative to the size of the rectangle. If you have two rectangles of different sizes, both at 50 rectangle roundness, they will not appear the same.

Someone using this method to try and match corners will end up being off by a couple pixels, which can be crucial when it comes to coding.

So this is where the rounded rectangle tool comes in handy. When you create a rounded rectangle, you can just use the yellow handles to resize the entire rectangle and to adjust the roundness, even specific corners. Even better, resizing the rectangle via the yellow handle will not affect the roundness (unless you make it super tiny).

Sounds easy enough, right? Well yes, but there are unseen issues here. When designing a site, pixels matter. For this reason, I like to type in the width and height of my rounded rectangle in the properties panel. The problem with this is that if you type values for a rounded rectangle it stretches it. It does not matter which method you use, the rectangle will stretch, and your corners will stretch as well. Luckily, there is an excellent solution to this problem!

What you need to do is to convert your rectangle into a symbol. You can make as many states of a symbol as you want, and then all you need to do is change one symbol and they all will change accordingly. Let me walk you through it.

First off, make a rounded rectangle with the rounded rectangle tool. Doesn’t matter the size or color.

Next, select the rectangle, and hit F8. Name the symbol whatever you want, make the type a graphic, and check the box that says “Enable 9-slice scaling guides” and click OK. Congratulations, you have made a symbol.

Now you need to double click on your symbol to go inside of it and edit it. In the window that pops up, you can resize, recolor, change the roundness of your  rectangle, apply filters, whatever you want. Then what you need to do it set up the 9-slice scaling guides. These guides allow you to resize your rectangle (outside of the symbol editing window) without distorting the corners. Just align the guides so that the rounded edges are outside of the guides.

Now you can exit the symbol editing window and resize your rounded rectangle with the transform tool or by typing in the values in the properties panel. The only thing you need to watch out for is making the rectangle too small. If you shrink it so the corners meet, then they will distort like before.

The great thing about using symbols for rounded rectangles is that you can duplicate them and then edit one symbol’s corners and all instances of that symbol will change, no matter what size they are. This is especially useful if you change your mind later in the design process. Using symbols is really easy once you get used to them, and can streamline the web development process.