Photoshop For Developers: Making a Leather Navigation Bar

Learn how to make a stylish leather navigation bar - from scratch!

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.