Learn How To Create An Ipad Apps Themed Layout

Apps, Apps, Apps... there so popular nowadays. Iphone apps, ipad apps, android apps there's just no stopping them. So in todays tutorial I'll be showing you how to create your very own ipad apps themed web layout from scratch using adobe photoshop.

What We'll Be Creating

Creating The Header

Create a new (Ctrl + N) document 1200 x 1150 pixels with a white #ffffff background. Select the "Rectangular Marquee Tool" (M) then drag out a fairly big rectangle across the canvas. Once the selection has been made create a new layer, select the "Fill Tool" (G) with a radial gradient then set the foreground color to #9cd41c and background to #427403. Drag the gradient from the bottom right side of the rectangle until you have something like this.

Now, select the "Custom Shapes Tool" (U). From the library of custom shapes select the "Registration Target" shape.

Drag the shape out really big so that only the streaks from the center are shown on the canvas. You can resize the shape with the "Free Transform Tool" (Ctrl + T). Once the shape has been dragged out right click the layer and select "Rasterize Layer" from the menu. Load a selection around the header rectangle "Layer > Load Selection", then go to "Select > Inverse" and hit the delete key (Make sure before you hit delete that the shape layer is highlighted in the layers window).

Set the shapes blend mode to "Soft Light" and opacity to "25%", finally add a layer make to the shape and a radial gradient from the middle of the shape outwards, if your foreground color is black the gradient will be reversed, make sure its set to white.

Adding The Header Content

Inside the header area in the top left corner add your website title and slogan.

Once you've added the title and slogan add the following layer styles to your title text layer.

Underneath the title and slogan add a small title with a paragraph of text. Use the "Rounded Rectangle" and the color black #000000 to create a call to action button on the right.

Adding The Ipad

Download the ipad PSD from the resource list then add it to your canvas. Place the ipad on the right side of the header, then rotate it slightly with the "Free Transform Tool" (Ctrl + T).

I deleted the shadow from underneath the original ipad and replaced it with a new one using the "Elliptical Marquee Tool" (M).

Adding The Custom Shapes

Download some custom shapes from the link below. I've left it up to you which shapes you wish to use.

Once you've decided which shapes to use, begin to add shapes behind the ipad, make all the shapes white #ffffff.

Once your happy with the placement of the shapes , add a cloud shape underneath the ipad. The cloud shape should overlap into the white canvas background. There is a cloud shape already included in the custom shapes library.

On a new layer underneath the cloud layer make a selection like the image below using the "Rectangular Marquee Tool" (M).

Set your foreground color to #dbdbdb then select the "Gradient Tool" (G) in the options bar at the top change the gradient color type to "Foreground To Transparent".

Now drag the gradient into the selection, you should have something like this.

Finally, directly underneath the bottom of the green rectangle create two 1 pixel lines, color one black #000000 and the other white #ffffff. Set the two lines opacity to 50%, you should have something like this.

Creating The Twitter Feed

Select the "Rounded Rectangle Tool" (U) then create a rectangle underneath the header.

Once you've created the rectangle add a small triangle on the top left side, turning the rectangle into a long speech bubble type shape.

Now add the following layer styles.

Inside of the speech bubble like shape add a simple twitter feed.

Creating The Featured Content

Using the "Rounded Rectangle Tool" (U) create 3 small boxes the same width as the twitter feed box, to the 3 boxes add the following layer styles.

You should have something like this.

Make a selection around one of the boxes "Layer > Load Selection" then go to "Select > Modify > Contract" contract the selection by about 5px then copy and paste an image inside (app related), when pasting the image use "Edit > Paste Into" for CS5 users go to "Edit > Paste Special > Paste Into".

Repeat the steps above for the last 2 rectangles then add some example text underneath each box.

Underneath the featured content boxes add a section about the website using the "Type Tool" (T).

The Sidebar

Using the "Rounded Rectangle" (U) create a rectangle on the right hand side in the space which is left over. Inside of the box add a title and some small paragraph text. Once you've done this add the following layer styles to the rectangle.

You should have something like this.

Inside of the rest of the rectangle simulate two small blog posts in list format. Each list entry has a small green bullet point and are separated by a simple 1pixel line. At the very bottom of the rectangle add a black call to action button.

Creating The Footer

Nothing to drastic for the footer... start with a simple 1px line which separates the content from the footer then add the copyright information on the left and some social icons on the right.

Conclusion