Photoshop Tutorial For Developers: Creating a Custom UISlider

Tope Abayomi Tope Abayomi
Learn how to make a custom UISlider in Photoshop!

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.

Theming the Slider in XCode

The next step is to bring these images to XCode and style the slider in code. Open up XCode and create a new project. You can leave the project as a single view project and use Storyboards and ARC.

Add the images you extracted from the Photoshop file to the project. I have added them to a folder called Resources.

Open up the Storyboard and drop a UISlider onto the ViewController stage. This is all you have to do as you will use the global option to customize the slider’s appearance. This means all the sliders added to the app will have the same style.

Set the background color of the view to these RGB values [R:231 G:221 B:196]. Your brown slider will look better on this background color.

Open the AppDelegate.m file and add the following code to the didFinishLaunchingWithOptions.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 
    UIImage *minImage = [[UIImage imageNamed:@"slider-track-fill.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
    UIImage *maxImage = [UIImage imageNamed:@"slider-track.png"];
    UIImage *thumbImage = [UIImage imageNamed:@"slider-cap.png"];
 
 
    [[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
    [[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
    [[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];
    [[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateHighlighted];
 
 return YES;
}

This will customize the empty track image (when the slider is at 0%), the maximum track image (when the slider is at 100%) and the thumb.

Here is your complete slider all themed and ready to go!.

Download the Complete Resources

You can download the complete resource kit for this Photoshop tutorial. It includes the Photoshop PSD for the slider and the Xcode project.

This Photoshop tutorial showed you how to create one of the UI elements in the Foody app design template. As you can see, it’s quite a bit of work! :]

If you want to create a good looking template for your app without the hassle, you can get a complete template here that includes custom designs for almost all the UIKit controls including Navigation Bar, Tab Bar, UISwitch, UISegmentedControl, UIButton, UIProgressBar, USlider, iPad and iPhone retina designs, and more.

Again I hope you enjoyed this Photoshop tutorial, and if you have any questions or comments about this Photoshop tutorial or creating artwork for iPhone apps in Photoshop in general, please join the forum discussion below!

Tope Abayomi
Tope Abayomi

Tope Abayomi is an iOS developer and Founder of App Design Vault, your source for iPhone App Design. You can find Tope on Twitter.

User Comments

2 Comments

  • ?????????????NB?? :D :geek: :mrgreen:
    liumingl
  • Hey, thanks for this tutorial! Really helpful, especially the pattern technique that we save in the tutorial. So, thanks!
    Anglican

Other Items of Interest

Ray's Monthly Newsletter

Sign up to receive a monthly newsletter with my favorite dev links, and receive a free epic-length tutorial as a bonus!

Advertise with Us!

Vote for Our Next Tutorial!

Every week, we alternate between Gaming and Non-Gaming tutorial votes. This week: Non-Gaming!

    Loading ... Loading ...

Last week's winner: Best iOS Animations in 2014. [Read Now]!

Suggest a Tutorial - Past Results

Hang Out With Us!

Every month, we have a free live Tech Talk - come hang out with us!


Coming up in October: Xcode 6 Tips and Tricks!

Sign Up - October

Our Books

Our Team

Tutorial Team

  • Matt Galloway
  • Corinne Krych

... 49 total!

Update Team

  • Andy Pereira

... 15 total!

Editorial Team

... 22 total!

Code Team

  • Orta Therox

... 3 total!

Translation Team

  • Wilson Lin
  • Victor Grushevskiy

... 32 total!

Subject Matter Experts

  • Richard Casey

... 4 total!