How to Create a Detailed Audio Rotary Knob Control in Photoshop & IllustratorIn this tutorial I will walk you through the process of creating a detailed Retina rotary knob interface element inspired by musical instruments and mixing equipment, as can be seen in the Audio UI Controls set on Medialoot. Preview of what we will be creatingStep 1The first step is to create a new document in Photoshop and fill the background layer with a dark solid colour (#2e2f31). Step 2Next draw a circle in the center of document using the Oval tool and holding the Shift key to constrain proportions. This shape will act as the base of our knob, fill the circle with a dark colour only slightly lighter than the background (#303030). Step 3To make the base appear to be slightly indented we apply some layer styles:
Step 4Draw another circle in the middle of the base layer about 85% smaller, and set the fill colour to the same as the base layer. This will be the main shape of the knob. Step 5Apply the following layer styles to the new shape to give it some depth:
Step 6To give the top shape a sense of depth, it also needs a large shadow. Rather than use the Drop Shadow layer style, we can create our own shadow manually by duplicating the shape layer, moving it down one layer to be between the base and top shape and positioning it about 40 pixels lower. Step 7Use the Feather option in the Properties panel to blur the edges of the shadow layer, and set the opacity to about 75%.
Step 8Okay, let’s add another circle layer between the base layer and shadow layer, about 5% smaller than the base layer. Step 9Time for some more layer styles on our new circle:
Step 10Draw another new circle above or duplicate the top shape and make it about 5% smaller, set the fill colour to black Step 11Layer styles are our friend with this kind of detailed interface element, so let’s add some more:
Step 12Set the fill opacity of the newly created layer to 0% and you should have something that looks like this: Step 13Once more draw another new circle above or duplicate the last shape and make it about 5% smaller, set the fill colour to a light grey (#d7d7d7). This will be our brushed metal center. Step 14To make our new layer look like metal we need to give it a few layer styles:
Step 15Finally to finish up the metal center element, we want to add a linear gradient. But because we have already used our gradient layer style, we will need to add a few more steps. Duplicate the layer, remove all layer styles, set the fill opacity to 0 and apply one new gradient style to the now seemingly invisible element:
Step 16Now let’s add a small pointer or marker element positioned at 90 degrees on the knob. Draw a solid black rounded rectangle about 8 pixels wide and set the fill opacity to 10% so that it is barely visible:
Step 17Just a couple of layer styles this time:
Step 18The knob is now complete! It should be looking should be something like this: Step 19For the indicator lights around the knob, we will need the assistance of Adobe Illustrator. Start by drawing a circle in Photoshop below all the other layers (except background) roughly where you want the lights to be, and copy it to the clipboard: Step 20Paste the circle into Illustrator and give it a thick dashed stroke:
Step 21When you are happy with the shape, outline the stroke from the Object menu in Illustrator and copy the vector to the clipboard. Step 22Paste the shape back into Photoshop as a ‘Shape Layer’ and delete the original circle.
Step 23A couple of layer styles to make the individual circles or ‘light indicators’ appear to be in an off state.
Step 24Select and delete a small section of the light indicator ring: Step 25Duplicate the indicator light ring, and fill it with white, this will be our ‘On’ state. Step 26Add some inner and outer glow styles to the newly create ‘On’ state to give the lights a nice bright glow (colour used in the example is #f1c339):
Final Result:Follow along with this Photoshop tutorial to make your own beautiful and realistic audio knobs. Layer Styles bring the knob rings to life, and with a little help from Adobe Illustrator we’ve created an accurate light indicator ring. We’d love if you gave this tutorial a shot, and posted a link to your result in the comments below. Also, let us know what other tutorials you’d like to see!.Read more |
|