Design stunning iPhone Application Interfaces and become a pro. You’ll hate to miss this tutorial. The secret of beautiful iPhone application interface design in Photoshop is a click away.
Have you ever wondered how an amazing iPhone app interface is built initially in Photoshop? Well in this tutorial, we’re going to show you how to build an interface similar to the one created by the guys at FutureTap.com. They have an awesome application called “Where to?” “Where To” makes it incredibly easy to locate the closest steakhouse, bank branch, billiard club or anything else you may be looking for, at the drop of a hat! Think of it as a traditional GPS device built right into your iPhone.
Not to mention, the user interface is slick and intuitive.
Here is a picture of their app.
Here is what we will be creating:
Pretty close huh? We’ve added a few subtle changes
Here are the files you’ll need to start the tutorial:
The first thing we’re going to be doing is opening a new document. set the width to 320 pixels and the height to 460 pixels with a resolution of 72 pixels per inch. If you want to create an interface that is a little higher res then you can increase the resolution but the settings in the rest of the tutorial will wrong so you’ll have to adjust them accordingly
Next we’re going to place the leather background that we downloaded above into our document and resize it to fit the stage (area where you are designing in photoshop). Then, click Filter > Blur >Gaussian Blur and set the blur radius to .6 pixels. After this, set the layer style of this layer to “Soft Light”
Now create a new layer and name is “spotlight” or whatever you want to name it. Choose a brush with a hardness of zero and with a size big enough to cover the middle of the stage. Make sure you use a circular brush with a fill color of white. Set this layer’s blending mode to “Overlay”
Now create a new layer and name it “gradient.”
In the bottom of the layers palette select the little circle that is half black and half white and select “Gradient.” Make sure that the “gradient” layer you created is still selected.
Select a gradient fill that mimics the settings below.
Set the opacity of the gradient layer to “58%”
Now we’re going to create a layer below the original leather layer (named “Layer 1” in our screenshot below) and select the same half white/half black circle at the bottom of the layers palette but this time select “Solid Color.” Select a color of #7c624f.
Now set the blending layer of the leather layer (“Layer 1”) to Soft Light. This creates an awesome soft effect. After that, create a new blank layer and name it “clouds.”
Now we’re going to add a clouds filter overlay that will give the leather some discoloration. This is a very common technique using in Photoshop for backgrounds. It adds character and depth of color :). To do this make sure your Foreground Color is set to 43261a and click OK. To select foreground color in the tools palette (on the left side of Adobe Photoshop) there are those two overlapping boxes at the bottom of the tools palette… well… the one on the top is the foreground and the one on the bottom is the background.
Set the Background Color to b67249 and click OK. Now, select the “clouds” layer you created previously and select Filter > Render > Clouds in the menu bar.
Now decrease the opacity of the “clouds” layer to 63%
Now we’re going to create some of the navigation bars to make it look like our application is actually inside of the iPhone visible screen. Grab the Marquee Tool (M) and select the top area of the stage.
Create a New Layer above the “gradient layer” and then select the black and white circle at the bottom of the layers palette and select “gradient.”
Click the rectangle to the right of the word “Gradient:” and the dialog box below will pop up. Create a gradient that looks like the gradient we’ve created with black on the left, light grey on the right, and a darker grey and a black squeezed in the middle. Click OK
Select this new gradient layer and decrease the fill to 46%
Select the black and white circle at the bottom of the layers palette and select “stroke”
Input the following settings:
Input the following settings for Inner Shadow the color for the inner shadow is 7e6c52
Now select the text tool (T) and click on the stage and type in “Where To?” or whatever text you want at the top of your iPhone app interface
Now we’re going to add a little extra effect that the original interface doesn’t have but spices up the text a bit. This is adding a drop shadow to the text. This is a simple change that gives a little more defined look to the text. Select the text layer, then select the circle in the bottom of the layers palette and select Drop Shadow.
Input the following settings: