SEARCH
  Tutorials Photoshop Web Layout Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

photoshop-plus Web Layout Oct 08, 2012

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

Select the "Rounded Rectangle Tool" (U) with a radius of 35 pixels.

Learn How To Create A Set Of Toggle Buttons

Drag out a rounded rectangle into the middle of your canvas. This layer will be the indented part of the button.

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

You should have something like this.

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

Now add the following layer styles to the rounded rectangle layer.

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

You should now have something like this.

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

Now add the following layer styles.

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

You should have something like this.

Learn How To Create A Set Of Toggle Buttons

Creating The Handle

Select the "Ellipse Tool" (U) then drag out an ellipse inside the inner rectangle.

Learn How To Create A Set Of Toggle Buttons

Once the ellipse is in position add the following layer styles.

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

Learn How To Create A Set Of Toggle Buttons

You should have something like this.

Learn How To Create A Set Of Toggle Buttons

Next, select the "Rectangular Marquee Tool" (M) then make a selection around the handle, nothing specific just a rough selection.

Learn How To Create A Set Of Toggle Buttons

Fill the selection with black #000000, then go to "Filter > Noise > Add Noise".

Learn How To Create A Set Of Toggle Buttons

Deselect the selection (Ctrl + D), then go to "Filter > Blur > Radial Blur".

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

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.

Learn How To Create A Set Of Toggle Buttons

Finally finish off the toggle with a label.

Learn How To Create A Set Of Toggle Buttons

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

Learn How To Create A Set Of Toggle Buttons

ABOUT THE AUTHOR

Richard Carpenter

Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.

subscribe to newsletter