Photoshop For Developers: Making a Leather Navigation Bar

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.