How to Make a Knob/Dial UI with Photoshop

Tutorial Preview

Step 1: Set Up the Photoshop Document

Launch Photoshop. Start to create a new document by going to File > New. In the New dialog window, set the Background Contents option to White.

Press the OK button to create the new Photoshop document.

Step 2: Create the Base Shape

Click on the Ellipse Tool (U) in the Tools panel. In the Options bar (located at the top of Photoshop), make sure that you’re using the Shape layers mode and also set the Color option to gray (#9f9f9f).

Draw a gray circle with the Ellipse Tool by holding Alt + Shift (Mac users: Option + Shift) to make sure you create a perfect circle.

In the Layers panel, double-click on the circle shape layer to open the Layer Style dialog window. Apply the Stroke layer effect to the gray circle using a Fill Type set to Gradient. Use the image below to guide you.

Duplicate the shape layer.

Double-click on the duplicate layer to open the Layer Style dialog window. Modify the Stroke layer effect settings so that the Fill Type is set to Color. You can use the image below as a reference.

Step 3: Create Lines on the Circle

Use the Zoom Tool (Z) to zoom in closely (e.g., zoom in to 300%). This will enable us to work more precisely.

Click on the Line Tool (U) in the Tools panel. In the Options bar for the Line Tool, set the Weight option to 1px and the Color option to black (#000000). Draw a vertical black line as shown below.

Press Ctrl + Alt + T (Mac users: Command + Option + T) to duplicate the line on the same layer as the first line.

Hold down Alt (Mac users: Hold down Option) to allow you to relocate the center point of the vertical black line to the middle of the gray circle. This will allow us to rotate the line according to the circle’s center point instead of the line’s center point.

Rotate the shape by 5o by going to Edit > Transform Path > Rotate and then inputting 5 for Rotate option in the Options bar.

Repeat the transformation and duplication until the circle is filled with lines.

Give the lines layer a Gradient Overlay layer effect using the Layer Style dialog window.

Step 4: Create the Top of the Knob

In this step, we’ll create the top our knob.

Use the Ellipse Tool (U) to draw a circle like on the image below (use any color you want).

Double-click on the new shape layer in the Layers panel to open the Layer Styles dialog window. We will give this circle a Drop Shadow layer effect and a Stroke layer effect, as well as modify its Fill Opacity.

Drop Shadow

Stroke

You can set the Fill Opacity to 0% via the the Blending Options section. By having a Fill Opacity of 0%, the fill color of the circle will be transparent, but the layer effects (Drop Shadow and Stroke) will remain.

Duplicate the circle. In the Layers panel, right-click on the duplicate layer and then choose Clear Layer Style in the menu that appears.

Open the Layer Style dialog window for the duplicate layer and then apply the following layer effects: Inner Shadow, Color Overlay, and Stroke. Use images below as a reference for each layer effect’s settings.

Inner Shadow

Color Overlay

Stroke

Let’s take a look at our knob now. Looks pretty realistic, right?

Step 5: Final Touch

This is the final step in this tutorial, and it’s optional. In this step, we’ll add triangle mark/indicator to the left our knob.

Click on the Pen Tool (P), make sure that Shape layers is selected in the Options bar, and then draw a rectangle like on the image below. For the color, I used orange (#ed5700).

That’s it!

Tutorial Summary

Many people would say that this is much easier to do in Adobe Illustrator. I guess drawing the basic vector shapes would indeed be easier (Illustrator has a more robust set of vector drawing tools). But applying the effects would be a pain, if not impossible, to do in Illustrator. And, as this tutorial showed us, we can do it in Photoshop super quickly and easily.

We made a knob/dial user interface whose aesthetics was inspired by the Braun minimalist industrial designs. Using only basic Photoshop tools like shape layers, layer styles, the Ellipse Tool and the Line Tool, we were able to create a semi-realistic-looking knob/dial user interface.

Download Source Files

  • Thanks for the tutorial Nikola but just one thing.(for beginners)It takes too much time while creating each line of the circle so it would be better to duplicate the top line with a down opposite and then merge them CTRL C + CTRL V(both 2 lines up and down)and rotate them 5-10(depends) degrees so it will be time saving.(4 lines with one click)

    And also you can duplicate 4 lines(total 8 lines) and rotate them 15-20 degrees so you can fill the circle with a few clicks.

  • Hi Arshad. Thanks for this tip! This does effectively/exponentially reduce the number of times you have to duplicate the line.

  • Arshad, it’s even faster to create an action to do those lines.
    Simply record the first duplicate/rotate cycle as an action, and then you only have to press the play button to create each subsequent line. You can probably indicate somewhere the number of times you want to execute an action, but I didn’t dive into that πŸ™‚

    To do what I said step by step:
    1. Make sure you have the layer where you have the line stroke selected.
    2. Window > Action to open the Actions menu
    3. Create new action (small icon in Actions menu down next to the trash can). Select a name (I called it “rotate”), and a group. From now on it’s just as in the tutorial.
    4. Copy the selected layer (cmd+J)
    5. Cmd+T to transform the new layer. Set the rotation point to the center of the circle
    6. Rotate the line 5ΒΊ
    7. Accept the transformation (return)
    8. Now, go to the actions menu again, and stop recording the action (press the little square icon).
    9. Now each time you play the action (little triangle icon with the desired action selected) you get a new line.

    Thanks for the tut! πŸ™‚

  • Hi Luis! Thank you so much for contributing your technique to making the lines quicker.

    Photoshop actions is an underused feature. For example, like me, I don’t think to use actions if I’m doing something I know I’ll rarely do again for another Photoshop file.

    But in this situation, it actually does save you time even if you only use the action for this Photoshop file.

    Great technique Luis. Thanks again!

  • Hi Luis;

    To be honest i never thought about that πŸ™‚

    Now i will try an action right now on a project i’m working πŸ™‚

  • There is an even easier way: after the first duplication and transform simply press repeatedly CTRL+ALT+SHIFT+T. this method recreates the last transform action you’ve made on an object. It’s pretty amazing that not so many folks know about it.

  • I knew about that from Illustrator. I never had to use it in Photoshop. Great tip.

  • Melissa

    Making knobs is easy in JKnobMan. Getting those lines takes 2 seconds in that software. Highly reccomended, and it’s free!

  • Riz

    Thank you for the Fabulous and easy tutorial,
    For the Dial Line we use CTRL + J for copies.

  • Ali Imran

    Hi! Nikola Lazarevic great effort. Mindblowing tutorial for user interface. Some of Icons for Mobiles apps I do also in Photoshop.
    http://www.photoshophelps.com/2015/08/23/photoshop-tutorials-makeup-distinct-web-buttons-items/