Pages

Learn how to create a stylish/elegant web layout in Photoshop

12


Let start the tutorial!
Open Photoshop and create a new document (Ctrl + N) with the following dimensions: 1020 by 1020 px.
Once you have created this, select rectangle tool and create 3 shapes.
10
For the first one I have used this color (#5d3919), for the second one I have used (#ececec) and for the third one (#5d3919)

Step 1 – Creating the logo and navigation

First with type tool I will add the logo (here is nothing fancy, just use type tool and write your desired text for logo)
11
Next I will select rectangle tool and I will make this shape. RGB color used: #ececec
12
Then I will apply the following layer styles:
13
14
15
My result
17
With type tool I will add the links for navigation
My result
18

Step 2 – Creating the header

First I will select Rectangle tool and I will create this shape. Mine has this dimensions: 868 by 305px
19
Next I will apply the following layer styles:
20
My result:
21
Then I will need to add an image. I have found here some really nice images.
So I will place an image above our shape and in the layer palette I will right click on the image and I will choose “Create Clipping Mask”
22
Here is my result:
23
Well the header is finished now

Step 3 – Creating the content area

This area is really easy to create. With type tool add some text and from our Complete Designer Set, you will find some really nice icons related to interior design
Next for the footer you will need to copy the logo (make it a little bit smaller) and place it at the buttom.
Here is my final result for this web layout:
12