Hey everyone! This will be the first installment of a few tutorials about creating different styles and types of knobs that can be used on all sorts of interfaces and GUIs.
Creating the perfect knob for your interface really depends on the style of your interface, and the overall feel you want to achieve with it. Because of that, there are literally unlimited possibilities to how the knob is both layed out and presented. In this tutorial, the knob is most likely something you would see on a DJ rack, stereo, or anything of that style. It has an outer rotating ring with "finger grips", with a nice orb in the center displaying what it does, and the current level (in this case, volume.)
To begin, first make a new document of course.
Mine is 200x200px. You can either create this first on a separate document, or go straight ahead and do it right on an existing GUI. Fill the document with #888888. It is good practice to create things with guides, so go ahead and drag out a horizontal and a vertical guide. If your rulers are showing, you can just click on either ruler, and drag a guide out, if not, you can insert them manually. Make sure the guides are both at the 100px marker so we have a center.
Now with the
Elliptical Marquee Tool (M), position the cursor over the center of the guides. Hold Shift + Alt, and drag out about 120px. Create a new layer named
"inset" and fill the selection with Black.
With the
Elliptical Marquee Tool (M) tool again, position the cursor in the center of the document. Holding Shift + Alt again, drag out, until the selection is
about 4px smaller then the previous black circle. Create a new layer named
"base" and fill it with
#2a2a2a. Open the Blending Options, and apply the following style:
That is a Black to Transparent Gradient.
Drag out a circle like we have been doing, but this time, make it about
15px smaller then the circle we just made. Create a new layer called
"base-inset" and fill it with
#2a2a2a. Open up the Blending Options and apply the following:
That is a Black to Transparent Gradient.
Too add a little extra 3D feel to it, lets add a highlight to the top of the inset. This will give the impression that that tip is what is catching the light, and whatever is under it, is lower (the inset), and is just shadow. So, make a selection of "base-inset", and make a new layer called
"highlight". Now go to
Edit > Stroke > 1px Outside . With a soft eraser selected, erase the bottom 2/3 of the stroke. Now lower the opacity to about
8%.
Now it is time to make the little "finger-grips." This can be an annoying task if you do it the traditional way, but lucky there is a little trick to make some nice lines around a circle. So, with the
Ellipse Tool (U) (Paths:
) draw out a circle about 5px wider then the inset layer.
Now when you select the Type Tool, and you hover your mouse over the path, you should see this:
With
White Verdana 6px on Smooth, type out some |'s around the path. Now, open up the characters pallet, and change the letter spacing to 1500.
Now apply the following styles to the text:
Which should give you a pretty awesome result!
Create a new layer called
"highlight-2" and make an oval at the top of the "base" layer. With a white-to-transparent gradient, drag down over the selection. Lower the opacity to about 20%.
Well the actual knob is done, but we need some sort of indicator! And as I mentioned at you saw at the start, this one is going to have a nice orb in the center.
Alrighty, go ahead and make a new layer called
"orb-base" and drag out a new circular selection from the center. This one should be about 6px smaller than the inset circle. Fill it with
#147ac1. Apply the following Blending Options:
(
The outer glow is the same color as the orb (#147ac1).
That should give you this!
Duplicate the "orb" layer, name "inner-glow" and
change the Fill to 0%. Apply the following Blending Options:
Duplicate the "inner-glow" layer and call it "inner-glow-2". Apply the following Blending Option:
Duplicate "inner-glow-2" and name it "inner-glow-3". Apply these settings!
That gives a pretty good result by itself (all with just a few blending options), but let's take it a step further. Here is what it should look like now:
Make another circular selection from the center, and drag it until it is about 4px smaller then the orb. Create a new layer named "full-highlight" and fill it with
#FFFFF. Set the Blending Mode to "Overlay" and lower the Opacity to 15%.
Make a new layer called "highlight-top" and make an oval selection at the top of the orb. With a white-to-transparent gradient, drag down over the selection. Lower the opacity to about 35%.
Create a small white circle in the center of the Orb. Delete the inner section leaving about a 4px wide stroke. Blur that with a Gaussian blur of about 4. Lower the opacity and set it to Overlay. Duplicate that layer and make it a little smaller. Position them like below. (I was a little brief in that part because it isn't totally necessary, just a little extra glow.
)
Make a new layer called "indicator". Create another circle from the center, and end up about 4px from the edge of the orb. Fill it with White. Drag out another circle, but stop about 4px before the edge of the white circle you just made. Hit Delete. Lower the Opacity to about 20%. Duplicate this layer, and raise the Opacity to about 30%. This will the the indicator of how high the knob has been turned.
I've just added some text saying what the knob is for and a little drop shadow to the main inset layer., and I'm done! (And so are you!)
Thanks for reading, and I sure hope you learned a thing or two. If you are interested in checking out the PSD file for the tutorial, just
Register and head on over to the
Downloads section for the
PSD.
Enjoy!
