theKeeper
Guru
- Messages
- 2,313
- Likes
- 63
With images such as these, don't let the realistic effect you see fool you into thinking that just because it "looks" complex, that it IS complex; or complex to create. Because more often than not, this is simply not the case. Sometimes, yes, but most often, not.
See the sample image at the bottom!
This particular effect can be done quite convincingly using circles filled with a gradient. The key is to use the proper gradient style to create the look you see on the top of the knob. The top of the knob holds a lot of the visual impact for this effect.
Do this:
As with any "component" created for an interface, you would do well to create these in a separate document and simply copy a merged copy of the completed component into your main interface document. Everything can be "tweaked" from that point if necessary. It makes everything a lot easier to work with doing things this way.
1) With that said, create a new document 200x200 pixels.
2) Add a new layer.
3) Pick a hard brush that's the main size you want the knob to be; for this example use an 80px brush size please. Using black, click the brush anywhere on the canvas. Now hold the Ctrl/Cmd key down and tap on the these 3 keys one-at-a-time: a x v. (This is my quicktip way to center layer content.)
Duplicate this layer (Ctrl/Cmd+J), and name the duplicate '1'.
4) Now 'Lock' the transparency for layer '1', and grab the Gradient tool. Using a Radial white-to-black gradient, fill your circle diagonaly; from one edge to the other. Whatever direction your main light source will be coming from, that's the side where you would start the tool from.
5) Press Ctrl+M. (Curves filter) Example image is below.
Look just below the grid on the right there's a pencil image. Click that. Now, start anywhere in the 2nd grid square at the bottom left, and draw a rough wavey line diagonaly up to the top right corner. Draw your wavey line over top of the default line. There's no 'perfect' line here... just do a rough wavey one that's good enough.
Once your wavey line is drawn, click on the "Smooth" button to the right. This will smooth out the effect of our curve. Click OK to apply.
6) Add a new layer and make sure your Foreground colour is black. Grab your brush again and while hovering it over the canvas right-click. Type in a new brush size: 72px. Then click the brush anywhere on the canvas. And now center this circle as you did earlier using that quick-key combo i gave you in Step 1.
Duplicate this layer and name the duplicate '2'.
Make sure the transparency is 'Locked'. Now fill layer '2' with the same white-to-black Radial grad as before. But start the highlight somewhere left or right of the first highlight. And then apply the same method as before with the Curves filter (step 5). This will ensure that the highlights on this part aren't the same as the first part.
(This is a repeat of Step 6 but with a smaller brush size.)
7) Add another new layer and again make sure your Foreground colour is black. Grab your brush again and while hovering it over the canvas right-click. Type in a new brush size: 66px. Then click the brush anywhere on the canvas. And now center this circle as you did earlier using that quick-key combo i gave you in Step 1.
Duplicate this layer and name the duplicate '3'.
Now for the special gradient.
Pick the Gradient tool, and in the Options bar choose the "Angle Gradient" style (3rd icon from the left). Now click on the small arrow beside the gradient preview image in the Options bar. At the top right is a small arrow, click that. In that list choose "Metals" and click OK. Now open the preview list again and choose the "Silver" style. (Hover your mouse over each thumbnail for a second to see a tooltip containing the name of that gradient preset)
Lock the transparency for layer '3'. Start the tool as close to exact center as you can and apply the gradient to your circle. Your eyes will tell you if you're off center.
Open the Curves filter again and draw the same kind of line as you did before; don't forget to hit the "Smooth" button! After you've applied the Curves filter, press Ctrl/Cmd+Shift+U. Then press Ctrl+L. Along the bottom drag the black Output slider to the right until the top image is as light as you'd like it to be.
8) The last step is completely optional, and involves making the little notch in the dial which indicates where the level is set. This is simple. Use the Line tool and draw a small line on the dial where you want the notch to be. For this size dial i used a line width of 3px.
NOTE: make sure the line tool's 'function' is set to "Fill Pixels" in the Options bar.
Apply the FILTER>Stylize>Emboss filter set to 2px.
Change the layer's Blend Mode to Luminosity, Hardlight or just leave it on Normal. Your call.
Done.
--------------------------------------------------------------------
You may be wondering... why we added the 3 black circles?
Well... turn them all off, then on again one-at-a-time. You'll notice that they help add a bit of detail to the edges of our gradient circles. Without them, the effect doesn't have as much clarity to the eye. Especially if you intend on scaling the knob down in size afterward.
And there we have the basis of a control knob. You might want to go back and use the Levels filter to tweak the shadows on the first 2 gradient circles. As you did with the top gradient layer, just drag the black Output slider right to lighten up the darker spots a little. This is subjective though, use your own judgement.
When you're done tweaking, add a new layer above all others. With all your knob layers visible, and your background layer turned off, press Ctrl+Alt+Shift+E. And now you can drag this merged copy into your main interface doc.
Any questions/problems, please ask over in the "Photoshop General" board ok? Thanks.
See the sample image at the bottom!
This particular effect can be done quite convincingly using circles filled with a gradient. The key is to use the proper gradient style to create the look you see on the top of the knob. The top of the knob holds a lot of the visual impact for this effect.
Do this:
As with any "component" created for an interface, you would do well to create these in a separate document and simply copy a merged copy of the completed component into your main interface document. Everything can be "tweaked" from that point if necessary. It makes everything a lot easier to work with doing things this way.
1) With that said, create a new document 200x200 pixels.
2) Add a new layer.
3) Pick a hard brush that's the main size you want the knob to be; for this example use an 80px brush size please. Using black, click the brush anywhere on the canvas. Now hold the Ctrl/Cmd key down and tap on the these 3 keys one-at-a-time: a x v. (This is my quicktip way to center layer content.)
Duplicate this layer (Ctrl/Cmd+J), and name the duplicate '1'.
4) Now 'Lock' the transparency for layer '1', and grab the Gradient tool. Using a Radial white-to-black gradient, fill your circle diagonaly; from one edge to the other. Whatever direction your main light source will be coming from, that's the side where you would start the tool from.
5) Press Ctrl+M. (Curves filter) Example image is below.
Look just below the grid on the right there's a pencil image. Click that. Now, start anywhere in the 2nd grid square at the bottom left, and draw a rough wavey line diagonaly up to the top right corner. Draw your wavey line over top of the default line. There's no 'perfect' line here... just do a rough wavey one that's good enough.
Once your wavey line is drawn, click on the "Smooth" button to the right. This will smooth out the effect of our curve. Click OK to apply.
6) Add a new layer and make sure your Foreground colour is black. Grab your brush again and while hovering it over the canvas right-click. Type in a new brush size: 72px. Then click the brush anywhere on the canvas. And now center this circle as you did earlier using that quick-key combo i gave you in Step 1.
Duplicate this layer and name the duplicate '2'.
Make sure the transparency is 'Locked'. Now fill layer '2' with the same white-to-black Radial grad as before. But start the highlight somewhere left or right of the first highlight. And then apply the same method as before with the Curves filter (step 5). This will ensure that the highlights on this part aren't the same as the first part.
(This is a repeat of Step 6 but with a smaller brush size.)
7) Add another new layer and again make sure your Foreground colour is black. Grab your brush again and while hovering it over the canvas right-click. Type in a new brush size: 66px. Then click the brush anywhere on the canvas. And now center this circle as you did earlier using that quick-key combo i gave you in Step 1.
Duplicate this layer and name the duplicate '3'.
Now for the special gradient.
Pick the Gradient tool, and in the Options bar choose the "Angle Gradient" style (3rd icon from the left). Now click on the small arrow beside the gradient preview image in the Options bar. At the top right is a small arrow, click that. In that list choose "Metals" and click OK. Now open the preview list again and choose the "Silver" style. (Hover your mouse over each thumbnail for a second to see a tooltip containing the name of that gradient preset)
Lock the transparency for layer '3'. Start the tool as close to exact center as you can and apply the gradient to your circle. Your eyes will tell you if you're off center.
Open the Curves filter again and draw the same kind of line as you did before; don't forget to hit the "Smooth" button! After you've applied the Curves filter, press Ctrl/Cmd+Shift+U. Then press Ctrl+L. Along the bottom drag the black Output slider to the right until the top image is as light as you'd like it to be.
8) The last step is completely optional, and involves making the little notch in the dial which indicates where the level is set. This is simple. Use the Line tool and draw a small line on the dial where you want the notch to be. For this size dial i used a line width of 3px.
NOTE: make sure the line tool's 'function' is set to "Fill Pixels" in the Options bar.
Apply the FILTER>Stylize>Emboss filter set to 2px.
Change the layer's Blend Mode to Luminosity, Hardlight or just leave it on Normal. Your call.
Done.
--------------------------------------------------------------------
You may be wondering... why we added the 3 black circles?
Well... turn them all off, then on again one-at-a-time. You'll notice that they help add a bit of detail to the edges of our gradient circles. Without them, the effect doesn't have as much clarity to the eye. Especially if you intend on scaling the knob down in size afterward.
And there we have the basis of a control knob. You might want to go back and use the Levels filter to tweak the shadows on the first 2 gradient circles. As you did with the top gradient layer, just drag the black Output slider right to lighten up the darker spots a little. This is subjective though, use your own judgement.
When you're done tweaking, add a new layer above all others. With all your knob layers visible, and your background layer turned off, press Ctrl+Alt+Shift+E. And now you can drag this merged copy into your main interface doc.
Any questions/problems, please ask over in the "Photoshop General" board ok? Thanks.