Learn To Create A Switch Button

Learn To Create A Switch Button

What We’ll Be Creating

Learn How To Create A Switch Button

Lets Get Started…

Create a new document 800×600 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.

Learn How To Create A Switch Button

Drag the gradient from the middle of the canvas outwards then apply the noise filter by going to “Filter > Noise > Add Noise”.

Learn How To Create A Switch Button

Your background should look something like this.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

Learn How To Create A Switch Button

Learn How To Create A Switch Button

You should have something like this.

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

Now add a gradient overlay using the settings below.

Learn How To Create A Switch Button

You should have something like this.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

Learn How To Create A Switch Button

You should have something like this.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

Learn How To Create A Switch Button

Finally you should have something like this.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

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.

Learn How To Create A Switch Button

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”.

Learn How To Create A Switch Button

Learn How To Create A Switch Button

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

Learn How To Create A Switch Button

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

The Button HTML/CSS

Setup a blank HTML file with your button.PNG file inside the directory. I’ve setup a my HTML file and it looks like this.

[sourcecode language=”html”] <body>

<div id="container">

<ul class="button">
<li><a href="http://www.photoshop-plus.co.uk" title="Launch Photoshop Plus">Launch Photoshop Plus</a></li>
</ul>

</div><!–container ends–>

</body>
[/sourcecode] [sourcecode language=”css”] body {
background-color: #1a1a1a;
}

#container {
margin: auto;
height: 612px;
width: 950px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
}
[/sourcecode]

I’ve basically just set my background as the HTML background and set the dimensions of the container which will hold my background and button. Inside the container I’ve created a simple list which we’ll use to show our button. The buttons CSS looks like this.

[sourcecode language=”css”] ul.button {
margin-top: 250px;
height: 114px;
width: 72px;
float: left;
margin-left: 400px;
}

.button li {
list-style-type: none;
float: left;
}

.button li a {
outline:none;
display: block;
text-indent: -9999px;
background-image: url(images/button_sprite.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 114px;
width: 72px;
float: left;
}

.button li a:hover {
background-image: url(images/button_sprite.png);
background-repeat: no-repeat;
background-position: left top;
}
[/sourcecode]

Click Here to view the Demo.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn How To Create A Switch Button

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

17 comments
Linda says

Merci beaucoup pour ce tutoriel Photshop et les code HTML-CSS !
Linda

Reply
Oliver says

Hm, I don’t like the on/off text, because it looks somehow “cheap”, but the switch is really nice. :-)

Reply
Jenius says

This is very poorly executed. The dimensions aren’t right on the button – the gradient that is supposed to make it appear to be lifted up goes in the wrong direction, and it actually just appears as if one circle is floating on top of another. In addition, in your demo, the css sprite has an error – its off vertically by about 2 pixels. It’s a great effort writing a tutorial like this, but it needs a little work.

Reply
Ashish says

This looks gr8!
What an idea to switch an option.
Thanks!

Reply
Tommy says

Super ce tuto ! Le button est très réaliste. Merci pour les codes (En attendant que j’arrive à perfectionner mes propres buttons :-))

Reply
Richard Carpenter says

@Jenius:

i dont think its poorly executed at all, after checking the demo i to have noticed that its off vertically but its easy fixed.

thanks for all your comments.

Reply
USA Free Driving Online Test says

Good tutorials thanks for sharing
i will try to do it by my own

Joe

Reply
psdude says

i agree with @Jenius it needs more detail and doesn’t look realistic

Reply
rajasegar says

Great tutorial and techniques well explained.
Thanks for sharing…
Bookmarked !!

Reply
savvinovan says

Unusual web button, thanks

Reply
Rahul says

understood each step like anything, very nicely explained

Reply
andrew says

Great, beautifuly done.
But how should someone chose al those colors, for gradients, I mean how do you chose those colors to make it look more deep and more realistic or do you memorize all those hex codes?

Reply
Striker says

Nice result, very useful tut.

Reply
Think360 Studio - Web Design Company India says

Awesome end result This was a really interesting tutorial. Love the short step by step description, makes it a lot easier to understand. Very well done !

Reply
S. Bala says

no words to explain my emotions…….. really excellent tutorials…. i like it too much.. thank you so much…….

Reply
Photoshop Tutorials says

Nice tutorial also shared on my website

:)

Reply
chicotripa says

very nice!!

Reply
Add Your Reply

Popular posts

css.php