Tutorial Lounge [Learn Step bu step]

Create Simple and Functional Promotional Mobile Apps Landing Page

Posted: 15 Nov 2012 01:37 PM PST

Hello All, nice to see you again. In this occasion i will teach you how to create simple and functional promotional mobile apps landing page. In this tutorial , we are going create landing page for restaurant apps. This tutorial supported by Mr Amit Kumar Rai. He is very kind to allow me use his awesome restaurant apps screenshot picture to complete this tutorial. Ok guys, lets begin

Tutorial Details

Program: Adobe Photoshop
Version: CS 6
Difficulty: Beginner, Intermediate
Estimated Completion Time: 2 Hours

Tutorial Assets

The following assets were used during the production of this tutorial.

960 gs PSD template download here
shoping cart icon from premiumpixels
freebies black and white minimal social icon from onextrapixel
restaurant apps screenshot from Mr Amit Kumar Rai.
Note : i personaly ask permit to use this image, for this tutorial only. you can use this image only for practice this tutorial. if you want use this image for other purpose (outside to practice this tutorial), please contact the owner to ask permit.
Free icon set from brankic1979 icon

960 Grid System

In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then go to the “Photoshop” folder (inside “templates”). There you will find all the .PSD files. For this web design we will use the 12 columns grid.

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

Step 1 – Setting up the document and creating the background

Open the “960_grid_12_col .psd” file in Photoshop. We need more space to work with, so we will have to increase the canvas size. Go to Image > Canvas Size (Ctrl/Cmd + Alt/Option + C). Set the width to 1280px and the height to 1800px. Then click on the upper middle anchor point. That is the point the image will expand from.

Layer > New Fill Layer > Solid Color and set the color to #498c87. Name this layer “body_bg”.

Step 2 – Creating header background

to make easy , you can create new group first, select Layer > New > Group, name it ‘header_bg’.

Inside ‘header_bg’ group, Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1280px , height 100px, set the color to #3c736f.Change this layer name to bg_header(double click to this layer to change layer name)

the result should like this

then apply this blending option bellow

the result should like this

Step 3 – Creating header separate line

Select line tool , draw a line , width 1280px height 1px, double click layer name in layer window, set layer name to ‘dev-top’.

the result looks like bellow

then apply this blending option bellow

the result looks like bellow

Step 4 – Creating Logo

Create new group first, select Layer > New > Group, name it ‘header_bg’.
For logo , we are going to use “muffin” icon from brankic1979. After download the package, extract it and open brankic1979-icon-set.psd. Select “muffin” layer, click and drag it to your document, place it inside ‘logo‘ group

Apply this blending option bellow

the result should like this

Next , we are going to write apps name. Select Horizontal type tool(T), choose lobster font, set size to 60px, and set color to #ffffff, then type ‘resto-apps‘.

After that apply this blending option bellow

you will get result like this

Step 5 – Creating apps motto

First, create new group,select Layer > New > Group, name it ‘slogan’.
Select Horizontal type tool(T), choose Pt sans Narrow font, set to regular, set size to 24px, set color to #ffffff. For example i will write “your Mobile apps slogan here”.

Then apply this blending option bellow

so far, you will get result like bellow

Step 6 – Creating apps promo area background

Next we are going to create promo area section. this area will be height 452px. but we are not going to create new shape, because this area will be covered by body_bg layer. we just only need to create new group,select Layer > New > Group, name it ‘promo-area’.

Step 7 – Adding light in promo area

Next, we are going to add light effect in promo area. Create ellipse shape by select ellipse tool (U), set color to #ffffff.

Convert it to smart object by right click this layer, select ‘Convert to Smart Object‘.

Next, select Filter > Blur > Gaussian Blur, set radius to 43,0 px.

After that, set opacity layer value to 57%, and set Fill layer value to 58%

you will get result looks like bellow

Step 8 – Adding Apps promotional image

For promotional image, you can take iphone model from here, then choose 2 images of restaurant apps screenshot. put it inside the iphone model , adjust it until you get fit proportion.

Step 9 – Adding Apps promotional title and text

you can add title and text for promotional looks like bellow

Step 10 – creating “try it” button

Now,we are going to create “try it” button. For the first, create new group, select Layer > New > Group, name it ‘get-trial’. Next, create Rounded rectangle shape by select Rounded Rectangle tool (U), set height to 50px, width 220px, set color value to #394159, then set radius value to 5px.

Apply this blending option setting bellow to get button effect

the result looks like bellow

Now, add download icon, we are going to use “download” icon from brankic1979. Select “download” layer, click and drag it to your document, place it inside ‘get-trial‘ group

