Photoshop For Developers: Creating a Custom UISwitch

This is a blog post by iOS Tutorial Team member Tope Abayomi, an iOS developer and Founder of App Design Vault, your source for iPhone App Design.

Welcome back to our Photoshop for Developers tutorial series!

In the first part of the series, I showed you how to make a leather-themed Navigation Bar.

Today you will learn how to create a custom leather-themed UISwitch in Photoshop, and get it working in your app!

As you may know, Apple has provided a way to partially customize a UISwitch using the UIAppearance protocol. You’ll go through that first to see how it’s done, then you’ll learn how to take it even further with a helper class.

If you want to take it to the next level and go completely custom, keep reading – this tutorial is for you!

Customizing the UISwitch using the Appearance SDK

You can easily customize a lot of controls in iOS with the UIAppearance system introduced in iOS 5, but right now the options to customize a UISwitch are pretty limited. All you can control is the thumb color and the tint color!

If that’s all you need to do it’s pretty easy – you can do it with just 3 lines of code:

[[UISwitch appearance] setOnTintColor:[UIColor colorWithRed:104.0/255 green:73.0/255 blue:54.0/255 alpha:1.0]];
[[UISwitch appearance] setTintColor:[UIColor colorWithRed:213.0/255 green:183.0/255 blue:165.0/255 alpha:1.000]];
[[UISwitch appearance] setThumbTintColor:[UIColor colorWithRed:125.0/255 green:30.0/255 blue:21.0/255 alpha:1.000]];

UISwitch* apSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(72, 60, 63, 23)];
[self.view addSubview:apSwitch];

And you end up with a switch that looks like this:

It doesn’t look bad at all and for some of you, this might be good enough.

But if you want to go hardcore, you will have to use some helper code and fire up Photoshop to get it done. Let get started!

Note: For more information about the UIAppearance system and customizing controls in iOS, check out our User Interface Customization in iOS 6 tutorial.

Customizing USwitch using Photoshop

In the rest of the tutorial, you will learn how to design the UISwitch shown earlier. The colour scheme and design will go hand in hand with the leather theme from the previous tutorial.

First, open up Photoshop and create an new file. Make it 500px by 500px.

Next, change the foreground colour to #e7ddc4.

Fill the background layer with the colour you have just chosen. To to this, click on Edit->Fill and then choose foreground colour.

Now you will create the background of our switch. To do that, select the rounded rectangle tool. If that tool is not currently displayed, hold the mouse down on the tool and it will display options for you – choose the rounded rectangle tool.

Set the Fill colour to anything you want – I used #f9ad81. Remove the stroke by making the width 0px. Set the radius to 22.

Draw a rounded rectangle on the stage. The dimensions should pop up as you drag across the canvas. Make it 125px wide and 44px high. Alternatively, you can click anywhere on the screen and a dialog will pop up that allows you to type in the desired dimensions.

Now you are going to apply some layer style magic to make the background look indented. First, decrease the Fill percent to around 22%. This makes the fill color somewhat transparent while allowing the layer style effects to stay visible.

Double click in the Rounded rectangle layer to bring up the Layer style dialog.

The first layer style you will add is a black inner shadow – this is what makes it look indented! Select the Inner Shadow item on the left and change the settings to what you see below. The colour of the inner shadow is #160a03 – click on the colour box beside the Blend mode to bring up the colour picker, and paste #160a03 into the box at the bottom.

Next, add a black Inner Glow to extend the indented effect. The colour of the Glow is #1a0d04.

Add a Gradient overlay style with the settings shown below.

Lastly, add a white drop shadow. This highlight along the lower edge makes the shape look like it is embedded in the canvas.

All right! The background is looking good!

Now that the background of the switch is complete, you will make the switch handle or thumb image.

Creating the Thumb Image

Choose the rounded rectangle tool and change it to an ellipse tool.

Draw a circle on the canvas. Make it 38px wide and 38 px high. You can hold down the shift-key to keep it a circle as you drag.

Let’s add some layer styles to give the thumb the look of chrome. First, you’ll need to give it a grey-and-white gradient.

I could tell you the values of all the different stops and make you manually change them, but that would be a huge pain! To avoid this, I saved the stops as a gradient file which you can download here.

You can find lots of other great metal gradient files at Photoshopland, like this awesome free one with 110 metal gradients.

Once the file is downloaded, double-click the circle shape layer to bring up the Layer Style dialog. Add a Gradient Overlay. Click on the Gradient bar to bring it up, and load your new gradient by clicking Load, and choosing the file you downloaded.

Make the style of the gradient Angle, and marvel at the lovely chrome. But wait, you’re not finished quite yet!

Add a stroke layer style and change the Fill Type to Gradient. Choose your chrome gradient and set the style as Angle. Make the stroke 2 pixels.

Now you the thumb image is taking on some shape. But it doesn’t look quite connected to the background. You need to add a drop shadow. Use the settings in the image below:

Now you have a nice custom UISwitch. The On/Off text will be added in code later. Let’s slice the images so that you can use it in our Xcode project!