Here’s a quick tip for those of you out there using FireWorks to do your designs.

All over the web you can find beautifully drawn round rectangles, some are elaborate while others are fine with a one pixel width. In my designing I wanted some of these beautiful design elements integrated into my sites, but I was baffled as to how to make those corners look right. Every round corner I drew had jagged and pixelated corners. I was completely clueless as to what was going on.

Basic - Hard line

I was concerned I might have to tackle one of the hardcore design programs like Illustrator just to get a nice looking rectangle with smooth round corners. Then I figured out that you have to switch the Stoke Options. Now that I know this, it’s really quite obvious. 20/20 hindsight is always grand.

Basic - Soft Line

Changing the stroke option to Soft Line under the Basic category is a major improvement, but I ended up choosing the Pencil 1-Pixel Soft option for my one pixel rounded rectangles, as I think it is a little smoother.

Pencil 1 Pixel Soft

UPDATE: Synjari offered a great tip in the comments section! Using the parameters she suggested for the Photoshop LiveEffects in Fireworks CS3 I was able to create an even nicer looking rounded rectangle:

Photoshop Live Effects in Fireworks CS3