TECHNIQUE: Emboss Text Effect

One of my dear friends, Bert Monroy, has a wonderful podcast on Revision3 called Pixel Perfect. Some of you may remember that I've appeared as a guest on Bert's show in the past, where I've spoken about using Illustrator and symbols, 3D, animation, and the awesome Live Paint feature.

Recently, Bert did an episode on how to create a license plate in Photoshop. As always, the techniques that Bert teaches on his show are great. But I couldn't help myself in thinking that creating a license plate in Illustrator would not only be possible, it would end up looking better, and it would be scalable to boot.

The challenge though is quite apparent -- license plates feature text that is embossed into the metal -- and Illustrator, with all of the wonderful effects it offers, doesn't have an emboss effect. I know, kinda silly, right? Is that an oversight? Not exactly. An emboss effect a la Photoshop's Layer Style and now InDesign CS3's emboss effect, has been a pretty popular feature request over the years. There were some Illustrator plugins that created a simulated emboss effect that have come and gone over the years, but they were vector and never looked realistic enough.

In reality, Illustrator DOES have an emboss "effect" via the 3D effect. One could, in theory, apply a 3D Extrude, specify a Rounded bevel, and set the position of the rotation to Front. However, even with complex lighting settings, the emboss never looked good enough for me. Especially when you consider that depending on the typeface, you'll always get really odd self-intersecting errors, which don't help either.

So I spent a few minutes with Illustrator with this challenge, and came up with the following:



Not bad, eh? I think the emboss effect on the text looks realistic enough. In fact, if you zoom in close, you'll find that I've also applied a texture effect to the plate itself, in trying to simulate that metallic look. In the end, I was able to achieve the emboss effect using a single text object that is editable, meaning you can change the text to read whatever you like. I also created a Graphic Style of the effect, making it possible to apply that exact same appearance to anything else with a single click.



What was that? Oh, you want me to tell you how I did it? Ha -- you know me -- I wouldn't make mention of something here if I wasn't intent on sharing the knowledge. Well then, let's begin...

DISCLAIMER: I don't specify exact values for the techniques here, just the steps you need to take. The values will vary depending of size, font, and desired effect, so the point here is to encourage you to play and experiment.

