Create a Vector Home Cinema Design

---

Setting Up Our Perspective

I imagined where the Vanishing Point would be for this illustration using 1-Point Perspective. This type of perpective is simple enough to not have to work off guides. Though you could physically place the Vanishing Point in Illustrator, and draw guides if you prefer. A demonstration of how the Vanishing Point looks in relation to the final image is below. The following article reviews how to create perspective in Illustrator. The article is from a tutorial site by Kevin Hulsey. There are many good resources on this topic there.

Create Our TV Screen Console

Let's get started. First, you have to use the Pen Tool(P) to make the console. We imagine our perspective point is off to the right. We aim our angles at that distant point. Make a Gradient, like the one shown below.

Create the Base for the TV Screen

Use the same perspective, with the Pen Tool (P) draw a rectangular box under our screen.

Give the Elements Some 3D

Add a couple of layers behind our main layers. I used the Pen Tool (P). Though you could certainly use the Rectangle Tool (M) and then manipulate the points with the Direct Selection Tool (A) to put the rectangles in place.

Create the Back of TV and the Screen

Draw the back of the screen as shown below. Use a Dark Grey Gradient for the back. Draw the TV Screen. Then fill it with a Blue Gradient. Remember to continue to sue the same perspective for all your elements.

Add Reflections and Shadows

Make reflection on the top of our TV screen. Give it a light Gradient, as shown below. Then set the Opacity to about 40 Percent.

The image below shows where to add reflections and shadows. These are white reflective shapes and black shadow shapes. Opacity is given to each element so that it blends into the design. Giving the illustration both reflections and shadows gives it a more 3D look. It also makes the design more interesting.

Create the Speakers in the Base

(1), grab the Ellipse Tool (L) and draw an ellipse. Notice the angle it is at. Give it a Gray Gradient, as shown below. (2), Add another ellipse inside the first one. Make this second one smaller. Have it's Gradient run opposite the first gradient. (3), Copy the inner ellipse and move it up a little. (4), Use the Pathfinder Tool to break a copy of these shapes apart. With the shapes selected go to Effect>Pathfinder>Divide. Then give the shape a white fill. Then set the Transparency to about 20 percent.

Place the first speaker bottom left in our Base. Then make a smaller copy and place it bottom right in our Base.

Create the Standing Speakers

First, using the Pen Tool (P), make a shape similar to the one shown below. Then add a Gray Gradient fill.

Grab the Ellipse Tool (L) and make a flat circle shape. Line it up, as shown below. Use a lighter Gray Gradient here.

Make a little leg of our speaker. I used the Pen Tool, but you could also draw some basic shapes and use the Pathfinder Palette to combine them. Then add that same Gradient like in the last step, but with an Angle of 0.

Now make the big speaker shape using the pen tool. You can see that its made up of three shapes. It's drawn in a similar fashion to how we did our TV screen. First the front is made. You can use the Rounded Rectangle Tool and then manipulate the right sides to match our perspective angles, or just draw the shape with the Pen Tool.

We create the back of the speaker on the left next. Notice the Gradient goes from dark at the top to light at the bottom. Then we create the Front Panel of our Speaker. We conform this shape to the perspective as well. The Gradient used on this shape is shown below.

Now add a little reflection and shadow to the Standing Speakers, as shown below. This gives the image some final polish and shine.

Conclusion

Place a copy of the Standing Speaker on each side of our TV. It's finished now. It looks clean and sexy. You can make more illustrations based on this tutorial. Remember to use consistent perspective, make good use of gradients, and show light through the use of reflections and shadows. The final image is below.