Freelance Graphic Designer London

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.

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.