HV-Designs.co.uk

February 17th, 2011 in Photoshop Tutorials by Aaron

UI Quick Tip Series :: Simple Switch

• Share

Today is the start to our new series of User Interface Design. With the vastly rising popularity of mobile apps and mobile web design User Interface Design is now a huge area for Designers to become proficient in. With that in mind we are creating a new series on User Interface Design and a “Simple Switch” is our first Quick Tip Tutorial. Let’s get started.

Create our Document

Start out creating a new document 400×400. Fill the background with #232323.

Now grab your rounded rectangle tool and set the radius to 50px. Go ahead and switch your foreground color to #0d6f08.

Drag out a rectangle that is 285×95. You can place it in the horizantal center of your document and a little bit down from the top.

Alright, now change your foreground color to black again and drag out a circle that is 90px by 90px. You will want to space it 3px from the top, left, and bottom of the green circle. Name this layer outer switch.

Now duplicate the layer and name it Inner Switch. You need to also change the color to white for right now to differentiate. Hit CTRL+T and choose 90% for the ratio. You should have a nice looking switch right now.

Time to move on to actually styling the switch. For our outer switch you will want to apply the following layer styles”

You should have a nice metallic look behind your white switch.

Now, go ahead and copy your layer styles from the Outer Switch. To do this right click your layer and choose “Copy Layer Styles”. Now paste your layer styles, using the same method you used to copy them. Now open them up and simply change the angle to 180 degrees. Now you will have a nice metallic look to your button.

You can play around with the angles depending on what direction you want the light to look like its hitting your button.

So, now our switch looks good but the switch background just doesn’t have the feel that we are looking for.We need to add a few layer styles to give it some depth.

Now your switch is pretty much finished. You can add whatever text you want for your on state. For me I simply added YAY for my text in the font “Delicious”

That is the end of the tutorial for our UI button. However, you only have one switch, what’s up with that? Well to create your second switch simply duplicate the layers, flip them horizantally, change the color to red, and change the text! Move it down a bit and you have two UI Switches.

Conclusion

In this tutorial you learned to create a simple metallic textured button using Layer Styles as well as create a nice, simple User Interface Switch. Hopefully you enjoyed the tutorial and will follow up for the rest of our series. You can also Download the PSD.

• Share