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.

DataMouse

2007-11-01

Awesome. Simple technique - but effective.
thanks for sharing!
DM

Http://www.datamouse.biz

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.