Mobile App’s Layout #2

hello everybody welcome to another tutorial. In today’s tutorial i’ll be showing you how to create an apple theme mobile app layout.

 

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

Lets Get Started

Create a new document 1200 x 1200 pixels with any color background. Change your foreground color to #f3f3f2 and background color to #d2d2d2 then select the gradient tool with a reflected gradient.

Mobile App Layout #2

Drag the reflected gradient over your canvas starting from about 400 pixels down from the top of your canvas. Your looking to get something like this.

Mobile App Layout #2

Creating The Navigation

Select the rounded rectangle tool from the menu then change the radius of the rectangle to 10px (should be 10px by default).

Mobile App Layout #2

Drag out a rectangle on the right side of the canvas. The rectangle should be quite smaller than your average navigation.

Mobile App Layout #2

Once you’ve created the rectangle add the following layer styles.

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

You should have something like this.

Mobile App Layout #2

Inside the navigation bar add your textual links using the color #676767. Leave the first link set to the color white.

Mobile App Layout #2

Now using the rounded rectangle with a radius of 5px create a rectangle around the first link. Fill the rectangle in the color #8f8f8f and make sure the layer is underneath your text layer.

Once you’ve created the rectangle add a drop shadow using the settings below.

Mobile App Layout #2

You should have something like this.

Mobile App Layout #2

Creating The Website Title

On the left side of the canvas add your website title using the text tool. Once you’ve add the text add the following layer styles to the text layer.

Mobile App Layout #2

Mobile App Layout #2

You should have something like this.

Mobile App Layout #2

Adding The Iphone Information Area

Download the 3G/3GS iphone PSD file from the resources list then open up the PSD file in photoshop. In the layers window find the two layers “front” and “back black” once you’ve found the layers drag the two layers into your layers window.

Expand the “front” layer to reveal the rest of the layers inside the group. Once expanded find the reflection layer then hide it by clicking the little box next to the layer.

Mobile App Layout #2

Now resize the all the layers in the “front” group by highlighting the group in the layers window and pressing “CTRL + T” on the keyboard. Resize the iphone so it fits underneath the title text.

Mobile App Layout #2

Now resize and rotate the other iphone making it much smaller. Place the iphone behind the bigger one.

Mobile App Layout #2

Adding The Iphone App Icons

Download your desired iphone icons using the icons from the resources list. Place each icon in a list next to the big iphone underneath the navigation.

Mobile App Layout #2

Next to each icon add some example text.

Mobile App Layout #2

Creating The AppStore Button

Using the rounded rectangle tool with a radius of 10px, create a small rectangle underneath your apps list.

Mobile App Layout #2

Now add the following layer styles to your rectangle.

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

Mobile App Layout #2

You should have something like this.

Mobile App Layout #2

Were now going to make a custom diagonal pattern, create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel black brush and duplicate the image below.

Mobile App Layout #2

Once you’ve created the custom pattern go to “Edit > Define Pattern”, give your pattern a name and save it.

Head back to your original canvas and load a selection around your rectangle, to make a selection highlight the layer and go to “Select > Load Selection”. Once you’ve loaded the selection select the paint bucket tool and change “Foreground” to “Pattern”.

Mobile App Layout #2

Fill the selection with your pattern on a new layer then set the layers opacity to 1%.

Mobile App Layout #2

Inside the rectangle add the iphone icon from the resources list then add the text “Available on the iphone AppStore” once you’ve added the text add the following layer styles.

Mobile App Layout #2

Mobile App Layout #2

You should have something like this.

Mobile App Layout #2

Creating The Content Area

Using the text tool add a content title underneath the big iphone, once you’ve added the text apply the following layer styles to it.

Mobile App Layout #2

Mobile App Layout #2

On the right side of the content title text create two 1 px lines on top of each other, color the top line in black and the bottom line in white then set the layers blend mode to “Overlay”.

Mobile App Layout #2

Underneath the title add some example text and a small image gallery using a small selection of images.

Mobile App Layout #2

Creating The Footer

Repeat the creation of the two 1px lines on top of each other only this time make the lines span the width of the canvas. Once you’ve created the lines add a layer mask to the layer and drag a reflected gradient from the middle of the line outwards. The line should blend in from each side.

Mobile App Layout #2

Finally add your footer text underneath the line.

That concludes this tutorial, hope you enjoyed the read. I’ll look forward to all your comments.