MAKING HIGH GLOSS WEB/INTERFACE BUTTONS IN ILLUSTRATOR

Follow these steps to make your very own web/interface buttons, it's a great way to get a site look thats is clean and up to date.

STEP 1:

1. Draw a circle using your circle tool.
2. Duplicate your circle. (copy, paste)
3. Using your pen tool, draw a curved line, cutting your circle into two pieces. (this will be for creating the glossy effect)
4. Use the 'DIVIDE' button in the 'PATHFINDER' panel to cut the circle in two and delete the bottom piece. (this will be the glossy effect)

STEP 2:

1. Select your cut shape.
2. Duplicate it. (copy, paste)
3. Fill the first one black and fill the second using a black to white gradient.
4. Click on the dropdown menu in the top right corner of the transparency panel and select 'Make Opacity Mask'.
5. Then tick the 'Invert Mask' box on the transparency panel.

Now you have your glossy button. Try dragging it on top of a darker object to see its transparency, you will notice that it's black, so click on the object and click on the white swatch in the 'Swatches' panel.

STEP 3:

Place your glossy object ontop of your first drawn circle and you're done! All we have to do is choose a colour. Use a brighter colour to show its on and a more dull colour to show its off. you can also use gradients (eg: light blue to cyan).

Continue Reading...