PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Curves Usage Tutorial EZ Lava Effect Vortex Effect Flawless Layout Fresh Tutorials:
Last Update: 2.14.2007
Online: 26 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
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 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.

Result:



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 PhotoshopForce.com Forums
Affiliates:
graphics, tutorials, softwares, designing, free training, downloads FreeTimeFoto.com Windows GUI MODS Tutorio.com - Free Webmaster Tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page