Next, adding separated line for icon and text in button. Create new vertical line, select line tool (U), create vertical line, set height to 48 px, width 1 px, set color to #394159.

After that apply this blending option bellow

Next, type text for try it button, in here i am going to type “try it for 10 days. Set font type to Arial, set weight to bold, and set color to #ffffff. After that, Apply this blending option bellow.

you will get the result looks like bellow

Step 11 – creating “buy it” button

Now,we are going to create “buy it” button. For the first, create new group, select Layer > New > Group, name it ‘buyit’. Next, create Rounded rectangle shape by select Rounded Rectangle tool (U), set height to 50px, width 220px, set color value to #f16a41, then set radius value to 5px.

Apply this blending option setting bellow to get button effect

you will get result looks like bellow

Now, add shopping cart icon, we are going to use “cart4” icon from premiumpixel. Select “cart4″ layer, click and drag it to your document, place it inside ‘buyit‘ group

Next, adding separated line for icon and text in button. Create new vertical line, select line tool (U), create vertical line, set height to 48 px, width 1 px, set color to #d95f3b.

After that apply this blending option bellow

Next, type text for “buyit” button, in here i’m going to type “buy it in appstore“. Set font type to Arial, set weight to bold, and set color to #ffffff.

After that, Apply this blending option bellow.

we will get result looks like this

Step 12 – creating ‘about mobile apps’ background

Now,we are going to create ‘about mobile apps‘ background. For the first, to easy organize, create new group, select Layer > New > Group, name it ‘about-apps‘. Next, inside ‘about-apps’ group, create new shape, select rectangle tool (U), draw shape, set height to 311px, and width 1280px, set color to #3c736f. Set layer name to bg-about-apps.

After that, apply blending option bellow

we will get result looks like bellow

Step 13 – creating separate line for mobile apps area

Next, we are going to create 2 lines for separate ‘about-apps’ area with other area. Create new horizontal line by select Line Tool (U), draw horizontal line, set height to 1px, set width to 1280px, and set color to #284c4a.

After that, apply blending option setting bellow

Now duplicate line that have we made before, place it into bottom of ‘about-apps‘ area, looks like bellow

Step 14 – creating mobile apps about text

next, we are going to add title and text about this apps, you can do like image bellow

Step 15 – creating mobile apps features text

Next, we are going to write some apps features list. To easy organize, create new group, select Layer > New > Group, name it ‘features-apps‘.

Now , add text for title, in here we are going to type “MobApps Features“, text title style same with step 14

In this step, we are going to use “check” icon from brankic1979. Select “check” layer, click and drag it to your document, place it inside ‘features-apps‘ group.

then type some text for features list

duplicate check shape and features text, so you will get result looks like bellow

Step 16 – creating mobile apps video demo area

for this step, first we are going to create new group to easy for organizing. Select Layer > New > Group, name it ‘demo-apps’.

Step 17 – creating mobile apps video demo title

next, create title for video apps demo. Select Horizontal type tool (T), type ‘MobApps in action, set font type to ‘Pt Sans Narrow‘, set size to 30px, set color to #ffffff

then apply this blending option bellow.

we will get result looks like bellow

Step 18 – creating mobile apps video image

now, we are going to create video apps demo. For easy organizing purpose, we create new group first. Create new group, select Layer > New > Group, name it ‘demo-apps’.

Next, create frame for video demo. Create new shape by select rectangle tool (U), draw rectangle shape, set height to 243px, set width to 156px, and set color to #2e5956.

After that, apply this option bellow

Next, we are going to create video demo image. first , get youtube frame image here. after download, place this file , by select File > Place, Place it inside ‘demo-apps’ group. Next, Adjust it inside frame that we have made before, looks like image bellow

Step 19 – creating mobile apps screenshot area

Next we are going to create mobile apps screenshot area. To easy organizing, we create new group first. Create new group, select Layer > New > Group, name it ‘screenshot’.

Step 20 – creating mobile apps screenshot image

First, create new group by select Layer > New > Group, name it ‘ss‘.

Inside ‘ss’ group, draw new shape by select rectangle tool (U), draw rectangle shape , set height 149px, set width 300px, set color to #2e5956.

then apply this blending option setting bellow.

we will get result looks like bellow

Next , create rectangle shape again by select rectangle tool (U), draw rectangle shape, set width 277px, set height to 125px, set color to #ffffff.

Put image from restaurant apps, set to proper position and select Layer > Create Clipping Mask (Ctrl + Alt + G).

you will get result looks like bellow

Add some text for title and preface for screenshot area

