How to design shiny interface buttons in Illustrator

These little buttons take a few seconds to make in Illustrator and give a nice polished, “web 2.0″ feel to a website or interactive environment.

Firstly, when creating this shiny effect in Illustrator remember to make the document RGB. Go File > Document Color Mode > RGB. It won’t work otherwise. Many thanks to Simon Mcferran who pointed this out in the comments below!

Shiny interface buttons in Illustrator

Let’s explain how to make the triangle one. How do you make a triangle in Illustrator? Easy! Click on the Polygon Tool and click once on the artboard and enter 3 in the Sides: field of the resulting dialog box. (Didn’t know a triangle was a polygon? Neither did I until the other day!)

Make another small triangle and place it on top and fill it with a lighter colour. Go Object > Blend > Blend Options and enter 100 in the Specified Steps field. (Half that would probably do). Then, with both large and small triangles selected, go Object > Blend > Make (Cmd/Ctrl-Opt-B) and a beautiful rounded blur will fill your triangle. This method gives you more control that a simple radial gradient fill. See below my tutorial without words; I hope it makes some sense.

How to design shiny interface buttons in Illustrator

To make the shiny highlight at the top of the triangle you have to create a shape by intersecting a circle and a triangle together (see 2nd row above). With both triangle and circle selected option-click on the third Shape Mode icon in the Pathfinder palette where the tool tip says “Intersect shape areas (Option-click to expand)”. You will now be left with just the top of the triangle with a curved base.

Fill this with a linear gradient black-to-white, size and position it inset a bit from the top of the main triangle and set it to Screen in the Transparency palette.

This article was posted on Monday, August 27th, 2007 at 7:25 pm and is filed under Design, Illustrator, Internet.
You can follow any responses to this article through the RSS 2.0 feed.

Download free “How to Market Yourself Online” ebook
Discover the secrets behind building a better web presence

Everything you will need to know about self-marketing on the web, including:

Creating websites
Setting up WordPress
Writing blog posts
Getting links
Driving traffic to your site
Using social media
Offering RSS feeds and subscriptions
Getting found on Google

16 Responses to “How to design shiny interface buttons in Illustrator”

David Stopsky, on October 1st, 2007 at 9:31 am, said:

Wow, this is a great tip and I will definitely be trying this one out myself later today. You’ve made it seem and sound easier than I could have imagined. Thank you for the advice, and I look forward to reading more of your wonderful tips and how-to articles. Kudos!
Rob Cubbon, on October 1st, 2007 at 1:09 pm, said:

Thank you for your kind and encouraging words. More how-to articles to follow when I get some time! Good luck!
evan, on October 5th, 2007 at 4:22 pm, said:

I am updating our Add to cart buttons and found your tutorial…made things very easy! Thanks!
Rob Cubbon, on October 9th, 2007 at 12:46 pm, said:

My pleasure, evan. I should do a set of stock vector web icons for download.
Andy, on October 13th, 2007 at 3:43 pm, said:

I am very new to illustrator, and I was looking for a way to create some nice buttons, these are great!!!
Rob Cubbon, on October 16th, 2007 at 12:21 am, said:

Excellent, Andy!
Adrian, on October 31st, 2007 at 9:54 pm, said:

Rob,
I can´t do the step about “screen” mode (last step). I did it, but the appearence of the shape above don´t change to “polish” effect, it continue as black and white blend. What´s wrong? (sorry, my english is very poor!)
Rob Cubbon, on November 1st, 2007 at 4:23 pm, said:

Adrian,
There is another way of doing it. Select both the black to white gradient shape and the underlying object and in Transparency palette go Make Opacity Mask. I explain it here http://robcubbon.com/how-to-design-shiny-web-20-buttons-in-illustrator/
Doesn’t seem to be working with me at the moment I need to look at the file I made when I created this. Will get back to you…
Adrian, on November 1st, 2007 at 5:38 pm, said:

Thanks Rob!
Now is all right with “Opacity Mask”!
Article Rewriter, on May 23rd, 2008 at 7:43 pm, said:

Interesting, thanks for sharing!
Toby, on January 15th, 2009 at 7:30 pm, said:

I didnt know how the ‘screen’ function worked till now. I’ll definitely have to play around with those options!
Anna, on February 12th, 2009 at 5:30 pm, said:

Hello!
I tried to make the cool buttons, but when I changed the mode to screen it became totally white, not transparant at all. What did I do wrong? I’ve tried to figure it out but I have no idea why it didn’t work. Will you please help me?
Rob Cubbon, on February 22nd, 2009 at 12:51 pm, said:

Adrian, I’m glad you worked it out.
Article Rewriter, thanks for comment.
Toby, hope the screen function gives you fun!
Anna, hello, make sure the object you are changing to Screen mode is a blend of black to white and if it still doesn’t work try this alternative method. http://robcubbon.com/how-to-design-shiny-web-20-buttons-in-illustrator/
Simon, on October 27th, 2009 at 10:38 am, said:

Just found this tutorial while searching for the solution to the same problem as Anna,

When using the screen mode the total shape turned to white, I found that I had the document colour mode set to CMYK from a previous project and by changing it back to RGB the Screen Mode gave the expected results again, hope this helps.

FILE >> DOC COLOUR MODE >> RGB COLOUR
Rob Cubbon, on November 7th, 2009 at 3:36 pm, said:

Simon, thank you so much for sorting out this problem for some of my visitors! You’re an absolute star. I will amend the post to include a reminder for people to use RGB Document Color Mode when doing this.
paul, on December 11th, 2009 at 12:36 am, said:

very helpful thanks heeps

Graphic and Web Designer London UK