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:
Step 1 – Creating the logo
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:
Next I will add a photo with a house. You can find some high quality photos, on this website: SXC.hu
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
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.
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.
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)
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)
Then apply the following layer styles:
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.