Create a web layout in Photoshop using the Apple style

Aug 28th, 2010View Comments

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)

For security reasons some files from this template have been encrypted, that’s why, browsers such as Internet Explorer wont display this template correctly. In order to see a working live preview, I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Here is my final result:


Create a web layout in Photoshop using the apple style

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

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.


Create a web layout in Photoshop using the apple style

Want to Download the Source File? (including CSS/HTML version)

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

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.

  • Nicholai

    Great theme. I really like the outcome and the way you have explained every step. Thank you for all of your hard work!

  • Nicholai

    Great theme. I really like the outcome and the way you have explained every step. Thank you for all of your hard work!

  • Andrius

    Great tutorial, thank you!

  • Andrius

    Great tutorial, thank you!

  • http://www.awebgeek.com pravash chamling rai

    wow !!! I like your design and coding very much. I would like to see some examples of CSS3 and html5. can’t wait !! pleaseeeee

  • http://www.awebgeek.com pravash chamling rai

    wow !!! I like your design and coding very much. I would like to see some examples of CSS3 and html5. can’t wait !! pleaseeeee

  • http://www.colddesign.it Giacomo Freddi

    Very beautiful, Thanks!

  • http://toolnames.com Dale Hurley

    How funny. The screenshots for the tut were taken in windows when the Tut features screenshots from Apple and is about creating an Apple theme.

    Dale

  • http://toolnames.com Dale Hurley

    How funny. The screenshots for the tut were taken in windows when the Tut features screenshots from Apple and is about creating an Apple theme.

    Dale

  • admin

    @Dale,

    Yeah, when I have created the tutorial I was thinking on that . Next time I will try to create a windows layout on an iMac :)

  • admin

    @Dale,

    Yeah, when I have created the tutorial I was thinking on that . Next time I will try to create a windows layout on an iMac :)

  • Anonymous

    Nice tutorial, the result is wonderful.. thanks

  • Timaeus

    Oh… At first I thought it was going to be a real imitation of Safari’s default page, as in a simulation, rather than just a graphic. :/

blog comments powered by Disqus