Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Real Estate Layout

Real Estate Layout


Let's start with a new document

Size should be as usual 760x770 pixels
Background : white

Duplicate the background layer ( to duplicate be sure you have the background layer selected in your layer palette, then press on Ctrl+J

Go to Filter > Noise > Add noise , and use the same settings like me

image 1

Then press Ctrl+U , and use the following settings :

image 2

We have a nice background for our layout.

image 3

Grab Rounded rectangle tool, and create a shape like mine

image 4

Now download the following image ,

image 5

and place it like me :

image 6
Click to enlarge

Be sure you select this layer in your layer palette , then with " Single Column Marquee Tool " make a selection like mine

image 7

Then press Ctrl+J ( this shortcut will create a new layer above the layer with the house )

I have created a new layer via copy

Select this new layer on your layer palette , then press on V on your keyboard, or select Move tool , and after that press Ctrl+T

You can see on your screen the transform controls

image 8

With Move toll change the Horizontal scale until you have the same result like mine

image 9
Click to enlarge

Select Rounded rectangle Tool , and create a few shapes. You can see that i have created 6 small shapes with a white color , and i have placed on the top of our layout. This shapes will be our buttons Then i have created a shape on the left side with a blue color.

image 10

For the blue shape layer please add the following layer styles

image 11

image 12

image 13

image 14

image 15

This is my result. you can see that i have added also some text. this is a simple job and i think everybody can do it alone. If you want you can download a 3D logo from www.logo-3d.com ( a talk-mania website ) and use it instead of my text logo

image 16

After that i have placed some forms and text on this orange shape

image 17

I will add some text on the body of this layout. in the same time i will add also some images

image 18
Click to enlarge

If you have Talk-Mania Big-Pack you can find a nice set of pixel icons for the next step. Please load the pixel icons brushes and create 3 or 4 icons on the right side of your layout

image 19

Now select Line Tool ( be sure the weight is set to 1 px ), and create 2 small lines like me

You can see that i placed another text on this layout

image 20
Click to enlarge

Now please go to www.photo-shop-brush.com ( a Talk-mania website ) and download the following set of brushes : Free Photoshop Brushes

After you will load the brushes , create a new layer above of all layers , and add some simple details with brush tool.

Real Estate Layout
Click to enlarge

I hope you will find useful this layout.



Author's URL: amitk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Real Estate Layout"

Captcha