How To Design An iPhone App Website Layout

This tutorial will help you to create a website to promote an IPhone/IPad application. During this tutorial, you will learn to create a layout resulting of a mix between a modern design and an effect of illustration (not far away from cartoons). Perfect for all uses around web applications and IPhones, this template will be useful too for other themes like: portfolios, eco-websites, etc.

I used for this tutorial, the Vector pack Landscape from grafpedia.com, as well as some icons I found on this page, or some illustrations coming from the website http://culturedcode.com/things/iphone/. Then, you will not find these pictures in the psd file.

Before to start this Photoshop tutorial, have a look on the final result below.

We can now start the tutorial. For all of you publishing the link of this page on their Twitter, Facebook or StumbleUppon to help us to promote it, I thank you a lot

STEP 1 Create a document

Open Photoshop, then go to menu File> New and enter the values: Width 1 000 and Height 1 200px.

Press the OK key. Your new picture appears on screen. Be sure the layers windows is opened (to open it, go to menu Window>Layers).

Create a new layer and name it the bg_header. Set the foreground colour to this blue #3288c3. Use the Rectangular Marquee Toll (M) to create a selection with a size of 1000x450px, then use the Paint Bucket Tool (G) to fill it.

Add a gradient on this blue block, to do it, go to menu Layer>Layer style> Gradient Overlay.

STEP 2 Create the first menu

A menu including a logo and a set of links, will take place on the top of the template. A shadow will be added under it. To create the shadow, create first a new layer and name it shadow. Set the the foreground colour to the black, then select the Gradient Overlay tool (G) (and from the Selector, choice the Foreground Gradient -> Transparent). Now create on your picture, a black gradient overlay from the top to the bottom (see the picture below).

To finish it, add a layer mask on this layer to shadow the left and right sides. Go to menu Layer>Layer Mask>Reveal all. Create now a gradient overlay on the right and on the left.

Create a new layer and name it bg . Use the Rectangular Marquee Toll (M) to create a selection defined with values 1000 x 40px. Fill this selection with the white colour. To finish, reduce the opacity to 40%.

Add a layer Mask on the layer and shadow the top of the menu.

Regarding the logo, type the name of your website (I used the Androgyne Font). Then, add on this text three layer styles : Shadow, internal shadow, gradient overlay.,

To finish the menu, add some links on the right (Font used : Helvetica). For the active link, I just used a rounded rectangle with the blue colour #3d85c1.

See below the final result of the menu.

STEP 3 Create the Header

Create first a new group and name it the header. Use the Text Tool (T) to add the main slogan of the website. In my example, I used the Androgyne Font.

To give a style to the text, reduce the opacity of the second layer to 60%. For the title, add same layer styles as them added on the logo. Step to the button creation. To doo it, create a new group and name it button. Use now the Rounded Rectangle Tool (U) to create the shape of your button (use a radius of 6px).

I added at least 5 layer styles: shadow, internal shadow, internal glow, gradient overlay and outline.

Use now the Ellipse Tool (U) to create a round over the button (do not forget to keep the Uppercase key pressed to create a perfect round).

Add two layer styles on your round, a shadow and an internal shadow.

To finish, use the Custom Shape tool (U) to create a little arrow in the centre of the round. A a shadow on the arrow.

To finish the button, use the Text Tool (T) to add the title. Add now an outline and a shadow on the text (menu Layer>Layer style>Outline and Shadow).

STEP 4 The clouds

To create the clouds, start to download the vector pack available on this page :
Then import the clouds one by one to generate a complete line.

Join all layers into one group (and name this group clouds). Add a blending mode on the group. To finish this step, use the Rectangular Marquee Tool (M) and the Paint Bucket Tool (B) to cut the clouds (see picture below).

Download the UI iphone Retina kit available on this page http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/. Open now the psd file and slide and drop the document regarding the IPhone. Duplicate the group and reduce the Iphone size to a value of 5%. Use the Move Tool (V) to place it on the left of the first one.

Use the Text Tool (T) to add a description of your software, set the colour text of the end to this blue #2a638c and import an arrow (by my side, I often use this website resources: Websitebullets.

STEP 5 Some touches

Go back to the Landscape vector file (already downloaded on this page). Copy and paste the plane on the top right of your slogan.

Then, the birds.

To finish the carousel, create a links list using the Text Tool (T). Regarding the active link, just create a rounded rectangle (use the Rounded Rectangle Tool (U) with a radius of 6px).

STEP 6 The contents

The page is composed with two blocks: the first block with more information about the software ((screenshot and text) and the second with links for downloads.
Regarding the first block, create a new group and name it the details. Create anew layer and a selection of 880x220px. Fill this selection with white colour. Apply same method to the second block but with this colour #4f9aca. Move your selection of 2px to the bottom and press the Del key. It will keep only a thin blue border.

Create a new group and name it the box1. Create inside a rounded rectangle with a size of 150x80px with same blue colour used previously.

Add inside your picture.

Duplicate this group 5 times and place the blocks with a space of 20px between each of them. To simulate the hover effect, set the colour of the rectangle one of the blocks to this orange: #ff7f2a. Then, create a new layer, retrieve your picture selection. Fill it with the black colour and reduce opacity to 40%.

To finish the step regarding the blocks, import the zoom.psd icon file available from the pack of this tutorial (the blue link on the bottom page) and place it over your block .

Use the Text Tool (T) to add a title on the right of the 6 screenshots.

Apply same method to the two small texts under. Regarding the icons, they come form the here page:: http://www.iconfinder.com/search/?q=iconset%3Afatcow

STEP 7 The second block of contents

Regarding the second block, create a new group. Do same thing as what done for the first block, but a difference, placing the blue border on the bottom (and not on the top as done for the first block). Use the Text Tool (T) to add hypertext links (font helvetica 12px). Create a blue rectangle under the active link.

Create now a blue button on the left side of the block. To create this button, use same styles than the styles used to create the orange button from the header (switch colour from the orange to the blue).

Use again the Text Tool (T) to add a title, a chapter and an orange link.

STEP 8 Import the landscape

To create the landscape, nothing can be easier than the landscape vector ! Open the landscape file under Illustrator, then copy and paste the hill (from Illustrator to Photoshop). Enjoy making your own landscape, importing flowers, trees, clouds, etc...

Create a new layer and put it under the layer named Landscape. Set the foreground colour to the pale-blue #d1f3ff, select the Gradient Tool (G) (foreground -> transparent) and create a gradient from the bottom to the top.

Add now a button Available on appstore. To create this button, I used this free file: http://corrupteddevelopment.com/customizable-app-store-download-buttons/ and I only changed the gradient and outline colours.

To finish, create a new layer, and place it this time over the landscape layers. Use the Rectangular Marquee Tool (M) to create an active selection with a size of 1000x45px. Fill your selection with this green colour #137109 and go to menu Layer> Layer Style> Internal shadow. Use now the Text Tool (T) to add the Copyright.

Go now to the website iconfinder.com to retrieve some networks icons and import them into you Photoshop document. Place these icons on the right side of the footer and add a colour overlay into each icon (menu Layer>Layer Style>Colour overlay).

Here is the final result of your template :

And without the guides: