How to Create a Detailed Audio Rotary Knob Control in Photoshop & Illustrator : Medialoot

How to Create a Detailed Audio Rotary Knob Control in Photoshop & Illustrator

In this tutorial I will walk you through the process of creating a detailed Retina rotary knob interface element inspired by musical instruments and mixing equipment, as can be seen in the Audio UI Controls set on Medialoot.

Preview of what we will be creating

Step 1

The first step is to create a new document in Photoshop and fill the background layer with a dark solid colour (#2e2f31).

Step 2

Next draw a circle in the center of document using the Oval tool and holding the Shift key to constrain proportions. This shape will act as the base of our knob, fill the circle with a dark colour only slightly lighter than the background (#303030).

Step 3

To make the base appear to be slightly indented we apply some layer styles:

Step 4

Draw another circle in the middle of the base layer about 85% smaller, and set the fill colour to the same as the base layer. This will be the main shape of the knob.

Step 5

Apply the following layer styles to the new shape to give it some depth:

You should now have something that looks like this:

Step 6

To give the top shape a sense of depth, it also needs a large shadow. Rather than use the Drop Shadow layer style, we can create our own shadow manually by duplicating the shape layer, moving it down one layer to be between the base and top shape and positioning it about 40 pixels lower.

Step 7

Use the Feather option in the Properties panel to blur the edges of the shadow layer, and set the opacity to about 75%.

Step 8

Okay, let’s add another circle layer between the base layer and shadow layer, about 5% smaller than the base layer.

Step 9

Time for some more layer styles on our new circle:

The knob is really starting to take form now, you should have something that looks like this:

Step 10

Draw another new circle above or duplicate the top shape and make it about 5% smaller, set the fill colour to black

Step 11

Layer styles are our friend with this kind of detailed interface element, so let’s add some more:

Step 12

Set the fill opacity of the newly created layer to 0% and you should have something that looks like this:

Step 13

Once more draw another new circle above or duplicate the last shape and make it about 5% smaller, set the fill colour to a light grey (#d7d7d7). This will be our brushed metal center.

Step 14

To make our new layer look like metal we need to give it a few layer styles:

And most importantly a nice radial gradient, try to create a custom gradient as close to the one shown as possible:

It should end up looking like this:

Step 15

Finally to finish up the metal center element, we want to add a linear gradient. But because we have already used our gradient layer style, we will need to add a few more steps. Duplicate the layer, remove all layer styles, set the fill opacity to 0 and apply one new gradient style to the now seemingly invisible element:

The result should be subtle like so:

Step 16

Now let’s add a small pointer or marker element positioned at 90 degrees on the knob. Draw a solid black rounded rectangle about 8 pixels wide and set the fill opacity to 10% so that it is barely visible:

(Optionally, you can draw a small rectangle and subtract it from the bottom of the marker to tweak the shape.)

Step 17

Just a couple of layer styles this time:

Step 18

The knob is now complete! It should be looking should be something like this:
(Also for reference, this is where the Marker should be in the layers palette.)

Step 19

For the indicator lights around the knob, we will need the assistance of Adobe Illustrator. Start by drawing a circle in Photoshop below all the other layers (except background) roughly where you want the lights to be, and copy it to the clipboard:

Step 20

Paste the circle into Illustrator and give it a thick dashed stroke:

Step 21

When you are happy with the shape, outline the stroke from the Object menu in Illustrator and copy the vector to the clipboard.

Step 22

Paste the shape back into Photoshop as a ‘Shape Layer’ and delete the original circle.

If it isn’t already then set the fill to black:

Step 23

A couple of layer styles to make the individual circles or ‘light indicators’ appear to be in an off state.

Set the fill opacity to 10% and you should have a result like this:

Step 24

Select and delete a small section of the light indicator ring:

Step 25

Duplicate the indicator light ring, and fill it with white, this will be our ‘On’ state.

Step 26

Add some inner and outer glow styles to the newly create ‘On’ state to give the lights a nice bright glow (colour used in the example is #f1c339):

And finally, to finish up simply select and delete half of the lights on the right-hand side of the ‘On’ layer so that the lights line up with the ‘Marker’ layer that we created earlier!

Final Result:

Follow along with this Photoshop tutorial to make your own beautiful and realistic audio knobs. Layer Styles bring the knob rings to life, and with a little help from Adobe Illustrator we’ve created an accurate light indicator ring.

We’d love if you gave this tutorial a shot, and posted a link to your result in the comments below. Also, let us know what other tutorials you’d like to see!.Read more