Create a Real Estate Web Layout in Photoshop

Hello and welcome to another tutorial here on ArtBox7.com. Today I will create a web  layout (photoshop template) related to real estate (home sales template).
To follow this tutorial you will need:

  1. Adobe Photoshop software,
  2. Some vector ornaments and vector icons from our Complete Designer Set,

Let’s start the tutorial. Open photoshop and create a new document (Ctrl + N) 1020 X 935 ,  for background set black.
10

Step 1 – Creating the logo

Logo is quite easy to create. Select type tool (T) and using Bookman Old Style font, type Real Estate. Then apply the following layer styles:
11
12

13

14
My result:

15
Then add some ornaments for the logo. I have used some vector ornaments from Complete Designer Set
16
The logo is finished now, let’s move now to header.

Step 2 – Creating the header

Select Rectangle Tool and create a similar shape. Mine has the following dimensions: 918 X 238. The color is not important because we will going to place a nice image over here.  Apply the following layer styles:

20
My result:

21
Next I will add a photo with a house. You can find some high quality photos, on this website: SXC.hu

22
As you can see the photo is quite large, that’s why I will need to create a Clipping Mask . To create a Clipping Mask you will need to make sure that the image layer will be above the rectangle created for header, than right click on the image layer and select Create Clipping Mask

23
My result

24
The header is almost finished, but because in this tutorial I will create a template for real estates websites, I will need to create a search area, and this one needs to be placed in a visible zone. I have choose to create the search exactly over the header.

Step 4 – Creating the “Fast Search” area

Select Rectangle Tool (U) and create a similar shape. Mine has the following dimensions: 454X261. Ste the opacity to 95%. The color it doesn’t meter because soon I will apply some layer styles.

25
Then  apply the following layer styles:

26
27
My result

28
Now from Complete Designer Set I will use an vector ornament and I will place it exactly over the shape. Here’s my result:

29
Next I will add some text and some forms (using type tool (T) and rectangle tool (U))

30
Once those has been added we will need to create a submit button.
Using Rectangle Tool , create a similar shape (again, the color is not matter now because we will apply some layer styles soon):

31
Then apply the following layer styles:

32

33
With type tool (T) add some text, and here’s my result:

34
The “Fast Find” Area is finished now
Let’s move to the content area:

Step5 – Create the content area

Select rectangle tool and create a white shape. This will serve for the entire content area. Mine has the following dimensions: 1020 X 518.
Next select rectangle tool again and create another shape, on the middle of the content area, please see the screenshot. Please note that this shape needs to be white also but to understand where to add it on your layout I have used a red color.

35
Now select ellipse tool and create a shape which will serve as a shadow for the center area

37
Make sure that you have this shape selected and go to : Filter>Blur>Gaussian Blur and apply a radius of 7px

38
Next make the same thing for the right side

41
As you can see, I have divided the content area in 3 categories:
Key Notes (left side), Featured Listings (center) and Latest Sold (right side)
To create Key Notes I have used type tool and some vector icons from our Complete Designer Set, to create Latest Sold, I have used type tool and some photos, you can find some good ones on this website: SXC.hu
For featured listings I have used again some ornaments from Complete Designer Set (in title)
The, to create the featured listings boxes, I have used Rectangle Tool with this dimensions:  144X131(color doesn’t matter because next I will apply some layer styles)

45
Next apply the following layer styles:

42

43
Here’s my result

47
Next I will add an image and some text:

49
Now the only thing which is missing here is a button (to click to see the details about the listing). That’s why next we will create a button.
Select rectangle tool and add a similar shape 61X15 (the color it doesn’t matter)
50
Then apply the following layer styles:

51
52
With type tool add some text.
Here’s my result

53
Now to populate the entire area, duplicate this boxes and change the photos. Here’s my final result for content area:

55
The footer is quite easy to create. Here I have duplicated the logo and I have made it a little bit smaller, then with type tool I have added some copyright text.
Here the final preview:

psd11
Well the tutorial is finished now. I hope you have had a great read and if you’d like to get notified each time we publish a new tutorial (it will be on a regular basis) I invite you to subscribe to our rss feed/twitter.

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. Tirath
    August 7th, 2010

    Awesome tutorial with beautiful web layout
    thanks so much Jeff to creating such a awesome web layouts and tutorials for us.
    you are genus web designer
    keep doing good work
    god bless you :-)

Leave a Reply