What We’ll Be Creating
Creating The Toggle Button Indent
Create a new (Ctrl + N) document 800 x 600 pixels with any colored background. I think having some sort of texture on the background makes the switch look a lot better so i went for a grid style textured background.
Select the “Rounded Rectangle Tool” (U) with a radius of 35 pixels.
Drag out a rounded rectangle into the middle of your canvas. This layer will be the indented part of the button.
Right click the layer then select “Rasterize Layer” from the fly out menu. Now select the “Rectangular Marquee Tool” (M) then make a random selection on the canvas background and copy it to the clipboard. Once the background is copied to the clipboard load a selection “Select > Load Selection” around the rounded rectangle.
Tip:
To quickly load a selection simply press “Ctrl” on the keyboard then click the little thumbnail inside the layers palette.
Once the selection has been loaded go to “Edit > Paste Special > Paste Into” (Alt + Shift + Ctrl + V). The clipboard contents should now have been pasted inside of the selection you loaded, simply deselect the selection (Ctrl + D) then right click the layer once more and select “Apply Layer Mask”. Were now ready for some layer styles…
Indent Layer Styles
Now add the following layer styles the layer.
You should have something like this.
Creating The Toggle Button
Select the “Rounded Rectangle Tool” (U) then drag a rectangle inside of the indent rectangle that we just created. Leave about 5-10 pixels of space around the outside of the button.
Now add the following layer styles to the rounded rectangle layer.
You should now have something like this.
Next were going to add a little gloss layer. Make a selection around the top half of the inner rectangle using your desired tool, then fill with the color white #ffffff.
Now add the following layer styles.
You should have something like this.
Creating The Handle
Select the “Ellipse Tool” (U) then drag out an ellipse inside the inner rectangle.
Once the ellipse is in position add the following layer styles.
You should have something like this.
Next, select the “Rectangular Marquee Tool” (M) then make a selection around the handle, nothing specific just a rough selection.
Fill the selection with black #000000, then go to “Filter > Noise > Add Noise”.
Deselect the selection (Ctrl + D), then go to “Filter > Blur > Radial Blur”.
Set the layers opacity to “Soft Light” then position the blurred layer over the top of the handle so the swirls in the blur line up with the ellipse.
Load a selection around the handle ellipse then go to “Select > Inverse”, select the radial blur layer and hit the delete key. You should be left with this.
Finally finish off the toggle with a label.
You can now duplicate all the layers and modify them to suit a toggled on version. Look out for the next tutorial where we’ll be exploring ways on how to use custom checkboxes.
Conclusion
Thanks for taking part in this tutorial, if you managed to complete it then feel free to send me some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.
