Create a web layout in Photoshop using the Apple style
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.
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:
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
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:
For each of this icons I will apply this layer styles:
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:
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:
I will hit Delete on my keyboard to delete the selection and Ctrl +D to unload the selection
Here is my result:
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:
Than with Type Tool I will add the links for the footer
Here is my final result for the entire layout.
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.blog comments powered by Disqus