 |
PhotoshopForce.com
»
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 Practical Real Estate Layout Source Package
Go To Page: [
1 ·
2
]
Page 1 of 2
Open a new document in photoshop that is 800 x 600 in size.
Fill the background with #E8E8E8
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:
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:
Go To Page: [
1 ·
2
]
Page 1 of 2
Tutorial Index
Download Practical Real Estate Layout Source Package
Author: Sacred M.
Discuss this tutorial on the PhotoshopForce.com Forums
|  |
