Photoshop For Developers: Making a Leather Navigation Bar

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.

In this tutorial, you’ll learn how to make a stylish leather navigation bar for your app, complete with buttons – from scratch!

Not only will you go through creating the design, you’ll also export the custom bar and buttons and get them working in a sample Xcode app.

The best part is you’ll be able to re-use the skills you’ll learn in this tutorial to create all sorts of custom navigation bars – in case you want a different look than leather.

And to top it off, the end of the tutorial rewards you with a free design-related goodie from App Design Vault!

This tutorial is for developers who want to learn a little bit about design. To go through the tutorial, you need to have Xcode and Photoshop. If you do not have Photoshop, you can download a free trial from Adobe.

Now before I start making jokes about another kind of leather bar, let’s get started!

Getting Started

Open up Photoshop and create a new document with the following settings.

Use the dimensions 640×960 px, which are the retina dimensions for the iPhone. At the end of the tutorial, you’ll down-scale the design for the non-retina version.

To make it easier to integrate a navigation bar with an app, it’s good to add some guides to help with creating graphics that have the correct dimensions.

Drag the ruler onto the document to create a new guide, and let it go when you get to 88 pixels in height. Alternatively, go to View>New Guide, select Horizontal, type 88 for Position, and click OK.

Change the foreground color to #8a5a38 by clicking on the toolbar item with two squares (black and white), and then changing the values to as shown below:

Create a new layer by clicking the New Layer icon in the Layers panel. Go to View>Snap To and make sure “Document Bounds” and “Guides” are both checked. This will make creating the shape easier.

Select the Rounded Rectangle Tool and give it a radius of 15 pixels. Select the “Fill Pixels” option. Draw a new shape around the top of the document to form the background of the navigation bar.

You should now have a rounded rectangle at the top of the document. The bottom of the navigation bar will be a straight line. To get the straight bottom, use the selection tool, select the area below the guide and hit Cmd-X to delete it.

When editing an item, make sure the corresponding layer is selected in the Layers palette. Otherwise you will edit the layer that is selected rather than the one you intended to edit.

Adding Depth to the Background

The next step is to add some depth to the background. Right now it looks flat and doesn’t feel like a visual element. The way to achieve this effect is by adding layer styles in Photoshop.

This tutorial is going to use a lot of layer styles to make shapes come to life. That is the secret of making great designs!

Designers are going to hate me for revealing this to you guys :-]

The first layer style to add is the inner shadow. Double-click on the brown navigation bar layer in the Layers panel to bring up the Layer Style window.

Click on Inner Shadow. Now the box next to Inner Shadow will be checked and you will see all the options for the Inner Shadow style.

Use the following options to add an inner shadow style that will simulate the highlights on a top and left side of the leather bar:

Click on Bevel and Emboss and use these options to add a shadow on the bottom and right of the leather bar:

Click on Gradient Overlay and use these settings to make the bar look rounded:

The navigation bar should look like the image below when you are done adding these styles. Now the bar has more of a 3-dimensional feel to it.

The next step is to add a leather texture to the bar. There are two ways to do this. You could use filters to create a leather texture, or you can download a ready-made texture.

Using filters to achieve a leather effect is another tutorial in its own right. However, since I am an efficient (*cough* lazy) developer, I am just going to use a downloaded leather texture. You can buy one from iStockPhoto.com. You can also find a free one at cgtextures.com – just go to the Fabric/Leather folder.

Here’s one that has been desaturated for you to use: click here

Open your leather texture in Photoshop. Select all by typing Command-A, and then copy by typing Command-C. Go to your leather bar document and type Command-V to paste it in as a new layer.

Make sure the new layer is above the brown bar you created earlier in the Layers panel. It will look like the texture is covering up the background, like this:

You want the texture layer to blend with the background, so modify the layer blending mode to Soft Light. Next, command-click on the thumbnail of the brown bar in the Layers panel. This selects the area of the brown bar. Make sure the leather texture layer is still selected in the Layers panel, right-click on the layer, and select Create Clipping Mask. The clipping mask will crop the texture layer using the edges of the brown background, so that the bar remains rounded at the top.