1. The obvious point of this tutorial is the emboss effect, so I won't spend much time on the license plate itself. But it's pretty simple to create one anyway. A license plate is 12" wide by 6" tall. I used a CMYK document and set my Document Raster Effects Resolution to 150 (which would be enough for what we'll need in this technique). I rounded the corners (a license plate has a radius of .5"), drew out the holes for the screws and created a compound path so that the holes were punched out of the overall shape.

2. I filled the shape with a gradient and then applied a slight drop shadow for that realistic touch. To add the texture, I choose Effect > Effect Gallery and applied the Grain Texture effect. I then added the remainder of the graphics -- the background at the top and the New York State text. Finally, I added the text of the license plate itself. I hope you like my custom plate (no, it's not my real license plate -- I'm not the type to get "vanity" plates -- besides I'm sure they would look AWESOME on my "hey I'm a dad!" minivan). I should also point out that I chose Helvetica Rounded Bold Condensed for the typeface -- besides for the fact that license plates have a pretty "soft" emboss, I wanted to get that rounded look. You can experiment with different fonts on your own, but I would suggest that you avoid using a serif typeface.

3. As a reminder, the key here for me was to have everything included as a single appearance, which would allow us to keep the text editable and to apply it with a single click as a style to other objects, as needed. In the end, I accomplished the emboss effect using 3 fills, and built it in such a way that would work over any color background. So to begin, we need to wipe the type object clean. Select the type object with your Selection tool and set your fill and stroke to None.

4. In the Appearance panel, choose Add New Fill, and specify 50K for it. With the Fill still highlighted in the Appearance panel, use the Effect > Distort and Transform > Transform effect to offset the fill up and to the left. Then, duplicate that fill and change its Transform effect so that it is offset down and to the right. Your text should look something like this:



5. In the Appearance panel, select the fill that is offset to the bottom right and apply the Multiply blend mode. This will ensure that the color on this side of the text will always appear darker.Select the fill that is offset to the top left and apply the Screen blend mode. This will ensure that the color on this side of the text will always appear lighter.



6. In the Appearance panel, select one of the fills and choose Effect > Blur > Gaussian Blur. I chose 10 pixels but as I said earlier, you should experiment to see what works best. Don't worry -- as it's a live effect, you can always go back and tweak this to perfection later. Once you've applied the effect, select the other fill and apply the exact same Blur effect.




7. At this point, you can already see the embossed effect within the metal. Now all we need to do is add the inked letters themselves, which we'll do by adding yet another fill. In the Appearance panel, choose Add New Fill and make sure the fill is at the top of the object hierarchy. Apply a solid color. In my case, I chose a blue color.



8. There are two problems with the new blue fill we just added. First of all, the sharp edges "kill" the nice soft embossed look, making it look like the letters are sitting above the emboss instead of being part of it. Second, the text has no highlights or shading, making it look rather fake. We can solve both of these problems with one setting. In the Appearance panel, select the top-most blue fill and set its blend mode to Multiply. This will allow the inside of the blurred offset fills to act as shading for the blue fill.



At the end of the day, your Appearance panel should look like this:



Naturally, you can now simply drag the text object into the Graphic Styles panel to define a style. That way, you can apply this emboss effect to other text objects. As an added bonus, you can download my emboss graphic style right here. I'm sure you can tweak it to perfection for your own needs.

As long as you stay within Illustrator, or place native AI files or PDF files in InDesign, the license plate is infinitely scalable. Just make sure you have the Scale Strokes & Effects setting checked. I hope you have as much fun with this technique as I did putting it together -- and I want to give a special thanks to Bert Monroy who provided the inspiration for this technique. And now that I have the license plate, I'll have to find a Lamborghini to go with it... :)

TECHNIQUE: Stitching Lines for Apparel

One of the things that I really love about Illustrator is that it's used across such a diverse professional spectrum. One of the really exciting creative fields that has always drawn my attention is that of fashion and apparel design. Before I even joined Adobe, I spent several years training fashion designers in NYC. And since then, I've had the pleasure of working with folks at places like Cabelas, Reebok, Victoria's Secret, Hurley International, the GAP, and more. It's one thing to design a cool brochure and flip through the pages when it's printed. It's an entirely different experience when you design something and then when it's done, you actually put it on and wear it :)

I should probably write up more stuff on apparel design only because Illustrator has so much to offer in that field. So for now, we'll start with this one. A good friend of mine recently got a job at Nike in Europe and was lamenting how difficult it was to draw certain kinds of stitching lines. We all know that Illustrator's Stroke attribute can be used to simulate a stitching line by using the dash setting. I'm sure you're all familiar with it, but just in case, you can turn on the Dash setting for any stroke and then assign a Dash setting (the length of each dash segment) and a Gap setting (the length of the space that appears between each dash). There are actually 3 sets of dashes and gaps (meaning you can specify a long dash followed by a short dash, etc.) and you can also use Illustrator's various Cap and Join settings to further customize the appearance of your strokes. If you have the Real World Illustrator CS3 book, there's good information on all of these Stroke settings on pages 48-51.

The question that my friend at Nike was struggling with was creating double-stitching. Obviously, you want to be able to create stitching lines that are easy to create and easy to edit and manipulate. Knowing how often apparel designs change, and how newer designs evolve from existing designs, it becomes increasingly important to work with objects that can easily be edited. If one had to draw two paths to simulate a double-stitched line, that would make it twice as more difficult to make edits.

Anyone who knows me, can probably guess that my answer will involve the Appearance panel, right? Well, most people are probably smart enough to know that you can create a single path and add two stroke attributes to that path. If you were to create a heavy black stroke with a dash setting and then add a thinner white stroke with no dash setting on top of it, you'd get a perfect double-stitched line, correct?



One problem. If the apparel you're designing isn't colored white, you'll have a white area in between your two stitch lines.



You COULD set the entire path to the Multiply blend mode, which will make the white go away, but if your stitch lines aren't colored black (for example, you're using green or red thread), that color will also multiply. If your thread is white, the whole stitch will disappear altogether. What you REALLY want is a way to make the middle area between the two stitch lines become truly transparent. And the good news is, the steps are pretty much the same, and at the end of the day, you can define a Graphic Style so that you can apply double-stitched lines with a single click. In reality, if you are an apparel designer, you should have an entire Graphic Style library of stitching lines alone.

KNOCKOUT GROUP TO THE RESCUE

The secret to making this work is a teeny little checkbox in the Transparency panel called Knockout Group. It's a setting that most people ignore. Few people even know what it does. Let's first learn what it does, and then we'll see how it will allow us to create quick and perfect double-stitched lines (or really anything else for that matter).

We already know that you can adjust the opacity of an object, right? So if you have two objects, say a blue circle and a red bar running across it, you can set the opacity of the red bar to 50%. The result would be 50% of red on the parts of the bar that extend beyond the circle. But the part of the bar that appears directly over the blue circle would appear as purple – or more specifically, a mix of blue and 50% red, correct? After all, that’s what transparency does – it allows you to see “through” the top object and see the object beneath it.

If I were to the now group the two objects together, I’d be able to move them around the screen, and as expected, I’d see purple in the middle area, and whatever was beneath the logo would appear through the ends of the red bar. If you look at the Transparency panel (fully expanded), you’ll see that the Knockout Group option appears with a line through it. This indicates a “neutral” position, which allows transparent objects within a group to be visible through each other. That’s how we can see the purple area where both the red bar and the blue circle overlap. As expected. This is the default behavior.

Below, the Knockout Group setting in the Neutral setting, the On setting, and the Off setting.



But let’s say I wanted the red bar to be 50% transparent so that it would interact with objects beneath it, but NOT with objects that were in its own group. That would mean I’d want to see 50% red in the area where the red and blue overlapped, not purple. By selecting the group and checking Knockout Group, I’m instructing Illustrator to knockout (or remove) the parts of the group that appear beneath transparent effects.

In the illustration below, the group on the left is set to the default neutral knockout group setting, while the group on the right is set to knockout group turned on.



To really illustrate what’s happening here, I could use the same color for the objects in my group, and use the opacity settings alone to knockout the overlapping areas. Using the same example, I’ll color both the circle and bar black. And I’ll set the opacity of the bar to 0%. So my group, using the default “neutral” setting would appear as a solid black circle. As expected. But upon turning on the Knockout Group setting, the top object (which is colored black but is set to 0% opacity) will knockout the part of the circle that it overlaps. Since the bar has no opacity, the result is simply a knockout.

In the illustration below, the group on the left is set to the default neutral knockout group setting, while the group on the right is set to knockout group turned on.



USING KNOCKOUT GROUP – WITHOUT A GROUP

Now that we understand what Knockout Group does, we can use it to create our double-stitched lines. The beauty of this technique is that it uses the knockout group setting, but without creating a group. By applying multiple strokes within a single object, we’ll “simulate” a group within our one object.

1. Draw a path with a Fill set to none and a Stroke set to black. Set its weight to 6pt and apply a simple dash setting. I used a dash of 6 and a gap of 4.



2. From the Appearance panel flyout menu, choose Add New Stroke.

3. Keep the stroke black and change its weight to 4pt. Turn off the Dash setting for this stroke and choose the Projecting Cap option in the Stroke panel. This will ensure that the ends of the stroke appear without artifacts of the dash beneath it.



4. Change the opacity of the top-most stroke to 0%.

It’s important to remember that we can’t apply the knockout group to one attribute (as it won’t do anything), so we need to make sure that we apply it to the entire object. So the following step is important:

5. Click on the word “Path” in the Appearance panel. This ensures that you’ve targeted the entire path object and not just one of its stroke attributes.

6. Turn on Knockout Group in the Transparency panel. You’ll actually need to click on this option TWICE: the first time sets the object to the neutral setting, and the second time will turn the knockout setting on.

The result will be a stroke that appears to have a double stitch. The top-most stroke knocks out the bottom one, giving you true transparency in between.



At this point, I think you have all that you need. Now you can tweak the weights of the strokes, the dash settings, and the colors of the strokes as needed. Once you’ve finalized the look of your stitching, drag it to the Graphic Styles panel to save it as a style. Now you simply apply the style to any path and you get instant stitching! Create a variety of different stitching patterns and create styles for them all. Save them as a Graphic Styles library and you’ll suddenly become the most popular person in your design group.

NOTE: If you think I'm so smart that I know all this stuff on my own, think again. I was first "introduced" to the knockout group setting by Pierre Louveaux, and Teri Pettit expanded further upon that. Both Andrew Dashwood (the one who originally asked the question about the double-stitching) and Jean Claude "JC" Tremblay contributed to this article as well.

ASK MORDY: Adding Keylines to Placed Images

This question comes in from Sara Ford:

I am having a problem with Illustrator that seems pretty basic, but I just can’t figure it out. I placed a picture into my document, and I just want to add a stroke around it. But when I do, the line doesn’t show up? What am I doing wrong?

In reality, I get this question a lot. The problem is that unlike InDesign, which has a concept of frames (and the frames have Fill and Stroke attributes), Illustrator is frameless (others may use the term spineless, but we won't go there now). The "problem" that exists is that a placed image in Illustrator isn't an object that can have Fills or Strokes. It's not a vector shape and therefore lacks those attributes.

Most people take the "easy" route and simply use the Rectangle tool to draw a shape around the image. But even that is too much work. Let's explore some ways to "solve" the "problem" at hand...

First, it's important to understand that a placed image is not a vector object, and hence, can't have a fill or stroke attribute. So we'll need to create another vector object to contain our stroke attribute. But I don't want to create that object on my own. I want Illustrator to create it for me. There are basically two ways to accomplish this: have Illustrator automatically create a mask for the image; or use an effect to convert the bounds of the object into a vector object. Both have pros and cons and work better depending on the task at hand. Ready to discuss? Let's go!

USING A MASK

This technique requires the use of Illustrator CS3 and will work only when your keyline will be rectangular in shape.

1. Choose File > Place and choose an image to place into your Illustrator document. You can either Link or Embed the image. Once you've chosen the image, click the Place button.

2. The image is selected (or if your image already exists in your document, select it), so if you look in your Control panel at the top of the screen, you'll see a button labeled "MASK". Click on it. This creates a mask at the exact bounds of the image.

3. Press the "D" key for Default. This will give the mask a black 1 pt stroke attribute. Feel free to adjust the stroke per your design needs (who uses a 1 pt stroke anyway?).

NOTE: An additional benefit to this method of using a mask is that you now have the elements in place to simulate a "frame and image" paradigm like InDesign. Once you've created your mask, you can decide to "crop" your image by double clicking anywhere on the photo. This will put you into Isolation Mode. Now click on the frame edge and resize at will. When you're done, double click outside the image to exit isolation mode and continue working. This method works wonderfully when you're using the Selection tool (black arrow) and have the Bounding Box option turned on (in the View menu).

USING AN EFFECT

At first, it may seem that applying a keyline with the use of an Effect is a tedious process. But we all know that once we've applied an effect, we can store it as a Graphic Style, at which point applying our keyline will become a single click. Go ahead, ask me why Adobe doesn't ship Illustrator with such an effect as a default setting in the NDPs (New Document Profiles). Go ahead, ask me why Adobe doesn't allow us to assign keyboard shortcuts to styles like InDesign does. I don't have answers to either of those questions (sorry). But let's get on with the styles, shall we? There are two separate effects that we can use, and each provides a different benefit.

1. Choose File > Place and choose an image to place into your Illustrator document. You can either Link or Embed the image. Once you've chosen the image, click the Place button.

2. The image is selected (or if your image already exists in your document, select it). Open your Appearance panel and from the Appearance panel flyout menu, choose Add New Stroke. We can't see the stroke yet, because all we have is an image. But we'll change that in short order.

3. With the Stroke highlighted in the Appearance panel, choose Effect > Convert to Shape > Rectangle. Check the Preview button, Select the Relative option, and set both the Extra Width and Extra Height to zero (0). (Careful not to press Tab after you enter the second value or it will switch back to Absolute.) Click OK to apply the effect. If you'd like, style the stroke attribute to match your design preference (again, who uses a 1 pt stroke?).

4. To make this easier to apply in the future, with the object still selected, open the Graphic Styles panel and click the New Graphic Style button at the bottom of the panel. Give the style an appropriate name. It would be a good idea to add this style to your NDPs so that it will be readily available in all new files that you create.

This technique obviously only works if your keyline is rectangular in shape. But what if your image had transparent areas in it? What if you silhouetted the photo in Photoshop (keeping the background transparent), and placed the PSD into Illustrator? Is there a way to apply a stroke to the boundary of the ART instead of to the boundary of the entire image? The technique I'm about to show you will do just that, and will also do the job for rectangles as well.

1. Choose File > Place and choose an image to place into your Illustrator document. You can either Link or Embed the image. Once you've chosen the image, click the Place button.

2. The image is selected (or if your image already exists in your document, select it). Open your Appearance panel and from the Appearance panel flyout menu, choose Add New Stroke. We can't see the stroke yet, because all we have is an image. But we'll change that in short order.

3. With the Stroke highlighted in the Appearance panel, choose Effect > Path > Outline Object. If you'd like, style the stroke attribute to match your design preference (again, who uses a 1 pt stroke?).

4. To make this easier to apply in the future, with the object still selected, open the Graphic Styles panel and click the New Graphic Style button at the bottom of the panel. Give the style an appropriate name. It would be a good idea to add this style to your NDPs so that it will be readily available in all new files that you create.

It just so happens that if you're applying this last effect to an image with no transparency, only the outside portion of the stroke will become visible. Meaning that if you're stroke weight was set to 1 pt, only .5 pt of the stroke will be visible. To get the full 1 pt stroke, select the Stroke attribute in the Appearance panel and choose Effect > Path > Offset path and choose an offset amount that's half the weight of the stroke. In our example, you would use a .5 pt offset value.

For even more fun, you can combine BOTH of these effects (simply by adding two strokes to your image), hence giving your transparent images a stroke around the bounds of the artwork as well as a keyline around the bounds of the entire image.

TECHNIQUE: Pick a Corner... Any Corner.

In a recent post, I answered a reader's question about rounding some of the corners of a rectangle. Although the rectangle in the original question wasn't really a rectangle at all -- it was a dynamic button that was created from live text.

At the end of the post, I asked other readers to share their own ideas about to go about rounding off specific corners of an object. There were some interesting answers, including a link to a script, which was nice. Good work all around -- it's always good to get the creative juices flowing, and in the future, I hope to challenge more of you with other "projects" to participate in.

One of the things we learn about with Illustrator (more so than just about any other program), is that there are always a variety of ways to get any design task done. Some are more efficient than others. Some are easier to implement. Each offer pros and cons and each offer benefits for certain design tasks. With that in mind, I offer my solution for creating rectangles with a rounded corner (or three) of your choice...

As an example, here's a rectangle that has rounded corners on two opposite sides:



The way I did this was by creating a normal rectangle and using the normal Round Corners effect (under the Effect > Stylize menu). I then added an additional fill, which didn't have rounded corners. With the second fill targeted, I applied a Transform effect that applied a 50% scale to the fill and I instructed the Transform to be applied from a specific origin point -- a corner of my choice. This action effectively "covered up" the rounded corner with a square corner. Had I expanded the shapes, the result would look like this:



The key here is in the Transform effect. Let's see how I did this, step-by-step:

1. Draw a rectangle. Apply a fill and remove the stroke.

2. Choose Effect > Stylize > Round Corners and apply the effect.

3. Via the Appearance panel fly-out menu, add a new fill.

4. With the new fill targeted, choose Effect > Distort & Transform > Transform. In the Scale section, set both the Horizontal and Vertical values to 50%. Now for the most important part -- using the 9-point proxy, select one of the 4 corners to apply the scale from. The corner you choose will NOT have a rounded corner. Click OK to apply the effect.



5. Duplicate the fill and double-click the Transform effect in that fill. Change the origin point in that fill to specify another corner that should have a square corner. Repeat to add a third fill if you'd like. Your Appearance panel should look something like this:



Naturally, you could save this as a Graphic Style so that you could apply this with a single click. You might even create an entire library of styles that stored different corners of an object as being rounded, for any design task. Of course, these are all graphic styles with multiple fills and effects. And sometimes you need just a single plain flat object with a rounded corner. You could of course draw your rectangle, quickly apply a style, expand the appearance, and then use Pathfinder to create a single final shape. I know -- that's a lot of clicks. So having an action that would do all this for you with a simple keyboard shortcut would probably be better.

In fact, being that the holidays are upon us, I've decided to give all of my dedicated readers a gift. Two actually.

The first is a Graphic Style library that you can download. This library contains a plethora of styles with different round corner effects. All you need to do is load the style library and you're good to go. One click will give you the rounded corner(s) of your choice. Feel free to adjust the parameters as you see fit. I used a rather large round corner setting, mainly so the preview in the Graphic Styles panel clearly shows each effect.



The second is an Action that expands and combines the effect, leaving you with a flattened object. Once you load the Action, you can use the keyboard shortcut which I've assigned (Command-Shift-F12) or you can apply your own.

- Rounded Corner Graphic Style Library
- Expand and Combine Action

BTW, you can also copy and paste any of these shapes into InDesign if you'd like.

Hanukkah begins this week, and here in NY, we got a taste of winter with a bit of snow today. No matter what holiday you observe, I wish you and your loved ones only the most joyous and happiest of times. Maybe you'll be lucky enough to take a few moments to actually walk AWAY from the computer and enjoy all that life offers. I hope to do just that.

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).

Leopard-Style buttons with Veerle

If you aren't already familiar with Veerle's Blog, you should check it out. Veerle lives in Belgium and has a fantastic blog that covers Illustrator among other applications. Veerle, a strong supporter of CSS, is also a talented designer (far more talented than yours truly I should add).

Recently, Veerle posted a step-by-step tutorial on how to create those cool-looking buttons that Apple is now using in Leopard and on their website. To take Veerle's excellent concept one step further, I've recorded a podcast which shows how to create those same buttons using Illustrator's Graphic Styles and the Convert to Shape effect.

You'll find my podcast over at Terry White's most excellent Adobe Creative Suite Podcast site. Enjoy!