WEBEXPEDITION18 Never Stop The Exploring

In this quick tip tutorial I will explain how to create a minimal plastic retro function switch in Photoshop that you can use in your interface designs.
Fire up Photoshop and let’s get started!

Final Image Preview

Tutorial Details

• Program: Adobe Photoshop
• Version: CS5
• Difficulty: Beginner

Step 1

Open Photoshop and create a new document with resolution of 72 ppi. Double click on background layer to unlock it, then open Layer Styles and apply Gradient overlay.

Step 2

Grab Pen Tool (P) and create shape like on the image below. For the color use #171717.

Add following Layer Styles: Gradient Overlay, Stroke and Drop Shadow.

Step 3

Duplicate this shape, first clear Layer Styles

and then apply Inner Shadow

and Stroke.

You should have something like this.

Step 4

Again duplicate shape, clear layer styles, set Fill to 0% and add Inner Shadow and Inner Glow. Use images below as a reference.

This is what we have right now.

Step 5

Duplicate shape and clear Layer Styles one more time. Set again Fill to 0% and add Inner Shadow.

Let’s take a look at our selector now. Looks pretty slick, right?

Select all shapes and group them into group. Name this group ie “switch”.

Step 6

In this step we will add more shadow.
Duplicate one more time original shape, clear layer styles, position it between background layer and “switch” group.

Scale it down a bit, move it few pixels down,

give this layer Gaussian Blur with Radius set to 13px,

and finally apply Gradient Overlay.

Here’s what we have now.

Step 6

Set the Foreground color to black (#000000), choose Line Tool (U), make sure that Weight is set to 1px, and draw couple lines like on the image below.

Apply Drop Shadow to every line.

Finally, add Labels using Horizontal Type Tool (T). I used Helvetica Neue with size of 10px. Apply Drop Shadow the same way as we did for lines (use image above as reference).

Tutorial Summary

I hope that this tutorial has helped you improve your skills with fundamental Photoshop tools and techniques. Thanks for reading!

Authored by Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.