Create a one-page iPad/iPhone application web layout using Photoshop

In this tutorial I will show you how to create a one-page dark web layout for an iPad/iPhone application. For the iPad and iPhone images we will use vectors from theScreen Display Vectors Pack from Grafpedia. I will also show you how to add your own image on the iPad screen and how to create a shine effect for the header.

Source File

The source files of this tutorial are available for the Grafpedia VIP members to download. If you have a VIP account, log in and download the files. If you don’t have an account, you can easily become a VIP member and have access to thousands of design resources and one year of free updates for just $49. That’s right. You pay only $49 and during the next 12 months you will be able to download and use every single design resource that is released here on Grafpedia.

Preview

Resources

• Screen display vectors
• Icons set from Smashing Magazine

Introduction

In this tutorial we will use the 960 Grid System. Go ahead, download it and unzip the archive file. Then open the “960_grid_16_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder).

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

During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height. This .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1: Setting up the document

With the “960_grid_16_col.psd” file opened in Photoshop, go to Image > Canvas Size and set the width to 1200px and the height to 2500px. Unlock the Background layer by clicking on the lock icon from the top of the Layers panel. Change the color of the background to #333333.

Right-click on the Background layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the following image.

Step 2: Creating the header

Create a new group and name it "header". Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200 by 70 and the color #222222. Name this layer "header bg", double-click on it to open the Layer Style window and use the settings from the following image for Outer Glow.

Step 3

Select the Line Tool (U), set the weight to 1px, hold down the Shift key and create a horizontal line at the bottom of the header using the color #3a3a3a. Duplicate this line, (Ctrl/Cmd + J) change its color to #111111 and move it one pixel down using the Move Tool (V).

Step 4: Adding the name of the web layout