You’re done with the navigation bar background. You could export it as-is and start using it in your app, but you’ll find that the default bar/back buttons won’t look very good with the leather navigation bar. Why don’t you create some buttons that will blend nicely?

Drag some guides onto the document to form the frame of the bar button.

Create a new layer. Change the foreground to black and select the Rounded Rectangle Tool again. Change the radius to 10 pixels, and then draw a rectangle within the guides.

Now do some more layer style magic. These layer styles will give the illusion that the button is inset into the navigation bar.

Double-click on the layer with the black rectangle, and add a drop shadow style with the following settings. The color of the drop shadow is #9f7357; click on the color box to change it:

Add an inner shadow style with the following settings. The color of the inner shadow is #664c24, a darker shade of brown than the navigation bar:

Add an outer glow style with the following settings. The color of the glow is white:

Add an inner glow with the following settings. The color of the inner glow is #3b280b:

Add a color overlay with the following settings. The color of the overlay is #180900:

Add a gradient overlay with the following settings:

To set the correct gradient, which will go from a lighter to a darker shade of brown, first click on the gradient bar. The gradient settings will pop up.

Modify the start and end colors by double-clicking on the stops (the triangles below the gradient bar). The left stop should have the color setting #261302 and the right stop #f7ceb3.

After applying all the layer styles, Click OK. Then change the Fill opacity (at the top of the Layers panel) to 0%. This makes it so that only the layer effects show up, and none of the original black background. You will end up with an inset button that looks like the image below:

Magic, right? That’s what a bunch of layer styles can feel like :-]

The next step is to add text to the button. This will be done in the code but is illustrated here to visually complete the design.

Click on the text tool and type some text on the document. It will automatically create a new layer. The font used in this case is Helvetica 30 pts.

Add the drop shadow layer style to the text to make look inset into the button. The color of the drop shadow is #4b2f20.

Drawing the Back Button

The next step is to add the background for the back button. Before you do that, select the button and text layer (hold down Command to select more than one layer), choose the Move tool (type V to use the shortcut for this), and move the layers for the bar button and the “Edit” text all the way to the right.

Create a new layer. Click the Rounded Rectangle Tool and draw a rectangle that almost covers the area defined by the guide.

Select the Polygon Lasso Tool, then use it to select a triangular area by clicking at the three edges.

Fill the area with a black color: go to Edit->Fill, select Black, and click OK. Now you have the shape for the back button.

The same layer styles you used for the bar button item will be used for the back button. Lucky for you, there’s no need to go through setting the styles all over again. Simply right-click on the button layer in the Layers panel and choose “Copy Layer Style.”

Then select the layer with the back button. Right-click and choose “Paste Layer Style.”

You should end up with the image below:

Add a new text layer with the contents “Back,” and then copy and paste the layer style from the “Edit” text layer.

Add another text layer for the title of the bar, type the text “Preparation” and make the font a little bit larger. Copy and paste the layer styles from either of the previous text layers.

Now the navigation bar is complete.

Exporting the images

The next step is to export the images so you can use them in an app. A bit later on in the tutorial, you’ll create a sample app that uses the bar’s elements in navigation.

Make sure you save your document now.

We’ll export the bar background first. Turn off the visibility of the other layers by toggling the eye icon to the left of the layers in the Layer panel. Don’t forget the white background layer as well.

Choose the Crop tool.

Select an area around the background layer. Click Enter to commit to the crop.

Save the file as a .PNG by choosing File->Save For Web and Devices. Choose PNG-24 as the type and click Save. Type in the name of your navigation bar, “nav-bar.png” and click Save.

Select the History Palette and go back in the history to the point before you used the Crop Tool.

Turn on the visibility of the back button layer and turn off the others.

Use the Crop Tool again to select around the back button and crop the document.

Save the file as a PNG called “back.png.”

