thumbnail

This tutorial will guide you trough the steps of a complete and beautiful layout of an Iphone App.

Along the way,we`ll learn how to create nice effects inspired by Iphone and Apple,we`ll play a bit with some blending options and we`ll integrate some custom graphics which will beautify the layout.

Also, we’ll take advantage of a few fundamental tools in Photoshop such as Rectangle Tool, Shape Tool and Marquee Tool.

Final result:

Click image for full view.

my-iphone-app-image

Step 1:Setting up the Workspace

Okay! First step is to set up the workspace.Open Photoshop (For your help, I`m using Adobe Photoshop CS5) and create a new canvas of 1300×950 px.

setting-up-the-workspace

The layout will be 840px wide.Now, draw 2 vertical guides at 230px and 1070px to delimit the layout,like in the image.

blank-canvas

Step 2: Creating the background

I`m going to add a gradient to the background and after, I`ll add some noise to it to make it rough.

Create a new layer and add to it a gradient like in the image below:

background-gradient-overlay

We can`t add noise to the layer because it has blending options applied.We should have a stand alone layer to do that.Create a new layer and merge it with the first layer.Now we have a stand alone layer which supports the noise effect and which has the gradient incorporated.

04-iphone-layer

Now select the last layer and add it an uniform noise of 1.5% (Filter->Noise->Add Noise)

background-noise

You should obtain something like this:

05-background-image

Step 3: Creating the header

Select the Rectangle Tool (U) and draw at the top of the canvas a rectangle with the height of 50px and wide of 1300px.After that, apply to it some blending options like Gradient Overlay and Drop Shadow:

header-blending-options

header-drop-shadow

Now, under the top-bar add a white horizontal line of 1px to create a deeper effect between the header and the background.

header

Over the header bar, draw another rectangle with the height of 25px and the width of 1300px also and make sure to be white.Change its opacity to 7-10% to obtain an Apple Iphone transparency effect!

apple-transparency-effect

In the right side of the top-bar, we`ll add the navigation menu.Add some text buttons.As shown in the image below, I draw a white rectangle using the Rounded Rectangle Tool with a Radius of 5px and made the “Home” text black.Then I added some blending options to the button to make it look good.The font used is Myriad Pro, Semibold, 14px.

header-button

On the left side of the header, add a logo using some text…I used some dummy text: My Iphone App. I used Myriad Pro as font and added the same blending options which the button has.

So far, the image looks good.

final-header

Step 4: Adding a big Iphone

I`m going to add a brand new Iphone 4G from our friends from DeviantArt.

Search for “Iphone 4 PSD” and you should have a list there.If you want the link, click here.

After I downloaded the Iphone, I resized it to 60% and hided the layer called “Reflection”.I allowed myself to change the image from the Iphone screen with a print screen of my website. :)

adding-iphone-image

Step 5: Adding some text

I added some text on the right side of the canvas using Myriad Pro font and different fonts and colors.

iphone-details

We are at the half of the tutorial and the image looks like this:

middle-phase

Step 6: Creating an Iphone navigation slider

Ok, this is a nice step.I`m gonna show you how to create a beautiful navigation like in the fancy Iphone Apps.

Select the Rounded Rectangle Tool and draw a rectangle with a Radius of 7px under the Iphone.

iphone-nav-step1

Now add the next blending options:

iphone-nav-gradient-overlay

iphone-nav-inner-shadow

iphone-nav-stroke

Voila!

voila

Now add numbers from 1 to 4 like in the image:

numbers

You noticed that the number “2” is black.Is a reason for that.This will be the active button.

Select the Rounded Rectangle Tool(U) and draw a small rectangle under the number “2”.Add the next blending options to it:

button-gradient

button-shadow

The small iphone nav looks like this:

final-iphone-nav

Step 7

Step number 7 is about creating 2 buttons which every Iphone App Website needs: The “Buy this app from Apple” and “Live Demo of the app”.

Select the Rounded Rectangle Tool (U) and with a Radius of 7px, draw a small rectangle under the text.

available-now

Add to it the next blending options:

apple-blend

small-stroke

Download this Iphone small icon from IconFinder, make it white and add it to the button.

Then write inside the button with Myriad Pro font “Available now on the Apple Store” ! The button is ready to be clicked!

available-now-on-the-apple-store

Duplicate this button and align the duplicated one near to the original.Change the text with “View a Live Demo” or something like this and create a small “Play” button using the Custom Shape Tool(U).

watch-the-live-demo

We`re almost there.We have to build a footer and the layout is ready.Take a look at what we`ve done till now:

preview

Step 8: Creating the footer background:

Select the Rectangle tool and draw a big rectangle at the bottom of the canvas.Add it the same gradient used at the “Apple Store” button.

footer-bg

The footer looks sleek now but we want to make it look rough like the background. For this, you have to repeat the Add Noise process used when we made the background: Create a new layer and merge it with the footer layer and apply to the new layer the Noise filter (Filter->Noise->Add Noise – 1.5%).You should obtain the next effect:

rough-effect

At the top of the footer draw 2 lines:a white line and a black line and but the white line just above the white line to create a nice effect.

zoom-footer

The background of the footer is finished and looks like this:

footer-ready-made

Step 9: Creating a “Subscribe” box

Now that the footer background is ready, I want to show you how to create an Apple inspired “Subscribe” box.

Select the Rounded Rectangle Tool and with a Radius of 7px draw a rectangle like in the image below:

app-updates-bg

Now add the next blending options to the box:

box-drop-shadow

box-gradient-overlay

box-stroke

The box should look like this:

box-middle

Inside the box, we`ll create 2 fields and a submit button.Let`s start with the fields.Select the Rounded Rectangle Tool again and draw a small rectangle inside the box:

form-inside

Stylize the field by adding the next blending options to it:

field-inner-shadow

field-color

field-stroke

Duplicate the field obtained and move it under the first like in the image.

fields-ready

The fields are ready.To make the “Submit” button, duplicate one more time a field and place it under them.Clear the styles of the layer (Right Click on the layer and select “Clear Layer Style”) and add the next blending options to it:

gradient-for-a-button

stroke

The button is almost ready.

the-button-is-ready

I wanted to add to the button a shine effect.For this, I selected the layer(Ctrl+Click on the layer) and with the Rectangular Marquee Tool(M) I subtracted the bottom half of the selection.Then I created a new layer and filled the remaining selection with white.After that, I reduced the opacity to 10% and obtained a nice glass effect for the button.Is the same procedure used at the header background.

Finally, add some text to finish the box. The result looks nice,don`t you think?

finished-box

Step 10: Finishing the footer

Now with some text, populate the left side of the footer. I thought to make this by creating a “Features” area, with the features of the app.The small icons used are from the PixeloPhilia Icon Set, a beautiful set of free icons.

Don`t forget to add your copyright details at the bottom of the layer.

The footer is ready!

footer-done

The final image is ready too! This was a nice tutorial and made me pleasure to write it for you.I hope you read it with pleasure too!Take a look at the final layout below:

Click image for full view.

my-iphone-app-image

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.