How to Draw a Unique Desktop Speaker

By Nick Morris

---

Today, I’m going to show you how to draw a unique speaker that would ideally be made for a desktop computer. What makes this tutorial unique is that I did this in Photoshop, instead of Illustrator, therefore making it a sort of “vexel.” This tutorial uses the Pen Tool for a lot of the shapes, so if you are not very skilled with it, I suggest first reading the Comprehensive Guide to the Pen Tool on PSDTuts. Enjoy!

---

Step 1

---

First, create a new document with the following dimensions:

Step 2

---

Next, create a new layer, and name it “base1.”

Step 3

---

Now, using the Pen Tool and the following settings, draw the shape shown below:

Step 4

---

Fill the layer with any color you want, since it won’t matter later. I chose a dark grey. Anyway, right click on the layer and go to “Blending Options,” and apply the following settings:

Step 5

---

Create a new layer called “base2″ and draw the following shape above the first layer:

Step 6

---

Now apply the following settings to the layer’s Blending Options:

Step 7

---

Make a new layer called “base3″ and draw the following shape on it:

Step 8

---

Apply the following Blending Options to the layer:

Step 9

---

Make another new layer called “base4″ and draw & fill the following shape:

Step 10

---

Apply the following Blending Options to the layer:

Step 11

---

Now create a new layer called “speakerback1″ and draw & fill the following shape. This one may take you a few tries:

Step 12

---

Apply the following Blending Options to the layer:

Step 13

---

Select the Brush tool and make sure the following settings are on for it:

Step 14

---

Make a new layer and name it “speakerback2,” using the Brush Tool, make 3 strokes across as shown below using the color white:

Since we’re on a white background, you do not need to make the brush strokes perfectly inside the speaker. If you were to use this on a dark background, then you would want to make sure you made a selection of the layer under it before stroking on this new layer. That way, the brush strokes would be constrained inside of the speaker shape itself.

Step 15

---

Now apply the following Blending Option to the layer:

Step 16

---

Make a new layer named “speakerfront” and draw and fill the following shape:

What I did on this to make it so perfect was simply make a circle, then clone it twice, and merge them all together onto one layer.

Step 17

---

Apply the following Blending Options to the layer:

Step 18

---

Now, create a new layer group called “bottom” and make sure all layers you make from now on are inside of this group, from bottom to top.

Step 19

---

Draw a circle using the Ellipse Tool in the following area on a new layer, and apply the gradient shown:

You might notice that slight lightness on the top right of the circle; you do not need to add that, as this circle gets covered up for the most part.

Step 20

---

Make a new layer with another circle, and name it whatever you want. Apply the following gradient afterwards:

Step 21

---

Make another new layer with another, smaller circle, again, naming it whatever you want. Then, apply the following gradient to it:

Step 22

---

Yet again, make another new layer with an even smaller circle inside of it, and apply the following Blending Options to it:

Step 23

---

Select the Brush Tool, and make sure your settings match:

Step 24

---

Now make a new layer, naming it “highlights,” and then select the Pen Tool, and make sure your settings match:

Step 25

---

Now, create two highlights on the top and bottom using the pen tool. When you create one, right click and select “Stroke Path,” “Brush Tool” and make sure “Simulate Pressure” is checked.

If this part confuses you, you can skip it as it is not essential to the overall look of the final product.

Step 26

---

Now, go back to the Brush Tool, and select a blurry, small sized brush, and make 3 or 4 highlights on the same layer, in the middle of the speaker, like so:

Make sure to play with the opacity and flow of the brush so that not all of the highlights are as bright.

Step 27

---

Now, all you have to do is duplicate the group twice, and move them up, and you’re done!

---

---

If you don’t understand a step, feel free to comment and I will help you out.