Select the Type Tool (T), activate the guides (Ctrl/Cmd + and write the name of your web layout in the left hand side of the header using the color #f7f6f6. Align your text layer to the grid, as you see in the following image. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 5: Adding the navigation menu items

Select the Type Tool (T) and write the name for your navigation menu items using the color #ffffff. The font that I used is Myriad Pro Regular with the size 17pt.

Step 6: Adding a shine effect to the header

Now we will create a shine effect for the header to match the style of the iPad and iPhone images that we will add later in this tutorial. Select the Rectangular Marquee Tool (M) and create a selection as you see in the following image. Create a new layer (Ctrl/Cmd + Shift + N) and name it "shine". Then drag a white-to-transparent gradient from the left hand side of the selection to the right hand side. Hit Ctrl/Cmd + D to deselect.

Name this layer "shine", right-click on it and select Convert to Smart Object. Go to Edit > Free Transform (Ctrl/Cmd + T), change the size of this layer, rotate it and put it above your header layer, as you see in the following image. Right-click on this layer and select Create Clipping Mask.

Step 7: Creating the "Features" area

Now we will create an area to present the features of our iPad/iPhone application. Create a new group and name it "Features". Create another group inside this one and name it "iPad".

Open the "display-screens.ai" file in Adobe Illustrator, select the iPad without the shine layer (the white gradient from the screen). Copy the iPad (Ctrl/Cmd + C), go back to Photoshop and paste it (Ctrl/Cmd + V) as a smart object. Then copy the white gradient from Illustrator and paste it in Photoshop. Name this layer "shine" and move it in the upper right corner of the screen. We needed the iPad and the gradient layer separated in Photoshop because we will put an image on the screen later and we need the gradient to be over the image.

Select the two layer ("iPad" and "shine") and use Free Transform (Ctrl/Cmd + T) to change their size. Activate the guides to help you position these layers as you see in the following image.

Double-click on the "iPad" layer to open the Layer Style window and use the settings from the following image for Outer Glow.

Step 8

Use the Rectangular Marquee Tool (M) to make a selection of the iPad’s screen. Then put the selected area into a new layer using the shortcut Ctrl/Cmd + J. Name this layer "image_holder". Add an image that you like in Photoshop and put it over the "image_holder" layer. Name this layer "image", right-click on it and select Create Clipping Mask to make it visible only on the screen.

Step 9: Adding the application’s features

Create a new group and name it "feature #1". Activate the guides (Ctrl/Cmd + , select the Rounded Rectangle Tool (U), set the radius to 4px and create a rounded rectangle with the dimensions 280px by 110px and the color #222222. Name this layer "bg" double-click on it to open the Layer Style window and use the settings from the following image.

Add some text inside this rectangle using the Type Tool (T) and the color #eeeeee.

Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 80px by 24px and the color #f0f0f0. Name this layer "button" and put it in the lower right corner of the dark gray rectangle. Double-click on this layer to open the Layer Style window and use the settings from the following image. Use the Type Tool (T) with the color #333333 to add some text on the button.

Download this set of icons and open in Photoshop one of them (I used the Photoshop icon). Move the image into your initial document using the Move Tool (V). Name this layer "icon" and put it in the upper left corner of the dark gray rectangle.

Step 10: Adding the other features

Duplicate the "feature #1" group four times (right-click on the group and select Duplicate) and arrange your features area items as you see in the following image. Change the text and the icon of each of the features areas.

Step 11: Adding a download button

Create a rounded rectangle with the dimensions 280px by 110px and the color #70c636. Name this layer "button" and put it in the lower right corner of the "features" area. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Select the Type Tool (T) and add some text on your button using the color #eeeeee.

Put these two layers inside a group (Ctrl/Cmd + G) and name it "download".

Step 12: Creating the content areas

Now we are going to add more content based on the features list that we added at the top of the web layout. Create a a new group (Layer > New > Group). I named my group "Tutorials" because in this area I will add more details regarding the tutorials.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 400px and the color #202020. Put this rectangle 60px underneath the features area.

Select the Line Tool (U), set the Weight to 1px and create a horizontal line at the top of the dark gray rectangle using the color #111111. Name this layer "1px line". Duplicate this line layer (Ctrl/Cmd + J), change its color to #3a3a3a and move it one pixel down.

Add two more line layers at the bottom of the dark gray rectangle using the same color. Make sure that the darker line is at the bottom and the brighter one is above it.

Step 13

Add some content inside the gray rectangle using the Type Tool (T) and the color #eeeeee. Then add some icons next to the headline of your content area.

Step 14

Add some images next to the block of text and align them to the grid, as you see below. The images form my web layout are 160px wide and 160px high. Add a double-border effect to these layers using the settings from the following image.

Step 15: Creating the "resources" content area

Create a new group and name it "resources". Add a block of text using the Type Tool (T) and the color #eeeeee. The text block should be 580px wide. Put the text in the right hand side of the layout. Add an icon from the icons pack you downloaded next to the headline. Then add two images in the left hand side of the layout, as you see below. This area does not need a background because we use the main noisy background of the entire layout.

Step 16

Create a new group for the next content area. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 270px and the color #202020. Add two thin lines at the top of this rectangle and two at the bottom, just like you did for the "tutorials" area.

Select the Type Tool (T) and add a block of text using the color #eeeeee. Then add an icon next to the headline of the text block.

Step 17

From the Illustrator file that you opened at the beginning of this tutorial, copy the iPhone and paste it as a smart object in Photoshop. Name this layer "iPhone" and use Free Transform (Ctrl/Cmd + T) to change its size.

Make a selection of the screen using the Rectangular Marquee Tool (M) and hit (Ctrl/Cmd + J) to put the selected area in a new layer. Name this layer "image holder". Add an image that you like over the iPhone screen layer, right click on it and select Create Clipping Mask.

Step 18

Duplicate the iPad layers from the "Features" group by selecting them and dragging them over the ‘Create a new layer’ button from the bottom of the Layers panel. Move these layers in the group you created at the previous step and use Free Transform (Ctrl/Cmd + T) to change the size of these layers together. You can let the iPad go over the top of the dark gray rectangle. Put the iPad next to the iPhone and change its screen image.

Step 19

Create a new group for the next content area. Use the Type Tool (T) to add some text in the right hand side of the layout. Add the icon next to the headline. Then add the iPad in the left hand side of the layout and put any image you want on the screen.

You can see below that I also added some stars beneath the iPad. Those are from the background of the Grafpedia blog design. I copied the stars and pasted them into my web layout. Then I duplicated the layer and went to Edit > Transform > Flip Horizontal. I put each stars layer in one side of the iPad, merged them (Ctrl/Cmd + E) and set the blend mode to Lighten to get rid of the background color.

Step 20: Creating the "about" area

Create a new group and name it "about". Create a dark rectangle with thin lines at the top and at the bottom just like you did for the other content areas.

Duplicate the iPad layers from the "features" group and move them into the "about" group. Put the iPad in the right hand side of the dark rectangle and use Free Transform (Ctrl/Cmd + T) to change its size. You can also change the screen image.

Step 21

Now we will hide the lower left corner of the iPad. Select the Pen Tool (P) and create a shape as you see in the following image using the color #202020. Make sure you don’t go over the top and bottom edges of the gray rectangle.

Step 22

Create a new layer and name it "shadow". Use the Rectangular Marquee Tool (M) to create a rectangular selection as you see in the following image. Drag a black-to-transparent gradient from the left hand side of the selection to the right hand side. Ctrl/Cmd + D to deselect.

Right-click on this layer and select Convert to Smart Object. Then use Free Transform (Ctrl/Cmd + T) to rotate this layer and put it next to the shape you created at the previous step.

Hold down the Ctrl/Cmd key and click on the vector mask of the "bg" layer to select the gray rectangle. Make sure that your "shadow" layer is active and go to Layer > Layer Mask > Reveal Selection. This will make the shadow visible only over the area of the dark rectangle. Set the opacity of this layer to 30%.

Step 23

Add some content in the left hand side of the gray rectangle using the Type Tool (T) and the color #eeeeee. You can also add the download button from the "features" group.

Step 24

Create a new group and name it "footer". Then add a copyright statement at the bottom of your web layout using the Type Tool (T).

Final Result

We’re finished! I hope this tutorial demonstrated to you how easy is to create an iPad/iPhone application web layout using the screen display vectors from Grafpedia. Let me know what you think in the comments section below.