Shiny buttons in Illustrator
This is a short tutorial, explaining how to produce the following type of effect in Adobe Illustrator:
This kind of texture is fairly popular at the moment. You can use it on buttons, navigation bars, and so on. I’ve adapted the technique so that you have a single Group of objects and can easily change the colour of the button with a single click. No need to mess around with gradient sliders
First, draw a rectangle and apply a Round Corner effect. Then apply an Inner Glow effect (Effects > Stylize > Inner Glow). Set the blend mode to Screen and the colour to white. Then select center. Alter the Opacity and Radius settings until you get a fairly subtle glow effect that does not quite reach the edges of the rectangle:
Next, copy this shape and paste in front. Now remove the inner glow effect from the uppermost shape. Using the Scissors tool, carefully click the path of the new shape half-way each vertical side. This will divide it into 2 halves. Use the Direct Selection Tool to select the top half and delete it:
Lastly, group the 2 shapes before adding your text. Because the Inner Glow effect has a blending mode of Screen, you can change the colour of your button very quickly, just by applying a new fill colour to the group. You might need to adjust the opacity of the Inner Glow if you shift from a dark to a light colour.
Fairly simple and straightforward, well done!
Philben at 3:36 am on 13 May 06
This is a great tutorial, thanks!
lesli at 12:53 pm on 14 Jun 06
Excelent! Just what I was looking for. Tanks!
Agustin at 3:12 pm on 15 Jul 08
zuvpos vwqehnl yiwcphs excmrzob wveqiomhc ndzi xlrndpbh
mkynq wgpxhji at 8:05 pm on 4 Sep 08
Very simple and straight forward. Thank you for this tutorial!
Mark A Harris at 2:09 pm on 23 Dec 08
Thanks, clear, simple instructions and great results.
Legion at 12:06 am on 10 Mar 09
Thanks;
nice short and simple tutorial, the buttons look great in my media player that i’m making
Thanks again
Andrew at 2:13 am on 19 Apr 09
Great Tutorial! Just a note for all you cs3 users:
When you cut the rounded rectangle effected pathin half, it rounds off the top corners, which is no good. Simply use a regular rectangle clipping mask to cut it in half instead! Also change the opacity of the clipping mask to 0% so that when you change the fill it doesn’t show the mask!
Alex Berry at 3:11 pm on 7 Mar 10
Hi Alex
I’m using CS3 and the steps I wrote in the tutorial work fine for me – did you use the scissors tool to cut the path?
However, if you do run into that sort of issue there are workarounds as you say. Another would be to expand the shape at the start.
Ben Hayes at 11:47 am on 17 Mar 10