Photoshop Tutorial For Developers: Creating a Custom UISlider

Learn how to make a custom UISlider in Photoshop!

Here is another installment in our Photoshop Tutorial for Developers series. In the first and second parts, I showed you how to make a leather themed Navigation Bar and UISwitch.

I would like to continue the theme with this Photoshop tutorial to show you how to make a custom UISlider. Since the release of the UIAppearance protocol in iOS 5, it is now easy to fully customize a lot of UIControls, and UISlider is one of them.

This can be implemented by using just three images: the slider thumb, the maximum state, and the and minimum state.

In this Photoshop tutorial, first you will create these images in Photoshop and then extract them. Second, you will add the images into an Xcode project and customize a UISlider to use them.

So let’s get this show on the road!

Creating the Slider in Photoshop

First of all, you need to create a pattern that you are going to use it in order to create your slider. Create a new Document in Photoshop (300 dpi) in RGB Mode.

Once you’re done. Create a New Layer (Cmd/Ctrl+Shift+N) and delete the Background Layer. Zoom in to 3200% using the Zoom Tool (Z). Select Rectangle Tool (U) and use the settings shown below.

With the Rectangle Tool (U) selected, fill in 3 squares as shown below.

When you’re done duplicate the shape by hitting CMD-J (make sure your rectangle shape is selected in the Layers panel). This creates a new rectangle shape. Now move it down and to the left one pixel. Do this several times until you have what is shown in the image below.

Select all the vector shapes that you’ve created so far and hit Cmd/Ctrl+G to group those, in order to manage easier your file. After that, select the group that you’ve just created and right-click on it and go to Duplicate Group. When you’re done, select the group that you’ve just duplicate and move it as shown below.

Next you have to save your customized pattern. Go ahead and select Rectangle Marquee Tool (M) and make a selection as I did.

With the selection still active go to Edit > Define Pattern. Name whatever you’d like.

When you’re done with saving it you should find the Pattern in Blending Options. as shown below.

After all this, don’t forget to save your pattern. Click on the Settings icon (the little gear in the top right of the pattern swatches as shown above) and choose Save Patterns. Save the patterns wherever you’d like, so you won’t lose them.

Since you’re done creating the pattern you are going to use later it’s time to move on creating your slider.

Create a new document 550px (width) x 600px (height). The DPI does not matter, so you can keep it 300 as before.

Go ahead and select the Rounded Rectangle Tool (U) and use the settings shown below. In the options bar at the top (to the right of Width and Height), change the radius to 12 and the fill color to black (#000000).

Reduce the layer Fill (in the Layers panel) to 23%. Here’s what you should have:

Now since you’ve drawn your shape, select the vector layer on the Layers Palette and right-click on it and go to Blending Options. Use the settings shown below.

When you’re done, your bar should look like this.

Use the Rounded Rectangle Tool (U) again to create the second bar, this one with a height of 19 pixels and width of 250 pixels. Place it right in the middle of the first one, as I did. For the color use #e86b45 (orange).

Select the second bar layer in the Layers Palette that you’ve created and right-click on it and go to Blending Options. Use the settings below.

In this step you are going to use the Pattern you’ve made earlier. Follow the settings below.

Since you’re done with the bar, let’s move on and create the circle. In the Layers panel, make sure that the rounded rectangle is NOT selected – otherwise when we change the settings it will change your rectangle!

Choose the Ellipse tool and change the settings as shown below.

Draw a circle as I did. Then doubleclick on the Ellipse layer in the layers panel to bring up the blending options, and use the settings shown below.

Duplicate the circle layer and change the Drop Settings as shown below.

Once again, duplicate the circle layer and change it’s color to #b7b7b7.

Select the last duplicated layer (circle layer) and right-click on it and go to Blending Options. Remove the Drop Shadow.

Go to Stroke and click on the Gradient box. Use the settings below. The settings uses multiple gradient stops to create the chrome look and feel, 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.

When you’re done with the gradient, use the settings below to create the Stroke. (You can use the same chrome gradient you downloaded above)

Now you’ve done the Stroke. Next, go to Gradient Overlay and use the settings below. (The gradient will be shown in the next image)

Here’s the final result. Hope you enjoyed making it.

Slicing the Images For Export Into Xcode

Now, using the Crop Tool, you are going to cut the shapes to extract the slider states and thumb. Zoom in to 500% using the Zoom Tool (Z) and hit C command on keyboard to open the Crop Tool. Make sure you cut them perfectly. Use the image below as reference. Make sure when you’re done you delete the background layer in order to save it as a PNG. Name it slider-track@2x.png.

Also, you need to crop the filled state. The process is the same as above but use the correct layers.
Name this image slider-track-fill@2x.png.

Same settings applies with the Thumb (use the Crop Tool in order to get the same result). Follow the references below. Same as above. When you’re done, don’t forget to remove or hide the background.

Save this image as slider-cap@2x.png.