Life's easy with Medialoot.

Unlimited access for only $14/mo.

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

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

create an audio knob in photoshop tutorial final product

Step 1

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

start with a dark solid background color for the audio knob photoshop tutorial

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).

draw a circle in the center of your document for the audio knob photoshop tutorial

Step 3

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

add an inner shadow layer style for the audio knob photoshop tutorial
add a drop shadow layer style for the audio knob photoshop tutorial

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.

draw a smaller circle in the middle of the base layer for the main part of the knob for the audio knob photoshop tutorial

Step 5

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

add a bevel and emboss layer style for the audio knob photoshop tutorial
add a 2px stroke outside with layer styles for the audio knob photoshop tutorial
add a soft light inner shadow layer style for the audio knob photoshop tutorial
add a normal dark inner glow layer style for the audio knob photoshop tutorial
add a soft light gradient overlay layer style for the audio knob photoshop tutorial
add a normal drop shadow for the audio knob photoshop tutorial
You should now have something that looks like this:
the base layer for the audio knob is complete for the audio knob photoshop tutorial

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.

create a large shadow by duplicating the layer shape for the audio knob photoshop tutorial

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%.

heavily feather the layer for the shadow for the audio knob photoshop tutorial
set the deep shadow shape to a lower opacity for the audio knob photoshop tutorial

Step 8

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

create a slightly smaller circle between the base layer and shadow layer for the audio knob photoshop tutorial

Step 9

Time for some more layer styles on our new circle:

add a bevel and emboss inner bevel for the audio knob photoshop tutorial
add an inner shadow layer style in soft light for the audio knob photoshop tutorial
add an inner glow layer style for the audio knob photoshop tutorial
add a soft light satin layer style for the audio knob photoshop tutorial
apply a soft light gradient overlay layer style for the audio knob photoshop tutorial
The knob is really starting to take form now, you should have something that looks like this:
the knob is really starting to take shape now for the audio knob photoshop tutorial

Step 10

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

draw a new circle inside the knob and set it to black for the audio knob photoshop tutorial

Step 11

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

add a smooth outer bevel layer style for the audio knob photoshop tutorial
add a normal inner shadow for the audio knob photoshop tutorial
add an outer glow layer style for the audio knob photoshop tutorial

Step 12

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

set fill opacity of the new layer to 0% for the audio knob photoshop tutorial

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.

add a light grey circle for the brushed metal center for the audio knob photoshop tutorial

Step 14

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

add an inner shadow layer style for the audio knob photoshop tutorial
add a drop shadow to create an audio knob in photoshop tutorial
And most importantly a nice radial gradient, try to create a custom gradient as close to the one shown as possible:
add an important radial gradient overlay layer style for the audio knob photoshop tutorial
It should end up looking like this:
knob is looking beautiful so far for the audio knob photoshop tutorial

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:

add a linear gradient by duplicating the layer and adding gradient styles for the audio knob photoshop tutorial
add another gradient overlay for the audio knob photoshop tutorial
The result should be subtle like so:
a subtle result  for the audio knob photoshop tutorial

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:

draw a solid black rounded rectangle for the audio knob photoshop tutorial
(Optionally, you can draw a small rectangle and subtract it from the bottom of the marker to tweak the shape.)
subtract front shape for the audio knob photoshop tutorial

Step 17

Just a couple of layer styles this time:

add an inner shadow layer style to the tick mark for the audio knob photoshop tutorial
add a drop shadow layer style to the tick mark for the audio knob photoshop tutorial

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.)

knob is complete with layers in a certain order for the audio knob photoshop tutorial

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:

draw a circle for the location of the indicator lights around the knob for the audio knob photoshop tutorial

Step 20

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

paste circle in illustrator for the indicator lights for the audio knob photoshop tutorial
add a thick dashed line in illustrator for the audio knob photoshop tutorial

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.

outline the stroke of the path and copy the indicator lights for the audio knob photoshop tutorial

Step 22

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

paste the shape back into photoshop from illustrator for the indicator lights for the audio knob tutorial
If it isn’t already then set the fill to black:
set the indicator light fill shape to black for the audio knob photoshop tutorial

Step 23

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

add an inner shadow layer style to indicator lights for the audio knob photoshop tutorial
add a drop shadow layer style to indicator light ring  for the audio knob photoshop tutorial
Set the fill opacity to 10% and you should have a result like this:
you now have a ring of off lights for the audio knob photoshop tutorial

Step 24

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

delete some of the indicator lights for the audio knob photoshop tutorial

Step 25

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

duplicate the lights layer for on lights for the audio knob photoshop tutorial

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):

change some light colors to yellow with layer styles for the audio knob photoshop tutorial
change some light colors with layer styles for creating an audio knob in photoshop tutorial
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:

create an audio knob in photoshop tutorial

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!


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    pratik pawar

    pratik pawar

    really very nice it is… it is very helpfull for design

    Jul 2, 2014 at 7:59 am
  • Reply »
    Edward Rogers

    Edward Rogers

    Flawless tutorial. Will be telling my friends about your site! Thanks so much for your incredible work.

    Jul 4, 2014 at 6:18 am
  • Reply »
    Lucas

    Lucas

    Man, i know that it seems kinda dumb, but can i use this for a (not very important) logo? Thanks from Brazil, great tutorial.

    Jul 16, 2014 at 2:08 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Lucas, not a dumb question at all. If you’d like to use the knob as part of a logo, please purchase the knob resource and then you’ll have full license to use it in a logo. Thanks and enjoy!

      Jul 16, 2014 at 10:36 am
      • Reply »
        Lucas

        Lucas

        Thanks a lot Jenn!  I thought I would have to pay for a monthly subsciption, but I was looking for buy just this knobs, and I did not found how to do, so thanks again, you guys are awesome!

        Jul 16, 2014 at 12:41 pm
  • Reply »
    Sebastian

    Sebastian

    Hi,

    great tut, thx a lot! But I couldn’t do the illustrator part, so I used the Photoshop Ctrl + Alt + T, to ‘record’ transformation, and then Ctrl + Shift + Alt + T to repeat it. I think that was easier, but I would like to learn how to use Ai too ;)

    Aug 8, 2014 at 7:35 am
  • Reply »
    laksh

    laksh

    I followed all the steps but how you duplicate base layer without having layer styles?

    Sep 21, 2014 at 8:23 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all