Step 14Draw another ellipse over the previous one as shown below then make a copy of the ellipse from the previous step with Command+C then paste with Command+F. Now select the copy and the ellipse you just created, open the Pathfinder Panel, click on the Intersect button and fill the shape with a Linear gradient colors R:208 G:211 B:206 to R:143 G:163 B:167.
Step 15With the Pen Tool (P) add the shape as shown in the picture below and fill it with a Linear gradient colors R:70 G:87 B:89 to R:29 G:51 B:56.
Step 16Repeat the same action from Step 14 until you add the remaining shapes as shown below.
Step 17We continue with the lower part of the router. Take the Ellipse Tool (L), draw an ellipse with size W:247px H:60px, fill it with a Linear gradient as shown below, place the ellipse in the lower part of the router and send it behind all others (Object > Arrange > Send to Back).
Step 18Select the shape that appeared in Step 5, copy it with Command + C then paste with Command + F. Now with the Direct Selection Tool (A) select the upper key points of the copy and delete them then turn off the Fill color and apply Stroke: 3px, Profile: Width Profile 3 with a Black color. Also apply Gaussian Blur Radius: 3px.
Step 19Copy the shape from the previous step with Command + C then paste with Command + F, delete the Gaussian Blur from the Appearance panel then reduce the Stroke to 1px and fill with a Linear gradient as shown in the picture below:
Step 20Take the Ellipse Tool (L), draw a circle with size W:43px H:43px and an R:35 G:31 B:32 color and place it in position as shown below.
Step 21As the circle from the previous step is selected go to Object > Path > Offset Path. Set the offset to -1px, click Ok and fill the new shape with a Radial gradient as shown below:
Step 22With the shape from the previous step selected go to Object > Path > Offset Path. Set the Offset to -3px, click Ok and with the Gradient Tool (G) move the light color in the upper part of the circle as shown below.
Step 23With the shape from the previous step selected go to Object > Path > Offset Path. Set the Offset to -3px, click Ok then slide the new shape 1px down and fill it with an R:20 G:24 B:21 color.
Step 24Select all shapes of the button and group them (Object > Group).
Step 25Now select the button’s group and go to Effect > Distort & Transform > Transform, do the settings as shown in the picture below and click Ok.
Step 26Add the necessary symbol on each button by going to Window > Symbol Libraries > Web Icons. Select the symbols you decide, decrease their size and go to Object > Expand Appearance then change their color to R:198 G:217 B:157.
Step 27Now we have the router’s shadow left to make. In order to do it take the Ellipse Tool (L), draw an ellipse with size W:268px H:62px, fill it with a Radial gradient as shown below. Also apply Gaussian Blur Radius: 10px, change the Blending Mode from Normal to Multiply, send the shape behind all others (Object > Arrange > Send to Back) and place it in position as shown below.
ConclusionAnd here is the final result. As you can see, a highly realistic result can be achieved with the proper use of gradietns and perspective. I hope you’ve enjoyed this tut. Have a play around with different objects that are made from the same shapes to learn more about creating objects in 3D.