Learn How To Create A GUI Volume Dial/Knob

In this photoshop tutorial I'll be explaining how to build a brushed aluminum knob for a graphical user interface (GUI). The tutorial is quite simple but the outcome is something shiny and new.

What We’ll Be Creating

Learn How To Create A GUI Volume Knob

Setting Up Our Canvas

Create a new document (Ctrl + N) 800 x 600 pixels with any colored background. Set your foreground color to #e4e4e4 and background color to #cfcfcf then select the “Gradient Tool” (G). With the “Gradient Tool” (G) selected change the gradient type to a reflected gradient.

Learn How To Create A GUI Volume Knob

Drag the gradient over the canvas starting from the middle of the canvas and dragging upwards.

Quick Tip:

Holding down the “Shift” key whilst dragging will snap the dragging line so its 100% vertical.

Once the background gradient has been applied add a noise filter by going to “Filter > Noise > Add Noise”, use the settings below.

Learn How To Create A GUI Volume Knob

Preparing The GUI Knob

Select the “Ellipse Tool” (U) then create 4 ellipse’s all on there own separate layers, the image below shows you in more detail.

Learn How To Create A GUI Volume Knob

Notice how some ellipse’s are far apart than others. This isn’t critical but try and get it as close as you can. Lets now start to add our layer styles, we’ll start with the “Knob Outer Layer”.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

You should have something like this.

Learn How To Create A GUI Volume Knob

Next, add the following layer styles to the “Knob Inner Layer”.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

You should now have something like this.

Learn How To Create A GUI Volume Knob

Add the following layer styles to the “Knob Layer”.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

You should have something like this.

Learn How To Create A GUI Volume Knob

Finally, add a gradient overlay to the “Knob Top Layer”.

Learn How To Create A GUI Volume Knob

You should now have something which looks like this.

Learn How To Create A GUI Volume Knob

Creating The Knob Shadow

Duplicate the “Knob Top Layer”, then right click the duplicated layer and select “Rasterize Layer”. Rename the layer “Knob Shadow” then move the layer underneath the original. Select the “Move Tool” (V). With the “Move Tool” (V) selected press the down arrow down a couple of times.

Quick Tip:

To increase the distance of the move tool whilst working with the keyboard, try holding down the shift key whilst tapping the arrow keys.

Learn How To Create A GUI Volume Knob

With the shadow layer selected go to “Filter > Blur > Guassian Blur” apply a guassian blur of about 3-5px then set the opacity to around 75%.

Learn How To Create A GUI Volume Knob

Adding Depth To The Knob

Select the “Polygonal Lasso Tool” (L) then mark out a couple of triangular selections.

Learn How To Create A GUI Volume Knob

Fill the selections with the color white #ffffff, to add more depth to the knob create some of the white triangles on different layers.

Learn How To Create A GUI Volume Knob

Blur the triangular shapes by around 3-4 pixels then load a selection around the “Knob Top Layer”, “Layer > Load Selection”. Once the selection has been loaded go to “Select > Inverse” then hit the delete key.

Learn How To Create A GUI Volume Knob

If you’ve added some of the triangular selection to there own separate layers then adjust the opacity of each shape to add more depth.

Learn How To Create A GUI Volume Knob

Next, were going to add a simple brushed metal surface. Start off by selecting the “Rectangular Marquee Tool” (M) and make a selection around the knob, with the selection made go to “Filter > Noise > Add Noise” then use the settings below.

Learn How To Create A GUI Volume Knob

Deselect the selection “Ctrl + D” then go to “Filter > Blur > Radial Blur”.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Change the blend mode to “Screen” then lower the opacity to around 40%. To remove the excess, load a selection around the “Knob Top Layer” then inverse the selection by going to “Select > Inverse”.

Learn How To Create A GUI Volume Knob

Creating The Volume Labels

On the “Knob Top Layer” make a black circle and a black and white line next to each other.

Learn How To Create A GUI Volume Knob

Set the black and white line layers blend mode to “Soft Light” then add the following layer styles to the black circle layer.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

You should have something like this.

Learn How To Create A GUI Volume Knob

On the left, right and top sides of the Knob add the volume text labels.

Learn How To Create A GUI Volume Knob

Creating The Volume Lights

Select the “Ellipse Tool” (U) then create a big ellipse which covers the knob.

Learn How To Create A GUI Volume Knob

Select the vector mask on the ellipse layer then add another ellipse inside of the original ellipse with the settings “Subtract From Shape Area”.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Using the “Pen Tool” (P) with the same option “Subtract From Shape Area” cut away a portion of the ellipse.

Learn How To Create A GUI Volume Knob

In the adobe photoshops custom shapes library select the “Registration Target” shape.

Learn How To Create A GUI Volume Knob

Drag out the registration target over the big ellipse.

Learn How To Create A GUI Volume Knob

Load a selection around the “Registration Target” then select the ellipse layer and hit the delete key. Delete the registration target then you should have something like this.

Learn How To Create A GUI Volume Knob

Split so many of the little squares on one layer and the rest of another, try and work it so that the last square shape falls on the volume dial indent.

Learn How To Create A GUI Volume Knob

To the one half of the little squares add the following layer styles.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

To the other half of the squares add the following layer styles.

Learn How To Create A GUI Volume Knob

Learn How To Create A GUI Volume Knob

Your end result should look something like this.

Learn How To Create A GUI Volume Knob

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

About Author

Tom loves to write on technology, e-commerce & internet marketing. I started my first e-commerce company in college, designing and selling t-shirts for my campus bar crawl using print-on-demand. Having successfully established multiple 6 & 7-figure e-commerce businesses (in women’s fashion and hiking gear), I think I can share a tip or 2 to help you succeed.