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.

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    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!

  2. evan says

    I am updating our Add to cart buttons and found your tutorial…made things very easy! Thanks!

  3. Adrian says

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

  4. says

    I didnt know how the ‘screen’ function worked till now. I’ll definitely have to play around with those options!

  5. Anna says

    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?

  6. says

    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

  7. says

    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.

  8. Mike Meyer says

    Rob, thank you for posting this… great to find a tutorial that is quick to the point and includes all the necessary steps. Thanks for sharing your insight and talent to make life ez! Looking forward to future tutorials.