Next you need to make some modifications to the image so it can be used as a “resizable/stretchable” image in Xcode. The way this works is you set up part of the image to “always stay the same, regardless of height/width”, and part of the image to repeat itself as necessary to reach any desired height/width.

To do this, you need to make some small changes. Instead of an image of the whole button, you only need the left end of the button, a repeatable or stretchable area in the middle, and the right end of the button. Here’s how you can make that image:

Open back.png, the file you just saved in Photoshop. Select the area in the middle (using the rectangular selection tool, shortcut M) of the image and cut it out by using Cmd-X:

Use Selection Tool again to draw a selection around the right side of the image.

Choose the Move Tool and use the left arrow button on your keyboard to move the graphic to the left until it joins the rest of the button on the left.

Crop out the extra space to the right of the button. Save this image as the “back.png.” You can replace the previous file with the same name.

Do this same process with the bar button.

1) Crop the area around the bar button:

2) Save it as a PNG and re-open it in Photoshop. Select the area in the middle of the image:

3) Cut out the selected area and move both images to form an image that can be used as a resizable image:

4) Crop out the empty space:

Creating Non-Retina Versions

At the moment, all the images you’ve created are in the retina resolution. To indicate this before you create non-retina versions, rename each of the files nav-bar.png, back-button.png and bar-button.png so that they have an @2x at the end of the filename.

Now open up each of the images in Photoshop and resize them to half the size by going to Image>Image Size, and resizing by 50%. Select the “Bicubic Sharper” sampling option because we are reducing the image.

Save For Web and Devices again, using a filename without the @2x.

Using the Images in a Project

It’s time to use the current images in a real app that will run on the simulator.

Open up Xcode and create a new project with a single view.

Open up the iPhone Storyboard and embed the single view controller in a Navigation Controller:

Drag the images you made earlier into your project and make sure to select “Copy items into destination groups folder”.

Then add the following piece of code to AppDelegate.m in the application:didFinishLaunchingWithOptions:launchOptions method:

UIImage *navBarImage = [UIImage imageNamed:@"nav-bar.png"];

    [[UINavigationBar appearance] setBackgroundImage:navBarImage 
 			  forBarMetrics:UIBarMetricsDefault];
 
 
    UIImage *barButton = [[UIImage imageNamed:@"bar-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
 
   [[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal 
 			barMetrics:UIBarMetricsDefault];
 
    UIImage *backButton = [[UIImage imageNamed:@"back-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,15,0,6)];
 
 
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal 
 				     barMetrics:UIBarMetricsDefault];

This uses the UIAppearance API (new in iOS 5) to customize the look of any navigation bars/bar button items in your app with these new textures. For more information on how to use these APIs, check out this tutorial.

Run the app in the simulator and you should see a customized navigation bar with the leather effect!

To add the buttons to the bar, change viewDidLoad in ViewController.m to the following:

- (void)viewDidLoad
{
 
    UIBarButtonItem* item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(pushNewController)];
 
    [self.navigationItem setRightBarButtonItem:item];
 
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

Now if you run the app, you should have a bar button item with a + sign that has a custom background.

Note that it shows the + button because that’s what you get when you choose UIBarButtonSystemItemAdd. Also note that it auto-sizes the button to the correct size automatically because you used a resizable image!

Tapping on the bar button item will push a new View Controller, and you can then see a back button that uses the custom background you created.

Where to Go From Here?

That concludes this tutorial!

To sum up, you used Photoshop to create a custom navigation bar that had buttons with a custom background. You exported the images and then used them in a sample app.

This is a big step toward creating custom apps that stand out and look different from the default look and feel of a UIKit app. Congratulations!

Here is an example project with the final Photoshop file and sample code for this tutorial.

Of course, sometimes you may not want to go through the process of creating Photoshop designs yourself. This is why I created App Design Vault.

After all your hard work… click here to get a free template 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.

Please visit the forums to let me know what you think of the tutorial and the free template, and if you have any questions!

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.