We draw the stylish switch in Photoshop

In this lesson you will learn how to create a switch for a user interface from scratch.

Final result:

Step 1. Create switch boundaries

Create a new document (Ctrl + N) 800 x 600 pixels with any background color. I think that if you use texture on the background, the switch will look much better, so I made a grid textured background.

Choose a tool Rounded RectangleRounded Rectangle Tool (U) with a radius of 35 pixels.

Draw a shape in the middle of the canvas. On this layer there will be an indented button – a frame.

Right click on the layer and select Rasterize layer “Rasterize Layer”. Next, select the tool Rectangular area Rectangular Marquee Tool (M), select any area of ​​the background and copy it to the clipboard. After that, load the selection via the menu. Selection> Load Selection “Select> Load Selection” around a rounded rectangle.

Tip: To quickly load a selection, simply hold down the “Ctrl” key on your keyboard, and then left-click on the small thumbnail in the layers palette.

After the selection has loaded, go to the menu Editing> Paste Special> Paste In .. (“Edit> Paste Special> Paste Into”) (Alt + Shift + Ctrl + V). Previously copied background content should have appeared inside the selection that you loaded.

Step 2. Adding Styles

Now add the following layer styles:

Stroke (stroke):

Inner shadow (inner shadow):

Gradient overlay (gradient overlay)

You should have the following:

Step 3: Create Toggle Button

Choose a tool Rounded Rectangle“Rounded Rectangle Tool” (U), then drag it inside the rectangle – the frame we just created. Leave a space of about 5-10 pixels from the outer border.

Now add the following layer styles to the newly created rectangle with rounded corners.

Stroke (stroke):

Inner Shadow (inner shadow):

Gradient overlay (gradient overlay):

You should have something like this:

Next, add some gloss to the layer. Make a selection around the top half of the inner rectangle using a tool that is convenient for you, then fill it with white color #FFFFFF.

Now add the following layer styles.

Blending options (blending options):

Gradient overlay (gradient overlay):

You should have the following:

Step 4. Create a slider

Select Ellipse ToolEllipse tool (U), draw a circle in the inner rectangle.

After the circle is in the right place, add the following layer styles.

Stroke (stroke):

Inner Shadow (inner shadow):

Gradient overlay (gradient overlay):

Drop shadow (shadow):

In the end, it should turn out like this:

Next, select the tool Rectangular area “Rectangular Marquee Tool” (M) and make a selection around the slider, simple rough selection.

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

Deselect (Ctrl + D), then go to menu Filter> Blur> Radial Blur “Filter> Blur> Radial Blur”.

Set the layer overlap mode to Soft light “Soft Light,” and then place the blurred layer centered over the slider.

Load a selection around the slider, go to menu Selection> Invert Select> Inverse, select a layer with a radial blur and click the Delete button. You should have the following:

And finally, add text to the switch.

Well, now you can duplicate all the layers and change them in the same way, only for another variant of the switch activity.

Conclusion

Thank you for participating in the lesson! If you have succeeded, do not hesitate, lay out your results.

Like this post? Please share to your friends: