Design an ON/OFF interface switch in Photoshop

In this tutorial we’re going to be using Adobe Photoshop to design an ON/OFF user interface switch which can then be sliced and developed into a working switch for the web.

Step 1

Create a new document. I’ve used an RGB document set to 1000 by 300 pixels. Fill the background with a dark grey.

Step 2

Go to View > Guide > New Guide to bring up the following window. Check the vertical box, and input 400px into the field. Click OK. This will create a new guide 400px (vertically) into your canvas. Repeat the step again, this time inputting 600px.

Step 3

You should be left with two guides in the centre of your canvas, with a distance of exactly 200px. Select the Rounded Rectangle Tool and draw a shape similar to below, with a corner radius of 5px. Fill it with white.

Step 4

Right-click on your new shape layer and select the Blending Options tab to open up the Layer Style window. Select the Gradient Overlay tab and apply a gradient similar to the one seen below, going from a light grey to a medium grey. Make sure your gradients overlay is set to 90 degrees.

Step 5

Select the Paint Bucket Tool and change your canvas background to a light grey. This works better than the original dark grey that we chose to use. Now select the Inner Shadow tab. Apply an inner shadow with an opacity of 25%, distance of 2px and size of 7px. Click the OK button to apply these effects.

Step 6

Duplicate your shape layer (Layer > Duplicate Layer…). Right-click on it and select Rasterise Layer. This will turn it into pixels rather than it being a Smart Object. Go to Filter > Noise > Add Noise and enter 20% into the field that comes up (seen below). check the Uniform and Monochromatic checkboxes and click OK to apply the noise to the shape.

Step 7

Drop the Opacity of your new noise layer down to somewhere between 2-10%. Experiment with this, as results vary depending on the colours you chose for your gradient.

Step 8

Duplicate the original shape layer once more, and position it beneath your original shape using the Shift and Cursor-Key combination (which moves your shapes 10px at a time rathe than the standard 1px). Right-click on the layer and select Rasterise Layer. Using the Rectangular Marquee Tool, select the middle section of your new shape and press the Delete-Key. Select the right portion of what is left, and using the Cursor-Keys, nudge the two shapes together so you have something similar to below.

Step 9

With the latest layer selected (the one that hasn’t got the gradient applied to it), go to Layer > Merge Layers. This will merge your selected layer on to the one directly beneath it, which should be the other half of the duplicated shape. This should also reapply the same gradient to your now merged shape, like below.

Step 10

Using the Shift and Cursor-Key combination once more, nudge your newest shape back up so it sits on top of your background shape. Make sure it isn’t overlapping the top or bottom at all and is sitting perfectly to the left side.

Step 11

Reopen the Blending Options/Layer Style window for your new shape and change the Gradient Overlay from light to dark grey to dark to light blue. Make sure you use opposites here, so if the bottom of your background is light, the bottom of your slider/button should be dark, and vice versa. Also remove the Inner Shadow.

Step 12

Add another colour to your gradient editor/bar, using an even lighter blue at the far right end, as seen below. This will create a highlight effect.

Step 13

Click on the Stroke tab to apply a stroke. Change the default size of 3px to 2px, and then change the fill type to gradient instead of normal. Click on the gradient editor/bar and apply a gradient to your stroke going from dark to medium/light blue as seen below.

Step 14

Open up the Blending Options/Layer Styles for your grey switch background. Apply a gradient-filled stroke with a light to medium grey color.

Step 15

Select the Type Tool and draw a text box over the left side of your button (the blue side). Align the text to the centre and type “YES”. I used the font Myriad Pro. Duplicate your type layer and reposition it over the right side of your switch as seen below.

Step 16

Open up the Blending Options/Layer Styles for your type layer. Apply an Outer Glow using the screen blend mode, an opacity of 25% and 0% noise. Change the colour of your overlay to white.

Step 17

Change the text in your second text box from “YES” to “NO”. Open up the Blending Options/Layer Styles for your “NO” type layer and apply an Inner Shadow using an opacity of 25% and a size of 1%.

Step 18

Create a new layer folder and call it “YES”. Select all of your layers and drop them into your new folder. Duplicate this folder and rename it to “NO”. Using the Shift and Cursor-Key combination, nudge the folder and it’s contents down, as seen below.

Step 19

Using the Cursor-Keys, move your blue switch shape to the right side of your grey background.

Step 20

Open up the Blending Options/Layer Styles and change the gradient overlay settings to a different colour. I decided to use purple.

Step 21

Also change the colour of the gradient-filled stroke. Try to keep the dark/light areas similar to the blue shape.

Step 22

With that done, we have finished our switch. You can now develop your switch to work on the web or indeed on a mobile!