Learn How To Create A GUI Volume Dial/Knob

Learn How To Create A GUI Volume Dial/Knob

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.

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

27 comments
Maux says

Great Tutorial!
For who one search a inspiration about Volume Dial like this in Adobe Illustrator, here is a good tip – http://vector.tutsplus.com/tutorials/tools-tips/quick-tip-how-to-illustrate-a-modern-volume-dial/

Thanks for the tutorial!

Reply
codeIgniter says

I love your tut, they are so good and the results are really stunning

Reply
Chris Karling says

this has been ripped from one of my tutorial please can you remove this asap now else i will take legal action http://blog.guifx.com/2009/04/03/creating-a-knob-in-photoshop/

Chris

Reply
Richard Carpenter says

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!

Reply
Blake says

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.

Reply
Kevin Gross says

Great tutorial, like it! it would gonna help me in my new Project! thanks

Reply
Richard Carpenter says

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

Reply
Chris Karling says

I have now contacted your webhosting company and my lawyer to start legal action.

Chris

Reply
Richard Carpenter says

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

Reply
jimmy says

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.

Reply
tutorialstorage says

@Blake – Sue me for what ?
For this ?
http://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 http://tutorialstorage.com/2011/10/07/top-10-best-photoshop-tutorials-this-week-005/

Reply
Richard Carpenter says

@tutorialstorage:

i think blake was being sarcastic towards chris, don’t think he meant it the way it tends to read.

Reply
jon1d says

@Richard

I think Chris is butthurt because yours looks better fella.

Reply
threeyzmonkeys says

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 http://redandblackwallpapers.com/?p=831 What do you think?

Reply
darkforest says

Thanks for details description….Really needed it.

Reply
Thomas says

Hahaha!! These comments are hilarious. Chris is cleary off his nut ^_^ awesome tutorial though! Much appreciation. Hope Chris doesnt give you too much trouble!

Reply
corbbin goldsmith says

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…

Reply
Richie says

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.

Reply
David says

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.

Reply
alan says

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

Reply
Richard Carpenter says

Thanks for your kind words :)

Reply
Tezzanator says

Excellent tutorial, impressive result. The comments were hilarious too. Did you ever have legal action taken against you? hah.

Reply
Richard Carpenter says

Thanks for your comment.!

No legal action was taken has he didnt even have a case.! i would of laughed him out of court!

Reply
Add Your Reply

Popular posts

css.php