Create Bright Web Buttons with Illustrator

In this quick tip Diana Toma will create a set of web buttons with the help of 3D Effects in Adobe Illustrator. Why? Because in this way she can forget about using different brushes and effects for adding highlights and shadows and she can achieve this in a single step, taking advantage of the light settings and Bevel shapes available. Let’s begin!

Let’s start with the basic shape for this web button so take the Rounded Rectangle Tool and click anywhere on your artboard to open the Rounded Rectangle window. There, enter the numbers shown and you will get the shape that you need. Select light gray as the fill color. Having this rectangle selected, go to Effect menu > 3D > Extrude & Bevel. In the right side of the image below you can see the default settings, only the rotation coordinates are changed. Diana Toma would love to use the Bevel shapes more often but sometimes they just don’t generate the results that she wants. In this case, if you choose Tall-Round as the Bevel shape the change is more than obvious. You will get the rounded edge and also you won’t have to worry about the highlights and shadows later.