Real Estate template

Rate this tutorial:
  • Currently Note: 3/5
  • 1
  • 2
  • 3
  • 4
  • 5

Tip: Check Your works at least on three most popular browsers.

opera msie

This tutorial will show You how to make nice looking web template for Real Estate site.

First we need some inspiration. Nice image which will move our project forward. I found one on SXC.HU and You can download it from there.
http://www.sxc.hu/photo/696482

Create a new document with 1024x700 px and white background.
Now View -> New Guide and use 127px Vertical, and then make this same thing but put 897px Vertical (Guides are verry helpful, use them always when You can)


We have our work field ready. Now we have to use our sxc.hu image mentioned above but first we have to scale it a little. Open this image in photoshop and use Image -> Image Size (Alt + Ctrl + I) and set width to 650px. Now drag thumbnail from layers palete to our document.


First step - drag and drop


Now using Move Tool (V) place this image like on picture (a part of sky will be outside the document), and using Rectangular Marquee tool (M) select a part from bottom and hit delete (layer with top image have to be active layer).


place image in right position

Create New Layer, use Rectangular Marquee Tool (M) and using fixed size make a selection. Fill this selection with #fae5c8. Keep our sellection, use Select -> Transfrom Selection, and with Shift key rotate it by 45°, place it in left corner and hit delete. Now Select -> Deselect (Ctrl + D)


make new selection


Now duplicate this layer (Ctrl + J), then Edit -> Transform -> Flip Horizontal, and move this layer to get the shape like bellow. Marge those two layers (right click on duplicated layer and Marge Down)


final shape


Grab Elliptical Marquee Tool (M), use 18x18 px fixed size and place this selection as on image bellow. Fill this selection with #916047. Now Select -> Modify -> Contract , use 3px, hit OK and then Delete.


Circle


Make sure, that You have our new object layer active then use Edit -> Free Transform (Ctrl + T) and place it like bellow.


free transform


Now lets make a string. Make new layer, select Brush Tool (B) and set brush to regular soft 2px brush and use #612915 for foreground color.  Use Pen Tool (P) and draw something like string. Next click right mouse button and select Stroke Patch. Next use Eraser Tool and erase a small part of our string. With this same Eraser Tool erase some part of the sky to blend it with white background (use big size, soft eraser - remember to select house layer first).


Making a string

Now lets make something on the right side. This will be easy. Just take Rectangular Marquee Tool (M) with fixed 205x675 px size and make selection sticked to right guide. Make new layer and fill this selection with #eef1d9. And that will be all for now, we will fill this space with content later.


right side

Every site need a menu - we will make it now. Use Rounded Rectangle Tool (U), set Radius to 5px, make new layer and draw first button (color isn't important). Place this layer under the layer with our house. Next hold Ctrl button and click on our future button layer thumbnail - this will make a selection.


button

Select Gradient Tool (G) and with settings like bellow drag this gradient over our button layer.


gradient


Apply layer style for this button


Button layer style


Duplicate our button layer (Ctrl+J) and move it right. Do it twice more.


four buttons

Now lets make something to make those buttons look better. Make new layer over our buttons and our home/house layer. Grab Clone Stamp Tool (S) and use this settings.


brush settings


Now hold Alt key, click somewhere on the grass, this will be our source for clone stamp. Now just paint like on image bellow. Remember to have always grass as Your source. You can zoom a little if You want.


menu

Now use Rounded Rectangle Tool (U) with 5px Radius and draw a shape like this on new layer


shape


With this same tool draw another shape on the bottom.


bottom


Now it's time for a little content. First - Buttons.


buttons text


Now lets make search bar.


search box


Nothing hard here - just some text. Only interesting thing is Search button. How to make it? First draw a rectangle.


button


Now apply those blending options.


search button


In easy way we can feel rest of our template. I make it only to check how it will look. Normaly You will add content in coding part (xHTML and CSS). Typing text in photoshop is realy easy. I used two icons on my final template. You can get both here


sitemap icon  email icon


And the final result:


Real Estate Template


Comments

Chris

2007-10-21

Not a bad a template. Over all its simple and clean. Good work.

Sam O.

2007-10-21

Love this tutorial..thanks for your great job!

Jim

2007-10-23

Nice.

Bakulaw

2007-11-14

Nice tutorial. I love the clone part, although you did not expound on it that much.. had to figure it on my own! :)

erica

2007-12-05

really nice, i loved it!

Ales

2008-01-24

very clear
nice job
thnx

Tara

2008-05-12

Extreme cool :)

That effect using brush to crete grass covering buttons is totally cool!

lde1243

2008-07-20

nice :)

tomatotree

2008-10-24

thanhks alot,this TUT realy very need for my job

ceops

2008-12-09

this is my first web design and i complete it successfully thank you so much its very beautiful :D now im going to try another one.

Zero

2009-03-07

Thanks! Very nice!

yawale

2009-03-07

very nice website i wishe, i will develop something like this.

xxx

2009-03-17

mast , really great..

photo restoration retouching dot com

2009-03-27

I am going to reccommend this tutorial to a building company which at present have a really horrible looking webpage

Pramod

2009-05-26

Very Helpfull in beginners. Thanks.

NdFeB Magnet

2009-06-30

Very nice.

Sengaloun

2009-07-31

Thank for giving us

sandesh

2009-09-29

nice effect of navigation bar !

SHIROO

2009-12-01

THANKS!!!

shiwa

2010-02-11

it very nice & easy teaching

NeN

2010-05-14

what is the name of the font you used for the form?

ibrahim

2010-05-14

=mmzd=DMKaKa

2010-05-24

thank u so much

krishnankutty

2010-07-16

Good idea.. .. .

philip381

2010-08-13

You lost me trying to draw the string. It says "select Brush Tool (B) and set brush to regular soft 2px brush and use #612915 for foreground color. Use Pen Tool (P) and draw something like string."
What do you do with the brush tool before you use the pen tool? Draw the string? Then copy over it with the pen tool? I made a string with the pen tool, sort of, then rt clicked and chose stroke but nothing happened.

avinash

2011-01-02

nice

mostafa eldeep

2011-01-10

wonderfull

Superfoil Insulation

2011-01-21

Beautiful

Ashutosh Bishwash

2011-03-02

Its very helpfull

rezza

2011-03-03

good design!

rinku

2011-04-26

very nice trick

nader

2011-05-08

so good

asawe

2011-05-09

very cool

ramji pandey

2011-05-13

this is very good

TARANG

2011-05-24

thanks for guide..

Elaine

2011-06-06

Muito interessante , parab??ns !

dodoski

2011-06-08

great stuff, i like it, not confusing.

varun

2011-06-17

nice design

Sudeep

2011-08-04

NIce

Betsy

2011-11-15

This's cool !

streamline online llc

2012-01-20

Seems to be amazing, I may very well probably leaked downwards and verify it launched related to people return to.

sabuj

2012-08-24

It's really awesome!!!!thanks

George

2012-10-15

Amazing...!
Thanks for share your knowledge...

Leo

2013-02-19

Good! Thanks!

CGOnlineTutorials.com

2013-02-27

Really nice and cool tutorial. Thanks for posting it.

StefanoE

2013-11-23

I noticed that it's hard to find your website in google, i found it on 18th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my site, your should search in google for - insane google ranking boost - it helped me a lot

Amina

2013-11-30

exactly what I needed, gonna try it

kpnkijfhy

2014-01-04


ngecldwjy

2014-01-08


qxkozslsa

2014-01-11


sruthi

2014-02-06

nice tutorial.thanx