Hey fellow design enthusiast, here’s the first tutorial of a quick tips series, in this quick tip, I’ll teach you how to create a Slider Buttons for your website or app in Photoshop.    

By Supercolor, on September 25, 2012, under Photoshop Tutorials

Final Result Preview


Step 1 – THE New Document and Background

Let’s Start by opening photoshop and create a new document, I choose 500x500px with a transparent background. Next fill the background with a grey colour, I used #D7D7D7.


Step 2 – Button

Select the Ellipse Tool (U) and create a perfect circle (hold shift while creating it) of about 150px diameter. Then let’s apply some layer styles to it, Layer – Layer Style:


Next create smaller circle in the middle of the bigger circle and apply some layer styles to it:


Step 3 – Sliding Area

Select the Ellipse Tool (U) and create two similar circles, then create a rectangle with the Rectangle Tool (U) between the two circles and merge those three shapes. Duplicate this shape we’ll use it later, hide the duplicated shape, Apply an Inner Shadow layer style to the original shape.


Reselect the duplicated shape and using the Free Transform Tool (Ctrl+T) make it a little bit bigger. Then apply some layer styles to this shape, make sure to place those two layers we just created behind the buttons layers.


Step 4 – Text

Add some text in the empty area of the sliding, I wrote OFF and applied a Drop Shadow layer style to the text. Place all the layers we just created except the Background layer into a new group.


Step 5 – ON Button

Duplicate the group with all the layers, place the new sliding button under the original one on the canvas. Select the two buttons layers in the duplicated group and move the two circles using the Move Tool (V) to the right of the sliding area, also move the text on the left and change it, I’ve put ON.


Then just apply some colour to the sliding area adding a Gradient Overlay layer style.


I hope you’ve learned some new tricks and enjoyed creating those two simple slider buttons, feel free to play around with those new tricks you can apply those effects to all sorts of buttons and webdesign content.