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!
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.
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.
Some other articles you may like:
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!
Thank you for your kind and encouraging words. More how-to articles to follow when I get some time! Good luck!
I am updating our Add to cart buttons and found your tutorial…made things very easy! Thanks!
My pleasure, evan. I should do a set of stock vector web icons for download.
I am very new to illustrator, and I was looking for a way to create some nice buttons, these are great!!!
Excellent, Andy!
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!)
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…
Thanks Rob!
Now is all right with “Opacity Mask”!
Interesting, thanks for sharing!
I didnt know how the ‘screen’ function worked till now. I’ll definitely have to play around with those options!
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?
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/
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
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.
very helpful thanks heeps