ArtBox7.com

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

Hello and welcome to another tutorial here on ArtBox7.com. Today I will create a stylish web layout and I think this one can fit pretty well for a furniture website
To create a similar web layout you will need
1. Photoshop
2. Some vector icons from Complete Designer Set
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.

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)

Next I will select rectangle tool and I will make this shape. RGB color used: #ececec

Then I will apply the following layer styles:

My result

With type tool I will add the links for navigation
My result

Step 2 – Creating the header

First I will select Rectangle tool and I will create this shape. Mine has this dimensions: 868 by 305px

Next I will apply the following layer styles:

My result:

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”

Here is my result:

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: