Mar 072012
 

A guest tutorial detailing how to create a stylish metal volume dial for use in your CoronaSDK projects.

I should first start by introducing myself. My name is Adam and I run insertcode.co.uk, which is a blog that I’ve started in which I share tips, tutorials and code on game/app design. I use the powerful Corona SDK for my app development and whist starting out, the great community there helped me out time after time. My Indie Development Blog and Indie 2D Game Art Blog are just my way of giving something back. Thank you to the wonderful Peach Pellen for inviting me to do this guest blog post here on Techority.

What we’re going to create here is a stylish volume control knob – not your average of/off toggle – but an expensive looking, shiny, modern, brushed steel one that will allow us to control the volume in increments of 1%. In an accompanying post over on insertcode.co.uk (link at the end of this tutorial), I’ll be using the control knob created in this tutorial, along with some other design elements, to create a fully functional volume control project in Corona SDK.

We’ll be using Adobe Photoshop in this tutorial, but if you don’t have Photoshop, you can achieve the same results using the free, open-source software GIMP. The workflow and shortcuts used in this tutorial are, however, specific to Photoshop, so you’ll need to find the corresponding tools/shortcuts if you’re using any other software. This tutorial assumes a basic knowledge of the very basics of Photoshop, but everything is step-by-step so you shouldn’t have any difficulty following along.

Let’s get started then…

Setting Up Our Document

We’ll target this project at the iPad for now (we can resize it later), so open up a new document in Photoshop that is 256px x 256px with a resolution of 72dpi and a transparent background:

VolControl_DocSetup

Ensure that the Layers panel is visible (Windows > Layers) and create two new layers by pressing the small New Layer button or by pressing SHIFT+CMD+N (Mac) or SHIFT+CTRL+N (PC) twice. Now’s a good time to name our layers to keep things organised so just double click on the default names of each and rename the bottom one ‘Top’ and the other one ‘Outer’.

We’ll set up our basic shapes that we need here too – that’s just two circles for now. With the ‘Outer’ layer selected, select your Ellipse Tool from the tools menu on the left. Now we need to create a perfect circle that is 200px x 200px so the easiest way to two this is to look at the top of the Photoshop screen for the following menu:

VolControl_1

In the above screen grab, I have used the small drop down arrow to open the Ellipse Options panel, I have selected Fixed Size and I have entered the dimensions required. Now close the drop down panel and click somewhere near the top left of your document to place the circle.

You’ll notice it’s not exactly centred so we’ll sort that out by pressing CMD+A (Mac) or CTRL+A (PC) to select the entire canvass and then centre it by clicking on Layer > Align Layers To Selection > Horizontal Centres and then Layer > Align Layers To Selection > Vertical Centres.

No repeat this on the ‘Top’ layer, but with a circle of 180px x 180px. I’ve made the first circle black and the second one white here for clarity, but the colours are irrelevant as we’ll be using Layer Styles to create all the effects we need as you’ll see later:

VolControl_2

 

Add Some Colour

We want this button to look realistic so we don’t want ‘flat’ colours here; we want gradients. We’ll start with the ‘Top’ layer as it’s the biggest and the gradient will be the most complex.

As we mentioned, the way we will add all the effects that we need will be done by using Layer Styles. You access a particular layer’s styles by sleeting it and then press the ‘Add A Layer Style’ button and then select ‘Blending Options’:

VolControl_3

Select the ‘Gradient Overlay’ option on the left-hand menu and input the following settings:

VolControl_5

Also click on the gradient colour bar and create a gradient that looks something like this:

VolControl_6

I’ve used white (#000000) for the highlights and a grey (#aaaaaa) for the others.

Now, do the same for the ‘Outer’ layer using these settings:

VolControl_7

This time, I’ve used white (#000000) and a darker grey (#666666) for the gradient:

VolControl_8

You should now have something that looks like this:

VolControl_9

Looks pretty good so far.

 Add Some Texture

We want a metallic/brushed steel effect for this control knob so here’s how we can create it.

Start by right-clicking on the ‘Top’ layer and select ‘Duplicate’. Rename the new layer ‘Steel Effect’. We will also want to clear the layer style from this layer by right-clicking on it and selecting…you guessed it…’Clear Layer Style’.

We now have a plain white circle in the middle again. It looks like we’ve destroyed what we’ve just made, and, it’s going to look even worse in a second but stick with it.

Select Filter > Noise > Add Noise

Use the following settings:

VolControl_10

Click ‘OK’. I warned you it was going to look worse.

Try this, click on Filter > Blur > Radial Blur and use these settings:

VolControl_11

That’s the texture we want, but the colour/highlights are still not right. Whilst still on the ‘Steel Effect’ layer, silicon on the drop-down box that shows ‘Normal’ and select ‘Overlay’. You should have something like this:

VolControl_12

One Final Detail

As this is a control knob, we need to know what it is set at somehow so we’ll create a little indicator detail.

Create a new layer and name it ‘Indicator’. Then draw a small circle 10px x 10px as we did before, place it towards the top of the control knob. Centre it horizontally again using the same method as before (Layer > Align Layers To Selection > Horizontal Centres) but obviously don’t centre it vertically this time. Fill it with (#333333) and where the drop-down box shows ‘Normal’ in the Layers panel, select ‘Overlay’.

Go into the layer style and set the following:

VolControl_13

VolControl_14

That’s essentially our expensive looking, shiny, modern, brushed steel control knob finished – along with this tutorial.

Below is a mock up of how this might look in when implemented with a nice background and some other elements. This is also a screen grab from the Corona SDK volume control project that you can read about and download from here:

Stylish Volume Control In Corona SDK

VolTutorial

My blog will be updated all the time with new game art and Corona SDK tutorials, so why not check back often and/or follow me on Twitter? I’m also looking for suggestions for tutorials that you’d like to see so get in touch with your ideas and I’ll see what I can do.
 

Like this post? Subscribe to the monthly newsletter!

 

  One Response to “Creating a Metal-Look Volume Dial”

  1. [...] post and project is an accompanying post to the Guest Blog Post that we have just done for Peach Pellen over at [...]

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.