home tutorials forums downloads contact-us
Simple Blog Layout Tech Site Layout Practical Real Estate Layout Energy Pulse Background Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 118 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 1 of 2

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 l'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, there are many designer fonts available in our downloads section that you could use for this type of thing.
Get out the text tool, and set it up like so:
Note: Make sure "sharp" is selected to avoid jagged text

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

Next l 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.


Go To Page: [ 1 2 ]
Page 1 of 2
Tutorial Index

Download File Download Practical Real Estate Layout Source Package

Author: Sacred M.
Discuss this tutorial on the Forums
PSD HOUSE / Photoshop Tutorials Best Photoshop 6.0 - 7.0 - CS - CS2 Tutorials - Max Tutorials 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page