Design a Clean Mobile App Website in Photoshop



More and more mobile apps being created everyday. If you want to make more sales and attract more clients you need an appealing and professional looking website for your app. Today I would like to show you how to create a clean mobile app website in Photoshop.

You will see how to create a detailed background, trendy call to action buttons and how to stylize web typography. Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
webdesignfan-app.zip (1,7 MB)

Tutorial Resources

Fonts: Aller and Arial

Icons: Vector Social Media Icons

iPhone: Freebie: Vector iPhone 4 PSD File

Patterns: 20 Repeatable Pixel Patterns

Preview

Click on the image below to see the work in full scale.

webdesignfan app preview

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 1200 px by 920 px with a white background.

step01 create new document

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 200 px and 1000 px, horizontal at 60 px, 550 px and 610 px.

step02 add guidelines

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and set foreground color to grey (#E3E5E9) and fill your background with it by clicking Alt+Backspace.

step03 fill background

Now pick Rectangle Tool (U) and draw a 1200 px wide and 310 px height rectangle between the last horizontal guideline and bottom. An example show on the picture below.

step03 draw rectangle

Click right mouse button on rectangle shape layer and select Blending Options… after that apply Gradient Overlay option as show on the example below.

step03 gradient overlay

Click right mouse button again and select Convert to Smart Object. After that go to Filter > Noise > Add Noise… then set Amount to 1%, Distribution set to Uniform and check Monochromatic if unchecked.

step03 add noise

step03 noise

Download pixel patterns from 20 Repeatable Pixel Patterns and load them into your Photoshop. After that create a new layer (Shift+Ctrl+N) and name it “Pattern”. After that choose Paint Bucket Tool (G), switch to Pattern and pick pixelpattern3 from just downloaded set. Fill background with selected pattern by clicking Alt+Backspace.

step03 pattern

Now reduce layer “Pattern” opacity to 8%. An example shown on the picture below.

step03 pattern opacity

Change foreground color to (#2E6692) and create a new layer (Shift+Ctrl+N) called “Blue line”. Then select Pencil Tool (B) and with 1 px brush draw horizontal line above the horizontal guideline at the bottom.

step03 blue line

Now change foreground color to (#649FCE) and create a new layer (Shift+Ctrl+N) called “Bright line”. Now draw another horizontal 1 px line and place it below the guideline. An example shown on the picture below.

step03 bright line

Step 4: Header

Now minimize “Background” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. After that pick Horizontal Type Tool (T), choose 42 pt size Aller Display font and write your app title.

step04 app title

Now click right mouse button on app title layer and select Blending Options… after that apply following options.

step04 app title drop shadow

step04 app title inner shadow

step04 app title gradient overlay

step04 app title with style

Pick Horizontal Type Tool (T), choose 18 pt size Aller font and write first line of your app description.

step04 app description

Now click right mouse button on just created text layer and select Blending Options… after that apply following options.

step04 app description drop shadow

step04 app description gradient overlay

step04 app description with style

Now write second line of your app description and apply the same Blending Options as used for the first line.

step04 app full description

Step 5: Body

Now minimize “Header” group by clicking a small grey arrow next to the group name and create a new group (Layer > New > Group…) titled “Body”. Then go to Psdtuts+ and download Freebie: Vector iPhone 4 PSD File. Open vector iPhone in Photoshop and expand “Phones” group. After that click right mouse button on “FRONT” group and select Merge Group. Finally drag layer titled “FRONT” to your app design document and place inside the “Body” group.

step05 vector iphone

Duplicate iPhone layer by clicking Ctrl+J and after that click Ctrl+T and set width (W) and height (H) to 90%. Then move smaller iPhone to the left as shown on the picture below.

step05 smaller iphone

Now pick Custom Shape Tool (U) and load “Shapes” set from the list. Then choose “5 point star” shape and draw 23×23 px size star.

step05 star shape

Now find your app title layer (in our case it’s WEBDESIGNFAN APP layer in “Header” group) and click right mouse button on it, after that select Copy Layer Style. Now go back and click right mouse button on star shape layer and select Paste Layer Style.

step05 star shape with style

Change foreground color to dark grey (#333333) and choose Horizontal Type Tool (T). Select 16 pt size Arial font and write something about your app.

step05 app feature

Now duplicate star shapes by clicking Ctrl+J and write more features about your app.

step05 more features

Create a new layer (Shift+Ctrl+N) titled “Button”, then pick Rounded Rectangle Tool (U) with 5 px of radius. After that draw 180×60 px size rounded rectangle.

step05 rounded rectangle

Now click right mouse button on rounded rectangle layer and select Blending Options… then apply following option.

step05 rounded rectangle gradient overlay

Select Horizontal Type Tool (T), choose Aller Display font and set font size to 18 pt. Then write “BUY IT NOW” on a button.

step05 buy it now

Click right mouse button on “BUY IT NOW” text layer and select Blending Options… after that apply following option.

step05 buy it now gradient overlay

step05 buy it now with style

Now duplicate Ctrl+J “Button” layer and text layer. After that move them to the right and change text to “TAKE A TOUR”.

step05 duplicate button

Now set foreground color to black (#000000) and create a new layer (Shift+Ctrl+N) titled “Shadow”. After that move “Shadow” layer beneath all the other layers in “Body” group. Pick Ellipse Tool (U) and draw 160×10 px size ellipse under the first button.

step05 draw an ellipse

Now go to Filter > Blur > Gaussian Blur… and set Radius to 5 pixels. An example shown on the picture below.

step05 blur

Reduce “Shadow” layer’s Opacity to 10%.

step05 reduce opacity2

Now duplicate “Shadow” layer by clicking Ctrl+J and move duplicated layers below the second button and below the iPhones. An example shown on the picture below.

step05 duplicate shadows

Step 6: Footer

Now minimize “Body” group by clicking a small grey arrow next to the group name and create a new group (Layer > New > Group…) titled “Footer”. Then set foreground color to black (#000000) and grab Rounded Rectangle Tool (U), set Radius to 5 px and draw 800×140 px size rounded rectangle shape between the vertical guidelines.

step06 rounded rectangle

Click right mouse button on rounded rectangle shape layer and select Blending Options… then apply following option.

step06 rounded rectangle blending options

Now reduce rounded rectangle shape layer’s Opacity to 20%.

step06 reduce opacity

Create a new layer (Shift+Ctrl+N) and name it “Description” and place it above the rounded rectangle shape layer. After that change foreground color to (#D2D4D9) and choose Horizontal Type Tool (T), select Arial font, set font size to 15 px and write few descriptive sentences about your app.

step06 description

Now click right mouse button on “Description” layer and select Blending Options… and apply following option.

step06 description blending options

Create a new layer (Shift+Ctrl+N) called “Copyright”. Then choose Horizontal Type Tool (T), select Arial font, set font size to 14 px and write your copyright and additional information. After that apply the same blending option as used for “Description” layer.

step06 copyright

Finally, download Vector Social Media Icons and select following 16 px size icons: twitter.png, social-rss.png and facebook.png. Drag them to Photoshop window and using Move Tool (V) drag them into your “Footer” group and place as shown on the example below.

step06 social icons

Congratulations! Your mobile app website design is finally completed.

Final Result

Click on the image below to see the work in full scale.

webdesignfan app preview

Are you worried about prep MB7-227? Check out our latest MB7-222 resources for 70-576 and for practice with definite guarantee of MB6-284.



Comments
  1. Great post, your tutorials easy to follow and there’s some great points in there. I love the effect you get from the repeating background.

    The overall finish it lovely and clean, my only criticism is it’s a little too clean – there’s no feature that stands out, makes it individual, you know what I mean?

  2. Nice article!!!! Thanks for sharing.

  3. Great tutorial! Thanks!

  4. Great tutorial. Thanks for sharing.

  5. Fayyaz Ahmed said:

    Great tutorial. Thanks for sharing. Great work!

  6. NameDesign Tutorial said:

    Great post. very easy explain every steps. Thanks for share this post.

  7. Nice and helpful post.

  8. Thanks a lot its very nice i will slice it and to HTML CSS and try to make it a full web design project with many pages