How to Create an Apple iPad Layout – Tutorial

In this tutorial you will learn how to create a web layout inspired by apple.com website. You can use this layout also for your portfolio or for featuring your products. This layout will have some areas inspired by apple.com website.

Click on the following image to see the full size layout. If you’re a member, you can download the PSD Layout at the bottom of the page.

For start you will need to create a new document with the following size: 1100 x 1250 pixels. For background i will use the following color:  #e8e8e8. To add another color over your background you can easily use Paint Bucket Tool.

Duplicate the background layer ( select the background layer and press on CMD + J ), and then go to Filter > Noise and use the following settings. You will notice that you background layer will have a nice gritty effect.

With Rounded Rectangle Tool create a big white shape in the middle of the layout.

For this big shape i have used a simple layer style:

On the right side of the layout i will add a image with an iPad.

Then i will duplicate this layer with the ipad stock image, and i have placed the images behind the first one. As you can see from the next image i have re sized the two copies and in the same time i have blurred the small iPad’s. To add a blur effect you need to select the right layer and then go to Filter > Blur > Gaussian Blur.

I will create a very simple logo with Horizontal Type Tool

Bellow you can see the layer styles used to create this pressed text effect. First you need to add a drop shadow.

Bellow you can see the settings for Inner Shadow

And finally you can see the settings for the color overlay. here you can play a little with the color and you will create another effects.

Under the iPad’s i will make a selection with Rectangular Marquee Tool. Then i will create a new layer ( press on CMD+SHIFT+ALT+N for mac users) or ( press on CTRL+SHIFT+ALT+N – for windows users )

With Paint Bucket Tool add a pixel pattern. please use any pattern you want.
This set of 815 Photoshop Pixel Pattern can be downloaded only if you are a registered member

After you select the pattern please click inside your selection, and make sure you have the empty layer selected, otherwise it will not work. After you fill the selection you can press on CTRL + D or CMD +D to deselect. You will have the same result like mine.

With the same technique i will create a similar line but this time my selection will be thinner.

I will select Rounded Rectangle Tool, and i will create a blue shape in the middle of the layout.

Bellow you can see the settings for the blue shape:

You can use another gradient if you like. We have 25,000 Photoshop gradients in this Ultimate Photoshop Gradients pack. The same this huge set can be downloaded only from our registered members.

Select pen tool, and press on the border of the shape. Then modify the shape like in the following image. You will need to learn a little how to use the Pen Tool

The same do on the left side.

The next step is to create two small circles. Place the layers right above the background layer.

Over this blue shape i will add 3 shapes.

Bellow you can see the layer styles i have used to create the three shapes.

I will select Custom Shape Tool, and i will add some arrows.

Right under the logo i will add some text with Horizontal Type Tool, and another image with an iPad.

On the top right side i will create a simple navigation. And as you can see i have placed the most important button ( BUY Now ).  the layer styles used for this button are the same with the once i have used for the big blue shape.

Under the blue shape with my sideshow i will create another buttons, and i will add some images, and text.

This is the final result. Please press on the following image to see the result.

This layout is available for our members.