home tutorials forums downloads contact-us
Tech Style Web Buttons Extended Text Colorful Classy Text EZ Plastic Text Fresh Tutorials:
Last Update: 2.14.2007
Online: 123 Users
Advetise on For only $50 per month! Tutorials Web Layouts Practical Real Estate Layout

Practical Real Estate Layout

In this tutorial you we will create a layout that takes advantage of the users viewable area screen area to give the user as much information as possible on one page. This example will be used for a fictional real estate company, but this layout could be altered to cover gaming sites, tutorial sites or any type of website that needs to give the user a lot of information with nice sized high res images as well.

Download File Download Practical Real Estate Layout Source Package

Go To Page: [ 1 2 ]

Page 2 of 2

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:


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 l've done here:

Your entire canvas should look like this:

Step # 7
Create a new layer, get out the rectangular marquee tool () and make a selection similar to what l 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:


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 l've used is called "" which is a windows standard l believe. Choose whatever font you like, there are many designer fonts available in our downloads section that you could use for this type of thing.

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:

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.

Thanks for reading this tutorial, be sure to check out the rest of our great photoshop tutorials while you're here!

Download File Download Practical Real Estate Layout Source Package

Author: Sacred M.
Discuss this tutorial on the Forums
PSD HOUSE / Photoshop Tutorials SourceCrave - Quality Webmaster Resources Windows GUI MODS
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page