Glossy badges in Illustrator

The star tool and opacity masks make it easy to make eye-catching glossy badges for websites and user interface designs. Here's an example of how to do it, including a downloadable Illustrator file to work with.

Here’s what we are going to get to:

Final Glossy Badge
Final Glossy Badge

If you would like to work through this you can get a copy of the illustrator file here.

Working with light and dark

Getting a good effect in Illustrator is all about understanding light and where the shadows and highlights fall. If we determine the light source to be to the upper right of the badge we can keep things consistent and create a good effect.

Create the shape

First create the shape using the Star tool. The star tool is tucked away with the Rectangle tool option. Click and hold on the Rectangle tool to see it. Click once on the canvas and you will be able to define what size you want to use. If you want to follow along I have given my star a one 1pt stroke of 8E9407 and a radial gradient.

Star Tool Options
Star Tool Options

Now lets start to build out the shape. Select the star you have just drawn and copy a new version of it in front of your existing shape. Remove the stroke and fill it with a solid fill of D9E021. Now bring the shape in by going to Object > Transform > Scale. Scale it down to 80%.

Scale Tool Options
Scale Tool Options

Finally round the edges a little by going to Filter > Stylize > Round Corners. I’ve selected 1px. You should end up with something like this. If you like you can give this shape a gradient to help with the shading effect.

Glossy Badge Stage 2
Glossy Badge Stage 2

Adding the gloss

Now we need to add the gloss so it is time for the good old Opacity Mask. First create a highlight shape. I like to use a circle and then use the Direct Selection Tool to achieve this. Have a look at the video below for how I create the shape. It helps me to turn Smart Guides on so if you want that go to View > Smart Guides. Once you have the shape label the layer. I’ve called mine “curve” in the download.

Glossy Badges in Illustrator from George Ornbo on Vimeo.

Now copy the inner star that you have drawn and paste it in front of the original (Edit > Paste in Front). Call this layer “highlight”. Now make sure you have the correct layer selected and give your copy have a white fill. No call up the transparency menu and in the fly-out menu in the top right click Make Opacity Mask. Now go back to your layer “curve” and copy this. Return to the opacity mask and paste it in to show the highlight. Add a gradient to complete the effect. This is a little complex so watch the video below if you are struggling. Sorry for the poor video - it is the best I can do at the moment!

Then just add the text. I’ve used Folks which is a great free font.

Final Glossy Badge
Final Glossy Badge

That’s it - a simple resizable badge in Illustrator. If you haven’t got the illustrator file yet you can grab it here.

Tags

Can you help make this article better? You can edit it here and send me a pull request.

See Also