Create a real estate web layout in Photoshop

May 28th, 2010View Comments

Hello! For today I have prepared another psd template and this time I will teach you how to  create a Real Estate website layout in Photoshop. In this template I will show you how easy is to create a real estate website layout using Photoshop.

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Real Estate Web Layout Tutorial in Photoshop

To create this template I have used the following resources:

Let’s start the tutorial!
Open Photoshop and create a new document 1020 by 1110px

Set the foreground color to #bcbdac and with Paint Bucket Tool push one time on your document .

Step 1 – Creating the top area

Select Rectangle Tool and create a shape on the top of the document, dimensions: 1020 by 151px, as a color I have used:  #8f8f87

Next I will select Line Tool and I will create a tiny line (1px width) on the top . As a color I have used #4d4d4d. On the top of this line (on the right) I will create another shape using Rounded Rectangle Tool (radius 10px). With Type Tool I will add “Login| Register”

On the left side I will add my logo – TrendyTuts – here you should add your logo, then on the right side I will try to create a search bar. To create the search bar I will select Rounded Rectangle Tool and I will create a shape, dimension: 230 by 28px, as a color I have used: #bcbdac

Then I will select Rectangle Tool and I will create a small shape, as a color I have used #cfbe27. Make sure that on your layer palette this rectangle is below the shape created on previous step. Using type tool I will add some text, and here’s my result for search bar.

Step 2 – Creating the navigation

To create the navigation I will select Rounded Rectangle Tool and I will create this shape. Dimensions: 912 by 58px, radius 10px, color: #3f3f3f

Next I will select Pen Tool and I will  draw this on the left side of the navigation:

I will press Ctrl+Shift+Alt+N  to create a new layer on my layer palette, than (make sure that you still have Pen Tool selected) right click on the area created with Pen Tool and choose make selection.

A new window will pop up, press ok. You shold have now the area created with Pen Tool selected. Next set the foreground color to #3f3f3f, select Paint Bucket Tool and click on the selected area

Once you have clicked with Paint Bucket Tool and the selection is filled with the foreground color, press Ctrl + D to deselect.
You should have something like this now:

To create a nice shadow, we will need to apply a gaussian blur. Go to Filter>Blur>Gaussian Blur and here for radius choose 4.2px
I will proceed in the same way for the right side, and here is my result:

I think you really like to navigation, don’t you?
Next if you will look on my final preview, you will see that I have created the navigation in 2 colors. To create that, you will need to duplicate the navigation bar. To duplicate it, you will need to select the corresponding layer on the  layer palette, than right click on it and choose duplicate.

A new layer with the same dimension and color it will be created. Right click on it and here choose: Rasterize Layer

Next select Rectangular Marque Tool and make a similar selection over the navigation (make sure that you have selected the layer which has been Resterized):

Hit Delete on your keyboard than Ctrl +D to deselect and apply this layer styles for your navigation (that one which has been Resterized)

My result:

Next I will add the links for the navigation. Here is my final result for navigation:

Step 3 – Creating the featured area

Featured Area it’s really easy to create. First download colorful skyscrapers from our Premium Files and add a orange skyscraper on this document, than with Type Tool I will add some text and with Rectangle Tool I will create that button
My result for Featured Area:

Step 3 – Creating the content area

To create the content area, I will select first Rounded Rectangle Tool and I will create this shape.: 927by 520px, color: #e3e4da

Next I will select Rectangle Tool and I will create this shape on the footer. Dimensions:  1020 by 156px as a color choose: #8b8b7d

Now I will use Rounded Rectangle Tool and I will create 5 shapes, 126 by 78px and I will apply this layer styles:


Then I will use again some colorful skyscrapers from our Premium Files.

With Pen Tool I will create some arrows. I will create them in the same way that I have create the shadow for the navigation, but here I will not apply the gaussian blur, instead I will apply this layer styles:



My result

Next I would like to create a shadow just below my images. To do that I will select first Ellipse Tool and I will create this black shape.

Then I will go to Filter>Blur>Gaussian Blur and here choose 10px. Select Rectangular Marque Tool and make a similar selection

Hit Delete on your keyboard and than press Ctrl + D to deselect. In the same way I will create a shadow in the middle of the content area
Here is my result:

Now with type tool I will add the content.
Here is my final result for the content area

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Real Estate Web Layout Tutorial in Photoshop

Want to Download the Source File? (CSS/XHTML included)

In order to download the source file you will need to become a Premium Member.

Already a premium member?  When you click on the download link please make sure that you are logged in.

The tutorial is finished now! Stray tuned because some new and trendy web layouts tutorials will be posted pretty soon on trendyTUTS.com.

  • http://onlineshopping.ecosapiens.ro/ shopping online

    thanks,buddy, I really like your tutorials!

  • http://onlineshopping.ecosapiens.ro/ shopping online

    thanks,buddy, I really like your tutorials!

  • http://www.clippingimages.com/ clippingimages

    nice one:)

  • http://www.clippingimages.com/ clippingimages

    nice one:)

  • George

    great layout, simple and effective!

  • George

    great layout, simple and effective!

  • ARIF KHAN SK

    Really nice one. i like this very much!

  • ARIF KHAN SK

    Really nice one. i like this very much!

  • http://trendytuts.com/psd-to-html-tutorials/psd-to-html-how-to-code-the-real-estate-layout.html [PSD to HTML] How to code the Real Estate Layout « TrendyTuts – Premium Photoshop Tutorials

    [...] Hello. In this tutorial I will try to explain how I have coded from PSD to HTML the Real Estate Web Layout [...]

  • http://scorpiotech.info/ Good Web Designing

    This is nice of you. You designs one of the best web layouts. Thanks for your effort!

  • http://scorpiotech.info/ Good Web Designing

    This is nice of you. You designs one of the best web layouts. Thanks for your effort!

blog comments powered by Disqus