What We’ll Be Creating
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.
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.
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.
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”.
You should have something like this.
Next, add the following layer styles to the “Knob Inner Layer”.
You should now have something like this.
Add the following layer styles to the “Knob Layer”.
You should have something like this.
Finally, add a gradient overlay to the “Knob Top Layer”.
You should now have something which looks like this.
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.
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%.
Adding Depth To The Knob
Select the “Polygonal Lasso Tool” (L) then mark out a couple of triangular selections.
Fill the selections with the color white #ffffff, to add more depth to the knob create some of the white triangles on different layers.
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.
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.
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.
Deselect the selection “Ctrl + D” then go to “Filter > Blur > Radial Blur”.
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”.
Creating The Volume Labels
On the “Knob Top Layer” make a black circle and a black and white line next to each other.
Set the black and white line layers blend mode to “Soft Light” then add the following layer styles to the black circle layer.
You should have something like this.
On the left, right and top sides of the Knob add the volume text labels.
Creating The Volume Lights
Select the “Ellipse Tool” (U) then create a big ellipse which covers the 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”.
Using the “Pen Tool” (P) with the same option “Subtract From Shape Area” cut away a portion of the ellipse.
In the adobe photoshops custom shapes library select the “Registration Target” shape.
Drag out the registration target over the big ellipse.
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.
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.
To the one half of the little squares add the following layer styles.
To the other half of the squares add the following layer styles.
Your end result should look something like this.
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.
27 thoughts on “Learn How To Create A GUI Volume Dial/Knob”
Great Tutorial!
For who one search a inspiration about Volume Dial like this in Adobe Illustrator, here is a good tip – https://vector.tutsplus.com/tutorials/tools-tips/quick-tip-how-to-illustrate-a-modern-volume-dial/
Thanks for the tutorial!
I love your tut, they are so good and the results are really stunning
this has been ripped from one of my tutorial please can you remove this asap now else i will take legal action https://blog.guifx.com/2009/04/03/creating-a-knob-in-photoshop/
Chris
it was not “ripped” from your video, the steps taken to create the effect are different and the overall outcome is different. I’ve never even seen your video.
Thanks for your comment anyway, lets see what everyone else thinks!
It’s not a ripoff Chris Karling. Richard Carpenter used a different gradient and lighting method. Mr. Carpenter also added the brushed metal effect with the radial blurred noise. Not to mention that all the dial accents on and around the knob are different too. Both are good tutorials, but there are lots of tuts around the web that explain similar techniques for this type of effect (three dimensional shiny brushed metal).
I though this was a great tutorial, particularly the part about the radial blur noise for brushed metal effect. However, I think you forgot to mention to clear the selection after you selected the inverse of the knob top layer. Alternatively, you could turn the knob top layer into a smart object and create a clipping mask with the radial blur noise without having to delete any part of the effect on top.
Great tutorial, like it! it would gonna help me in my new Project! thanks
Thanks for your comments @Blake and @Kevin
@Blake, thanks for the heads up on the selection don’t know why i missed that part….! good tip about the clipping mask also. Thanks
I have now contacted your webhosting company and my lawyer to start legal action.
Chris
Ok no worries. You will hear from my lawyer also. But anyone with eyes can see there not the same.
I would also like to congratulate you on your professionalism in dealing with this matter.
I look forward to taking you down.!
Chris, please do not be such a dick about it. You could just post your video and everyone who enjoy multimedia tutorials would pick it up.
The accusations sound ridiculous and does not make you good advertisement.
Next time please contact author via private message.
Thanks Jimmy
Chris, make sure you sue Tutorial Storage too…
https://tutorialstorage.com/2011/09/24/how-to-create-your-own-awesome-amplifier-button-in-photoshop-cs3/
haha
@Blake – Sue me for what ?
For this ?
https://tutorialstorage.com/2011/09/24/how-to-create-your-own-awesome-amplifier-button-in-photoshop-cs3/
Do you know what copyright means?
Did I copy your text? Images?
NO! I’ve worked for that tutorial two days!
@Richard Carpenter great job with this tutorial.
I even post it on my website https://tutorialstorage.com/2011/10/07/top-10-best-photoshop-tutorials-this-week-005/
@tutorialstorage:
i think blake was being sarcastic towards chris, don’t think he meant it the way it tends to read.
@Richard
I think Chris is butthurt because yours looks better fella.
This was a great tutorial. Very easy to understand. Although, I must say I enjoyed reading the comments almost as much as the tutorial itself. Still … I had a go and the result is here https://redandblackwallpapers.com/?p=831 What do you think?
Sorry. Wrong link. It’s here: https://redandblackwallpapers.com/?p=841
Thanks for details description….Really needed it.
Hahaha!! These comments are hilarious. Chris is cleary off his nut ^_^ awesome tutorial though! Much appreciation. Hope Chris doesnt give you too much trouble!
Just watched Chris Karling’s tut earlier.
to Chris Karling: this tutorial actually covered more in a short amount of time, no offense. However, neither of you so happened to show what I a wanted to see, and that is animating. I have at least three knobs of which I do need animated, and if either of you could cover that, that would be great. I don’t wanna be sitting here with a synthesizer and knobs without animations…
Great tutorial! I find it easier to create the shapes beforehand in Illustrator and just copy and paste into photoshop as a shape layer, which will vectorize it.
Also, converting the vector shapes to smart objects and then applying filters is the best way to plan ahead for scalability, especially when designing UI’s for mobiel apps.
I´m so impressed at the realistic look of this dial knob. It´s such a great work. tuts like this help me realize that there is no limits in Photoshop. Amazing work. Keep it up.
There is so many different ways to create the same thing in Photoshop giving the same effect and making things look the same as some one else, Tutorials are for people to lean. If some one made a button just like this tutorial or the other one and incorporated into his or her design or tutorials would you sue everyone on the internet ?
OK if you did a tutorial step by step the same as some one else and did a different color could you say it was ripped off ? Maybe , can you prove the steps used to create the same effects were the same as yours ? possibly, The point is whoever sees your tutorial will take it,tweak it, build on it, add stuff , remove stuff , possibly make a better tutorial.
if you don’t want people to use your tutorial for others to build on or use then DON’T DO ONE. It’s outrageous in my opinion to even say this tutorial is a rip off of someone else,com’on what if this tutorial was the only way i ever did anything in Photoshop again related making dials or buttons etc again would everybody get sued ?.
Thanks for your kind words 🙂
Excellent tutorial, impressive result. The comments were hilarious too. Did you ever have legal action taken against you? hah.
Thanks for your comment.!
No legal action was taken has he didnt even have a case.! i would of laughed him out of court!