In the following tutorial you will learn to create shiny, 3D buttons in Adobe Illustrator. We'll cover a complete workflow and every step to take to create this high quality design element. These techniques can be used to create other graphics as well, and is especially useful for creating web design icons and graphics.
Step 1
Create a 300px by 300px document. First, enable the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you'll need a grid every 10px. Go to Edit > Preferences > Guides & Grid, enter "10" in the "Gridline every" box and "1" in the "Subdivisions" box.
You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. Al these options will significantly increase your work speed.
Step 2
Pick the Pen Tool (P) and create a shape like the one shown in the first image. Take a closer look at the grid to understand its exact size. The Snap to Grid will ease your work. Fill this shape with R=209 G=211 B=212 then select the Rectangle Tool (M), create a 90px by 20px shape and place it as shown in the second image. Once again, the Snap to Grid will come in handy. Fill it with R=0 G=104 B=56.
Step 3
Select the shapes made in the previous step and hit Command + G to group them. Select this group and go to Effect > 3D > Revolve. Enter the data shown in the following image, click OK then go to Object > Expand Appearance.
Step 4
Now, you should have a simple group of shapes in the Layers panel. Drill down in this group, remove the clipping masks then ungroup (Shift + Command + G) all groups and subgroups. Keep the six shapes shown in the second image and delete the rest.
In the third image I separated these shapes so that you can distinguish them from each other. Double-click on each of these shapes (in the Layers panel) and name them from "1" to "6" as shown below. It will be easier for you to find them when I refer to them during the tutorial.
Step 5
Disable the Grid and the Snap to Grid. Select shape "1," open the flyout menu of the Appearance panel and click on Add New Fill. This should add a second fill for the selected shapes. Select this new fill (from the Appearance panel) and use the linear gradient shown below image #1.
Reselect shape "1," add three new fills and use the other linear gradients shown in the following images. Take a closer look at the gradients and you'll notice the yellow zeros placed above some of the gradient sliders. It stands for Opacity. This means that you need to select those gradient slider and lower their Opacity to 0%.
Step 6
Let's move to shape "2." Select it, add three new fills then use the linear and the radial gradients shown below.
Step 7
Focus on your Layers panel. Click on the small circle located on the right of shape "1" and drag above the circle located on the right of shape "3." This will copy the properties of shape "1" for shape "3." Use the same technique to copy the properties of shape "2" for shape "4."
Step 8
Let's continue with shape "5." Select it, add four new fills and use the linear gradients shown below. Don't forget to lower the opacity of the sliders.
Step 9
Select shape "6" add a second fill and use the radial gradient shown in the following image.
Step 10
Go to Edit > Preference > General and enter "1" in the Keyboard Increment box. Select shape "1." First, hit Command + C, then hit Command + F twice. This command will create two copies of "1" placed in the same spot. Select the top copy and hit the up arrow three times (to move it 3px up).
Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape, go to the Appearance panel, delete four of the five fills, then select the remaining fill, make it black and lower its Opacity to 5%.
Step 11
Make two copies of shape "2", select the top copy, then hit the down arrow and the right arrow (to move it 1pt down and 1px to the right). Reselect these two copies and click on the Minus Front button from the Pathfinder panel.
You should get two thin shapes. Fill them both with black and remove the extra fills from the Appearance panel. Select the top one and lower its Opacity to 10%, then select the other one and lower its Opacity to 25%
Step 12
Make another two copies of shape "2." Select the top copy then hit the up arrow three times and the left arrow five times (to move it 3pt up and 5px to the left). Reselect these two copies and click on the Minus Front button from the Pathfinder panel. The resulting shapes should look like the second image.
Fill the bottom one with white and the top one with R=35 G=31 B=32. Reselect both shapes and lower their Opacity to 25%. Don't forget to remove the extra fills from the Appearance panel.
Step 13
Once again, make two copies of "2." Select the top copy and hit the up arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. You'll get two thin shapes. Remove the top one, then select the remaining one and fill it with the linear gradient shown in the second image (remove the extra fills).
Step 14
Make two copies of shape "4," select the top copy then move it 1pt down and 1px to the right. Reselect these two copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shapes with black and remove the extra fills from the Appearance panel. Select the top shape and lower its Opacity to 10%, then select the bottom shape and lower its Opacity to 25%.
Step 15
Make another two copies of shape "4." Select the top copy, then move it 3px up and 5px to the left. Reselect these two copies and click on the Minus Front button from the Pathfinder panel. Fill the bottom resulting shape with white and the top shape with R=35 G=31 B=32. Reselect both shapes and lower their Opacity to 25%. Again, don't forget to remove the extra fills from the Appearance panel.
Step 16
Once again, make two copies of "4." Select the top copy and hit the up arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. You'll get two thin shapes. Remove the top one, then select the remaining one and fill it with the linear gradient shown in the second image (remove the extra fills).
Step 17
Make two copies of "6." Select the top copy and move it 3px down and 5px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape, remove its second fill from the Appearance panel, then fill it with R=24 G=90 B=52. Make another two copies of "6." Select the top copy, then move it 3px up and 5px to the left.
Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape, fill it with R=141 G=198 B=63 and lower its Opacity to 25%. Don't forget to remove the second fill.
Step 18
Once again, make two copies of "6." Select the top copy and hit the up arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape and fill it with the linear gradient shown in the second image (remove the extra fills).
Step 19
Re-enable the Grid and the Snap to Grid, then make a copy of shape "1." Select the Rectangle Tool (M) and create a shape like the red one shown in the first image. Select this new shape along with the copy of "1," and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with white and lower its Opacity to 20%.
Make another copy of "1," then select the Pen Tool (P) and create a shape like the red one shown in the third image. Reselect both shapes and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 5%.
Step 20
Duplicate shape "3," then select the Rectangle Tool (M), and create a shape like the red one shown in the first image. Select this new shape along with the copy of "3," and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with white and lower its Opacity to 20%.
Make another copy of "3," then select the Pen Tool (P), and create a shape like the red one shown in the third image. Reselect both shapes and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 5%.
Step 21
Duplicate shape "5," then select the Rectangle Tool (M), and create a shape like the red one shown in the first image. Select this new shape along with the copy of "5," and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with R=141 G=198 B=63, and lower its Opacity to 25%.
Make another copy of "5," then select the Pen Tool (P), and create a shape like the red one shown in the third image. Reselect both shapes and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 10%.
Step 22
Disable the Grid and the Snap to Grid. Pick the Ellipse Tool (L) and click on your Artboard. The ellipse box should appear. Enter 264 in the width box and 134 in the height box, then click OK. Select this new shape, fill it with R=65 G=64 B=66 and add a 1pt, aligned to outside stroke (R=147 G=149 B=152). Send it to Back (Shift + Command + Left Bracket key), then place it as shown in the following image.
Step 23
Finally, you can change the color of the button. Select the top, green shapes and group them (Command + G). Pick the Selection Tool (V), select this group then click on the Recolor Artwork icon placed on the top bar. First, click on the Edit button. Next, click on the Link harmony colors icon to make the sliders move proportionally. Now you can play with the slider and the Brightness adjustor until you get the desired colors.
Conclusion
You can change the colors as you see fit. The final image is below.