After that, you can duplicate ‘ss’ group, right click ‘ss’ group, select duplicate group. Do it again, you will get 2 copies of ‘ss’ group, adjust each copied group like image bellow

Step 21 – creating testimonial area background

Next, we are going to create testimonial area. For making easy to organize, we create group first.Create new group by select Layer > New > Group, name it ‘testimonial’.

Inside ‘testimonial’ group, create new shape for background. Select Rectangle Tool (U), draw rectangle shape, set height 200px, set width to 1280px, set color to #3c736f.

After that, apply this blending option setting bellow

you will get result looks like bellow

Step 22 – creating line to separate testimonial area

Next, create new horizontal line by select Line Tool (U), set width to 1280px, set height to 1px, set color to #284c4a.

then apply this blending option setting bellow

Now, duplicate line that we have made before, place it to bottom of testimonial area. you should get result looks like bellow

Step 23 – adding quotation marks for testimonial

Now, we are going to add huge quotation marks for testimonial background. Select Horizontal type tools (T), type quotation marks (“), set font to arial, set font size to 153px, set color to #284c4a. Adjust the position , you should get result looks like bellow

Next, we add text for testimonial and person who gives testimonial. you can write it looks like image bellow

Step 24 – creating about apps area

Now, we are going work in about apps area. To easy organize, we create new group for ‘about’ area. create new group by select Layer > New > Group, name it ‘about’.

Step 25 – creating author apps title text

Before, we create apps title text , we create new group for organize it. inside ‘about’ group, create new group by select Layer > New > Group, name it ‘author’.

Next , we are going to create title for author, select horizontal type tool (T), in this expample , i type “MobApps Author”. set font to ‘PT Sans Narrow’, set font size to 30px, and set color to #ffffff.

then apply this blending option setting bellow

the result will look like bellow

Step 26 – creating author apps profile picture

Now, we are going to create author apps profile picture. we will use restaurant apps logo for it. for the first, we are going to create frame for image first. Create new shape by select Rectangle Tool(U), draw rectangle , set height to 76 px ,width 80px,set color to #2e5956, and change layer name to ‘bg-author-img’.

After that, apply this blending option setting bellow

the result will look like bellow

Create new shape by select Rectangle Tool(U), draw rectangle , set height to 64 px ,width 69px, and set color to #ffffff. Adjust position of this shape inside ‘bg-author-img’.

next, place one of screenshot app restaurant inside ‘about’ group, adjust the dimension, then create clipping mask, by select Layer > Create Clipping Mask (Ctrl + Alt + G).

the result will look like bellow

Next , add text for title and bio for author. text and style you can see in the image bellow

the result will look like bellow

Step 27 – creating support apps title and text

Now, we are going work in support area. to easy organizing purpose, we create new group by select Layer > New > Group, name it ‘support’

Next , add text for title and text for support purpose. text and style you can see in the image bellow

Step 28 – adding social media icon for apps support contact

In this step , we are going to use facebook, twitter and email icon from Black and white social icon pack by onetraxpixel . After download the package, extract it and open icons_32x32px folder. in here, place image called fb_1.png, email.png, and twitter_1.png, place it inside ‘support’ group.

Apply this layer blending option setting bellow to each image

After that, arrange the social media images looks like image bellow

Step 29 – Creating “Stay up to date” title and text

Now, we are going work in update area. to easy organizing purpose, we create new group by select Layer > New > Group, name it ‘get-update’

Next , add text for title and text for ‘get-update’ text description. text and style you can see in the image bellow

Step 30 – Creating email subcribe form

next, we are going to create email subscribe form. select rounded rectangle tool(U), set radius to 5px, then draw new shape , set height to 40px, set width to 300px, set color to #ffffff.

After that apply this blending option setting bellow

inside email subscribe form, type “write your email here“, set font to ‘PT Sans Narrow‘, set size to 14px, set color to #3c736f, you will get result looks like bellow

Step 31 – Creating ‘send’ button

Next, we are going to create ‘send’ button. To create send button, select Rounded Rectangle Tool(U), set radius to 5px. Draw shape, set height to 40px, width 90px, and color to #3c736f.

After that apply blending option setting bellow

After that, type ‘send’ text, set font to PT Sans Narrow, set size to 18px, set color to #ffffff. Adjust it in the middle of button

apply this blending option setting bellow

you will get result looks like bellow

Step 32 – Creating footer background and separated line

Now, we are going working on footer area. to easy organize, we create new group first by select Layer > New > Group, name it ‘footer-bottom’.

Inside ‘footer-bottom‘ group, create new shape by select rectangle tool (U),create rectangle shape, set height to 90px, set width to 1280px, set color to #3c736f