Practical Real Estate Layout

Step 1

Open a new document in photoshop that is 800 x 600 in size.

Step 2

Fill the background with #E8E8E8

Step 3

Most websites are built around a pallet of 2 colors, and sometimes 3 - but usually never any more than that. The colors I've chosen for this template will be the light grey we used for the background (#E8E8E8) and a nice red color to get the users attention (#FE4646).

We'll start by putting our company name in the top right-hand corner of the screen.

Choose whatever font you like.

Get out the text tool, and set it up like so:

Note: Make sure "sharp" is selected to avoid jagged text

Click to enlarge

Now type in the name of your company into the corner of the webpage template:

Next I used the same font settings, however changed the color to #FE4646, to create a nice two tone company name:

Step 4

Now we're going to use a technique that is used all over the internet these days, and that is the "reflective text" effect.

Press CTRL + J on your keyboard to duplicate your text layer.

Press CTRL + T on your keyboard to bring up the free transform tool.

Right click anywhere on the canvas, and choose "Flip Vertically".

Press 'V' on your keyboard, and drag the duplicate layer 1 or 2 pixels below our previous text layer:

Change the blending mode of this layer to "Soft Light":

Optionally you can adjust the opacity of this layer as well to create a lighter effect.

Result:

Step 5

Create a new layer. Set your foreground color to white (#FFFFFF).

Here we'll create the navigation section of our layout. To do this get the single row marquee tool ( ). Now make a selection across your canvas between the text used in our header and it's reflection:

Go to "Edit->Stroke" with a setting of 1 pixel:

Result:

Or you could use the text tool and fill it with .'s (periods) to create a dotted line such as here:

Create a new layer, and do the same thing, however position your selection under the reflected header/logo so that you have another horizontally line:

Step 6

Create a new layer, this time we'll create a divider for our content area(s).

This time get out the Single Column Marquee Tool ( ) and make a vertical line just after the header/logo text like so:

Set your foreground color to (#), and go to Edit->Stroke, and apply these settings:

Alternatively you can make a text area, and fill it with ...'s (periods) to create a dotted line such as I've done here:

Your entire canvas should look like this:

Click to enlarge

Step 7

Create a new layer, get out the rectangular marquee tool ( ) and make a selection similar to what I have here:

Set your foreground color to #FEFEFE and your background color to #E8E8E8.

Get out the gradient fill tool ( ).

Fill this selection with a dark to light gradient:

Double click this layer and apply the following blending options:

Bevel & Emboss:

Result:

Step 8

Next we'll place text on the navigation system for our links.

Set your foreground color to #FF4444 and set your text tool up like so:

The font I've used is called "" which is a windows standard I believe.

Click to enlarge

Go ahead and type out whatever you need your buttons to say, here's how mine ended up:

Now we've got the basic framework of our layout. Everything else that appears on the page is content that will change from page to page.Here is the basic framework that you should have at this point:

Click to enlarge

Here is how this type of layout might look in a real life environment after being sliced and coded. I've used these same techniques to create a few different content areas on the page, just to divide up the page a bit and separate the content. As you can see in my final result, as a whole the overall finished product looks complex, but if you break down each page of the layout you will see that the same techniques that have been taught above, have been repeated with subtle differences.

Click to enlarge

Thanks for reading this tutorial!

Download Practical Real Estate Layout Source Package here.