Learn To Create A Switch Button

What We'll Be Creating

Lets Get Started...

Create a new document 800x600 pixels with any color background. Set your foreground color to #303030 and background color to #161616, then select the "Gradient Tool" (G) with a radial gradient.

Drag the gradient from the middle of the canvas outwards then apply the noise filter by going to "Filter - Noise - Add Noise".

Your background should look something like this.

Creating The Switch Outer Circle

Select the "Ellipse Tool" (U) then select shape layers as your path type from the options bar at the top.

Drag out an ellipse onto the middle of the canvas then rename the new layer "Outer Circle".

Quick Tip:

Holding down the Shift key while dragging the ellipse will ensure the ellipse is a fully circle

Once your happy with the size of the button add the following layer styles using the following settings.

You should have something like this.

Creating The Switch Indent

Duplicate the "Outer Circle Layer" then rename the duplicated layer "Switch Indent". Right click the duplicated layer then select "Clear Layer Styles" from the menu. We now need to resize the "Switch Indent Layer", so select the "Free Transform Tool" (Ctrl + T) then drag one of the corner anchor points inwards about 10-15 pixels.

Quick Tip:

Holding down the shift key and Alt key while dragging the ellipse will resize the ellipse from the middle opposed to from the anchor point you are resizing with

Now add a gradient overlay to the "Switch Indent Layer" using the settings below.

Creating The Switch

Duplicate the "Switch Indent Layer" then clear the layer styles by right clicking the layer and selecting "Clear Layer Styles", at this point should also rename our duplicated layer to "Switch". We now need to resize the "Switch Layer" by about 1-3 pixels, select the "Free Transform Tool" (Ctrl + T) then resize the ellipse.

Quick Tip:

Holding down the shift key and Alt key while dragging the ellipse will resize the ellipse from the middle opposed to from the anchor point you are resizing with

Now add a gradient overlay using the settings below.

You should have something like this.

Duplicate the "Switch Layer" then rename the duplicated layer to "Switch Main". Clear the layer styles from the "Switch Main Layer" by right clicking and selecting "Clear Layer Styles". We now need to resize the new layer only this time making it alot smaller and moving it up slightly.

Now add the following layer styles to the "Switch Main Layer" using the settings below.

You should have something like this.

Adding Some Switch Detail

Duplicate the "Switch Main Layer" then clear the layer styles, rename the layer to "Switch Shadow" then drag the layer underneath the "Switch Main" layer. Blur the layer by selecting "Filter - Blur - Guassian Blur" using the settings below.

Using the "Arial Font" create two letters on separate layers, the letters being "I" and "O". Place the two letters onto the button.

Using the "Text Tool" (T) add the words on and off at the top and bottom of the button.

Now add the following layer styles to the two text layers.

Finally you should have something like this.

Additional Steps - Turn The Button Into A Working CSS Sprite

If you would like to use this button as a real button on your website then you can follow the next few steps provided.

The first thing you need to do is duplicate the button and create an "On" and "Off" state.

Once you have your on and off states we need to turn the two states into a sprite and do this by making a selection around one of the buttons. Try and get as close to the button as you can.

Once the selection has been made hide all your layers apart from the button layers you have selected, now go to "Edit - Copy Merged" (Shift + Ctrl + C). Now that the button is copied to the clipboard go to "File - New" (Ctrl + N) the dimensions of the element copied to the clipboard should already be inputted into the dimension boxes. Paste the element onto the canvas with a transparent background.

We now need to adjust the canvas height to double the height of the pasted element, doing this will allow us to fit two buttons onto the canvas. To adjust the canvas go to "Image - Canvas Size".

Copy and paste the 2nd state of the button onto the new canvas in the same way as we did earlier.

Save the sprite as "Button.PNG" inside a new folder on your desktop.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I'd love to see some of your results.