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)
webdesignfan-app.zip (1,7 MB)
Tutorial Resources
Fonts: Aller and Arial
Icons: Vector Social Media Icons
Patterns: 20 Repeatable Pixel Patterns
Preview
Click on the image below to see the work in full scale.
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.
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.
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.
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.
Click right mouse button on rectangle shape layer and select Blending Options… after that apply Gradient Overlay option as show on the example below.
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.
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.
Now reduce layer “Pattern” opacity to 8%. An example shown on the picture below.
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.
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.
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.
Now click right mouse button on app title layer and select Blending Options… after that apply following options.
Pick Horizontal Type Tool (T), choose 18 pt size Aller font and write first line of your app description.
Now click right mouse button on just created text layer and select Blending Options… after that apply following options.
Now write second line of your app description and apply the same Blending Options as used for the first line.
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.
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.
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.
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.
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.
Now duplicate star shapes by clicking Ctrl+J and write more features about your app.
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.
Now click right mouse button on rounded rectangle layer and select Blending Options… then apply following option.
Select Horizontal Type Tool (T), choose Aller Display font and set font size to 18 pt. Then write “BUY IT NOW” on a button.
Click right mouse button on “BUY IT NOW” text layer and select Blending Options… after that apply following option.
Now duplicate Ctrl+J “Button” layer and text layer. After that move them to the right and change text to “TAKE A TOUR”.
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.
Now go to Filter > Blur > Gaussian Blur… and set Radius to 5 pixels. An example shown on the picture below.
Reduce “Shadow” layer’s Opacity to 10%.
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.
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.
Click right mouse button on rounded rectangle shape layer and select Blending Options… then apply following option.
Now reduce rounded rectangle shape layer’s Opacity to 20%.
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.
Now click right mouse button on “Description” layer and select Blending Options… and apply following option.
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.
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.
Congratulations! Your mobile app website design is finally completed.
Final Result
Click on the image below to see the work in full scale.
