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.

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

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs

  1. Nauman Akhtar
    April 11th, 2010

    Amazing steps to follow. Cool


  2. Thomas Craig Consulting
    April 26th, 2010

    Very nice tutorial, simple and detailed instructions will make this an ideal starting point for web newbies.


  3. Flaske
    May 30th, 2010

    Another nice tut, i send link to this site to my friend. Thanks!


  4. Janke
    July 7th, 2010

    Owesome post. Thanks for help! Good luck!

Leave a Reply