Create an On/Off Button in Photoshop

download source

In this tutorial we will create a large, hi-tech looking, On/Off button. It will be constructed of a metallic round base with suitable shading effects and a glass covered led centered on it.
For the brushed metal base we will mainly use customized gradients we will define in addition to a few layer styles and a noise filter. To create the led itself we will use simple gradients for the light and specular reflections.
You could apply the techniques used in this tutorial on numerous objects you might want to incorporate to your designs. All you need to is to experiment and play with them!

Step 1: Creating new file

Create a new file sized 400 x 400 px with a resolution of 72 ppi.



Set the Gradient Tool to Radial Gradient with a Foreground Color set to #676767 and Background Color #3d3d3d. Apply it on the Background Layer as demonstrated in the image below.

Step 2: Creating Button Base

We start with the button’s round base by creating a round selection and fill it with grey color. We’ll then move on to add a few layer styles to give it some basic 3D character and will finally add a noise filter as basic texturing.
In the next step we will work on the metallic effects that will finalize the base of the button.

Create a new layer and name it ButtonBase.
Use the Elliptical Marquee Tool to create a 181 x 181 px circle. Fill the selection with #b0b0b0 (RGB – 176;176;176) color. Deselect.
If needed, move the circle to the center of the file.


In the Layers window, double-click on ButtonBase layer to open the Layer Style window.
Choose Drop Shadow and set the following parameters.
This will create the basic shadow the button drops. We will then use the Outer Glow style to add some complexity to the shadow.

Don’t hit OK quite yet, we still need to add a few more Layer styles.


Choose Outer Glow style and set the following parameters. With these settings the style will result in a shadow effect rather than its traditional glowing effect.


The last style we’ll be using for the base is Inner Glow.
Along with the effects that will be added in Step 3, it’ll add to the button’s metallic feel.
After you set the following parameters to the Inner Glow style hit OK to apply the 3 styles you defined.


Your Button’s base should look like this.


Before moving on to the Metallic Effects in step 3, we will add a noise filter to add some subtle base texture.

Go to Filter -> Noise -> Add Noise, set the Amount to 5% and Distribution to Uniform and apply.
The noise filter we applied added some slight coloring of the base (more visible when enlarged), click Ctrl+U to de-saturate it.

Step 3: Adding Metallic Look to the Base

Our button’s base still doesn’t look very metallic, but in a few short steps it will.
All we need is to add a few shading effects that are typical of objects like this.
We will begin with some fine and thin rings inside it and will then create bright and dark reflections, moving from the center outwards that will make this piece shine.

Create a new layer and name it CircularTexture. Click Ctrl+G to move the layer into a group and name it BaseShadings.


We will now add a mask to group BaseShadings so all the shadings we will create under it will apply only to the base’s area.
In the Layers Window, Ctrl+Click the thumbnail of layer ButtonBase to make a selection from it. Make sure that group BaseShadings is activated and click the Add Layer Mask button at the bottom of the Layers Window.
Activate layer CircularTexture.


Set the Gradient Tool to Radial Gradient and open the gradient editor.


In the Gradient Editor set Gradient Type to Noise. You could click the Randomize button until you receive a gradient you’re pleased with. What we are actually looking for is a gradient with some contrast between its colors. This will result in better looking “rings” on the metal.
Hit OK.


Apply the gradient we defined on layer CircularTexture as shown in the following image.


If needed, you could move layer CircularTexture to place it exactly in the center of the base.
We now would like to loose the colors and make the effect much more subtle. Click Ctrl+U to De-Saturate the gradient. Set the layer to Overlay and its Opacity to 20%.



We will now add some sharpness to the gradient to make the texture look more crisp.
Go to Filter -> Sharpen -> Sharpen. To re-implement the filter and enhance its effect click Ctrl+F for 2 more times.
Your file should look like this.



We’re moving on to the reflections.
Create a new layer and name it Shading01.
Open the Gradient Editor again and set the Gradient Type to Solid.



We will now need to define the gradient as elaborated in the following images. Please notice that it’s a gradient running all the way from foreground to foreground (in this case black to black) with manipulations only on its opacity in different points.
Carefully follow the images below that define the opacity and location of each point in the gradient, and set your gradient accordingly.

You could also skip that and load the file ReflectionA01.grd, that is supplied with this tutorial, straight from the Gradient Editor window.















After the gradient is defined hit OK.
Set white as your Foreground Color. Choose Angle Gradient and apply as shown below.



Create a new layer, set its Opacity to 0%, and name it Shading02.
Set the Foreground Color to black and apply the same gradient again, as shown in the next image.



And for the last one.
Create a new layer and name it Shading03. Set the opacity to 30%.
Open the Gradient Editor and modify the previously defined gradient in the following manner.

Again, you could skip this and load the gradient ReflectionA02.grd, that is supplied with this tutorial, directly to the Gradient Editor window.















After defining the gradient, set the Foreground Color to White and apply on layer Shading03 as shown below.
With that we have finished our work on the metallic button base and could continue to create the led.


Step 4: Creating the Led

The led is the second and final part of our button.
We will begin by creating a hole, or some sort of a depression in which the led is located. We’ll add some style to it to make it look a bit pressed inside the metal surface. After that we’ll create the background for the led itself and will add a few effects to make it glow like a led and have some glassy feel.

Collapse group BaseShadings, create a new layer above it and name it LedHole.
Use the Elliptical Marquee tool to make a selection of 81 x 81 px. Make sure the selection is centered with the button and fill it with Black Color (#000000).



In the Layers Window double click on LedHole to open Layer Style Window.
Choose Bevel and emboss and set the following.





Create a new layer and name it LedColor.
Create a 77 x 77 px elliptical selection and center it in the middle of the LedHole.
Fill the selection with #476b12 green color.



We will now add the light effect to the led.
Create a new layer and name it Light. Click Ctrl+G to move the layer under a group and name it LedShading.
Ctrl+Click the thumbnail of layer LedColor in the Layers Window to create a selection from it. Activate the Marquee tool and use the arrows to move the selection 3 px down and 1 px to the right.



While group LedShading is still activated add a mask to it by clicking the Add Layer Mask button.
This will confine all the shading effects we will add to a desired area within the led.
Activate layer Light again.



Set the Foreground Color to #98ff00. This will be a suitable color for the light source within the led.
Use the Radial Gradient Tool, set to Foreground to Transparent, as shown in the image below.



Create a new layer above Light and name it Specular01. Set the opacity to 50%.
Set your Foreground Color to White (#ffffff).


Set the Linear Gradient tool to Foreground to Transparent, and apply in following manner. This will add the feel of glass covering the led.


And now to the final touch that will also add to the glassy effect of the led.
Create a new layer and name it Specular02. Set the layer’s opacity to 50%.
Set the Gradient Tool to Radial and White to Transparent. Apply the gradient as shown in the image below.



Congratulations! The button is ready for use.

You could now add an icon to it, a number or anything you find suitable. In this tutorial we used a simple On icon, that is also supplied as a separate resource file. We placed the black icon in a layer on top of the led with its blending mode set to Overlay. This lets the light shine through the icon making it look semi-transparent.

To create an off state for this button, all that you need to do is to de-saturate all the green color. The easiest way would be to add a Hue/Saturation adjustment later above the led and set the saturation value to 0.



You might find this tutorial useful to create further GUI objects. For example, you could create a led that is placed on a different type of bases, you could alter the light color of the led or use the rounded brushed metal as the base of a switch or knob. The possibilities are endless.

Comments

  • Henrik Lauridsen

    Great tutorial, keep up the good Work. Thanks