ASK MORDY: Rounding SOME Corners

nanimoshiranai offered this comment on a recent post:

I created now a style with rounded rectangular shape, another one with (only) rectangular form.
Question that arises afterwards: can I create in the same manner a style that has on the left hand corners rounded, but on the right hand side normal rectangular corners? (And vice versa, in order to quickly build a menu bar as on the apple.com website...)

Nanimoshiranai is referring to this post where I linked to a video podcast tutorial I did for Terry White's Creative Suite Podcast. The podcast offered a technique to create dynamically resizable buttons to match the look and feel of Apple's "Leopard" look. The whole original idea came from a tutorial that Veerle posted on her blog.

The result of the tutorial ended up looking something like this:



With the added benefit that the whole thing was a Graphic Style and that NO OBJECTS WERE DRAWN. The button was actually just some text typed on the screen. As you typed the text, the shape of the entire button simply resized itself to match the text.

But the question is actually a really good one. I imagine that what you're looking to do is something along the lines of this:



And yes, what you see in the screenshot above is actually created in the very same way -- although they are now three separate styles. One style has rounded corners just on the left side of an object, one has no rounded corner effect at all, and one has rounded corners only on the right side.

In fact, I can't even begin to tell you how often I hear requests from folks who want to round only SOME of the corners of an object in Illustrator (I can hear those FreeHand users giggling because FreeHand can do that). This requests comes from many web designers who are looking to create tabs or buttons that are rounded at the top of an object but that are squared off at the bottom.

So how did I do it? Simple. Let me show you with a regular rectangle -- then you can figure out how to simulate the effect for the Leopard buttons... I simply used TWO fills -- one fill that had a rounded corner effect applied, and one without. Then I used the Transform effect to offset the fills slightly so that rounded corners were only visible on one side (or just on the top or bottom). Like this:



Here are the steps to do this yourself:

1. Draw a rectangle. Fill it with your favorite color.

2. Use the Appearance panel to add a new fill.

3. With the new fill targeted, choose Effect > Stylize > Round Corners. Do your thing and give yourself some nice rounded corners (if you're working with text as in the leopard button example, you'll use the Effect > Convert to Shape > Rounded Rectangle option instead of course).

4. With that fill still targeted, choose Effect > Distort & Transform > Transform. Under the Move section, adjust your fill slightly so that it's offset from the original fill (you'd use horizontal movements to add rounded corners to the left or right, and you'd make vertical ones to add rounded corners to the top or bottom).

If you wanted everything to be centered, you'd apply a Transform effect to another fill (without rounded corners) with the exact opposite settings.

You like? Yeah, I kinda thought you would...

OK, so all you FreeHanders are still snickering because FreeHand can round just ONE corner, or opposite corners. Well, I have news for you -- I can use the same technique I just employed to do just that -- round ANY specific corner, some, or all. And of course, once it's a style, it's one click to apply it.

Pop quiz, Hotshot. The question you have to ask yourself is, can you figure it out on your own before I post the answer sometime over the weekend? Oooooh, a challenge! What do you do? WHAT DO YOU DO?

(sorry for the dialog stolen from the movie Speed).