Hello and welcome here, on trendyTUTS.com. In this tutorial I will teach you how to create a web layout inspired by apple.com.  If you are looking to create a design using some elements from the apple.com, in this tutorial I will show you how to do it.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this template in Photoshop, but I will not cover the PSD to CSS/HTML conversion. If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our web layouts (PSD and CSS/HTML version for each tutorial), all premium files and unlimited access to our PSD to CSS/XHTML tutorials.

Click Here To See The Live Preview (CSS/HTML)

Here is my final result:

To create this web layout inspired by apple I have used:

• From Premium Files available to our Premium Members, I have used Universal Vector Icons 1
• From Free Web Vector Icons I will use a magnifier.

Let’s start the tutorial.
Open Photoshop, set the foreground color to #f7f7f7 and create a new document (Ctrl + N), dimensions: 1020x1100px

Step1 – Creating the Logo and Navigation

To create logo and navigation, I will select first Rounded Rectangle  Tool with a radius of 8px, and I will create this shape (dimensions: 871x53px)

Next apply this layer styles:

My result:

I will select Type Tool and I will the links for navigation:

Then for each link (including the logo) I will apply this layer styles, to obtain so called “letterpress” effect

Here is my result after I have applied this layer styles:

Next with line tool I will create some separators for links, by dragging 3 lines, one next another. Please take a look at the screenshot below.

For the first line (I will count them from left to right) I have used: #ffffff, for the second one (darker one) #c2c2c2 and for the third one: #ffffff
I will add this separators for each link.
Here is my result:

Now from our Premium Files, available to our Premium Members, I will select Universal Vector Icons 1 and I will add 3 icons.

For each of this icons I will apply this layer styles:

My result:

Next on the right side I will create a search form using Rounded Rectangle Tool with a radius of 50px. That magnifier from the left side is from our Free Vector Icons Set.
Here is my final result for this area:

Step2 – Creating the Featured Area.

First I will select Rounded Rectangle Tool with a radius of 8px and I will create this circle:

Then I will select Ellipse Tool and I will create this shape:

I will go to Filter>Blur>Gaussian Blur and here I will choose for radius 50px

Now with Pen Tool I will create this area (a triangle), I will right click on this area and I will choose Make Selection

Once the selection is created I will go to Select>Inverse (Shift+Ctrl+I) to inverse the selection. I will hit Delete on my keyboard than Ctrl + D to unload the selection
I will lower the opacity to 50% and here is my result:

Using the steps from above I will create another 3 shapes, here’s my result:

Then using some if my themes, I will take some screenshots from safari browser and I will place them on my document. If you want to use the same images, you can download them here:

Middle Image

Left Image

Right Image

So, I will add the first image, you can add them directly on your document with File>Place

To make a nice shadow for this image, I will duplicate his layer (Ctrl+J), with move tool (V) I will move it a little bit down. I will press Ctrl+T to activate Free Transform Tool, I will right click on my image and I will choose Flip Vertical

Then I will select Eraser Tool, I will select a fading brush and I will erase the bottom of the image (that one flipped  vertically)

till I will obtain something that I like.

Next on the left side I will add another image.

I will go to Edit>Free Transform >Perspective and with mouse I will move the bottom right corner to the top, till I will obtain something like this:

I will place this image behind the first image add and using the same steps described above.
Next I will add an image on the right side also.

Here is my result for Featured Area:

Step3 – Creating the Content Area.

To create the content area I will select Rounded Rectangle Tool with a radius of 8px, I will create  a white shape, than I will apply this layer styles:

Having Rounded Rectangle Tool Selected, I will create another shape on the top and I will apply this layer styles:

Next I will rasterize it (to rasterize a layer, right click on it and choose Rasterize Layer), then with Rectangular Marque Tool I will make this selection

I will hit Delete on my keyboard to delete the selection and Ctrl +D to unload the selection
Here is my result:

With Type Tool I will add some text and from our Premium Files available to our Premium Members I will add some icons from Universal Vector Icons 1

My final result for the content area:

Step 4 – Creating the Footer

With Rounded Rectangle Tool, having a radius of 8px I will create a shape and I will apply this layer styles:

With Line Tool I will add an horizontal line and I will create an arrow.
I will add an icon used on navigation

Than with Type Tool I will add the links for the footer

Here is my final result for the entire layout.

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.