Image preview: Design a Sleek Real Estate Website

Design a Sleek Real Estate Website

Learn how to create a sleek, professional real estate theme in just 15 easy steps. Download the source file for this and all our other tutorials in our VIP Members Area.

Read More... 28 comments

Final Image

This is the final image that we’ll be creating:

real15 Design a Sleek Real Estate Website

Images Used

Here is a list of images used in the making of this tutorial:

Island Photo

Tag Photo

Step 1

Open up a new document (960X850px). Create a new layer called ‘main background’ and fill your canvas with cream (E9E8E5). Then create a new layer called ‘darker background’. Use your rectangular marquee tool to select the top of your canvas, and then fill it with a slightly darker cream (DAD8CF).

real1 Design a Sleek Real Estate Website

Step 2

Now open up your photo in a new document. Go to image>resize and resize your photo to 920px wide. Then return to your original document and hit paste. This will automatically paste your image into the center of your image. Move the image upwards towards the top of your canvas, keeping it horizontally central.

real2 Design a Sleek Real Estate Website

Step 3

Now I want to do a little photo improvement, seeing as the island photo is the central part of my layout. First I go to image>adjustments>levels and change my input levels to: 25, 1.55 and 245. Then go to image>adjustments>hue/saturation and reduce your photos saturation to -30. Finally, go to image>adjustments>color balance and change your color levels to +25, +25, -50.

real3a Design a Sleek Real Estate Website

real3b Design a Sleek Real Estate Website

real3c Design a Sleek Real Estate Website

real3d Design a Sleek Real Estate Website

Step 4

Now go to blending options for your photo layer and apply a 6px white stroke effect and a drop shadow.

real4a Design a Sleek Real Estate Website

real4b Design a Sleek Real Estate Website

real4c Design a Sleek Real Estate Website

Step 5

Now select your ‘dark background’ and apply a gradient overlay and drop shadow to it.

real5a Design a Sleek Real Estate Website

real5b Design a Sleek Real Estate Website

real5c Design a Sleek Real Estate Website

Step 6

Create a new layer called ‘light spot’ above your background layers but below your photo layer. Then drag out a white to transparent radial gradient from the top center of your canvas. This should give your header a subtle lighting effect.

real6 Design a Sleek Real Estate Website

Step 7

Now type out some menu links on a new layer above your background and light spot layers and beneath your photo layer. The font I used was Arial, size 14pt, bold, -50 kerning. Put 15 spaces (spacebars) between each link item.

This works out at about 50px between each link. Now create a new layer beneath the text layer called menu. Create a bar, with 25px space to the side of each link, and fill your bar with a brown gradient.

real7 Design a Sleek Real Estate Website

Step 8

Now zoom in and use your rectangular marquee tool to delete 1px dividers in your menu.

real8 Design a Sleek Real Estate Website

Step 9

Now apply an inner shadow effect to your menu layer.

real9a Design a Sleek Real Estate Website

real9b Design a Sleek Real Estate Website

Step 10

Select your home tab using your marquee selection tool, and then go to image>adjustments>brightness/contrast. Up your brightness to +60 and your contrast to +15.

real10 Design a Sleek Real Estate Website

Step 11

Now paste in a tag photo. I cut it out using the magic wand tool and lasso tool. It was too intense so I went to image>adjustments>hue/saturation and reduced my saturation and increased my lightness.

real11 Design a Sleek Real Estate Website

Step 12

Now go to blending options for your tag layer and apply a drop shadow (settings below):

real12a Design a Sleek Real Estate Website

real12b Design a Sleek Real Estate Website

Step 13

Add some logo text next to your tag, and add a sunshine custom shape over your tag.

real13 Design a Sleek Real Estate Website

Step 14

Now plan out your main content areas. Use your rounded rectangle tool (5px radius) and draw out a large area to the left, and two smaller areas to form a right column. For the 2 right areas, apply gradient overlays, ranging from dark brown to slightly lighter brown for the top area, and dark greeny-blue to slightly lighter dark greeny-blue for the bottom right area.

real14 Design a Sleek Real Estate Website

Step 15

To finish off the template add some content. I would go into the specifics of this step, but there aren’t really any! You’ve already setup your main template, so simply use your text tool to add in your text, and then paste in photos for your sidebar content.

No special effects, just good contrast against your backgrounds works well.

real15 Design a Sleek Real Estate Website

And We’re Done!

I really hope that you enjoyed this tutorial, and as always I’d appreciate your comments.

You can view the full sized layout by clicking the image below:

real15 Design a Sleek Real Estate Website

About the Author: Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

28 Awesome Comments: Leave Your Comment

  1. User GravatarMike Smith 2nd March 2009

    I like it a lot. the only thing I’d change (for pixel aligning issues) would be putting the white border on the big picture to INNER instead of OUTER as right now the white is out farther than the boxes under it (the monthly special / latest properties boxes).

  2. User GravatarTom 2nd March 2009

    Cheers Mike. Yeah I considered that but kind of liked how it looked being a bit more top heavy. Nonetheless, you’re right in terms of pixel issues, as I’m sure it will make coding it more difficult. Thanks for commenting!

  3. Anon 2nd March 2009

    You should get a better logo. Grunge doesn’t fit in on a real estate website.

  4. User GravatarTom 2nd March 2009

    Fair comment, I’ll consider it with my next web design tutorial.

  5. User GravatarEric Shafer 2nd March 2009

    Featured here: http://www.presidiacreative.com/web-picks-14/

  6. User GravatarGordymac 4th March 2009

    Very clean. Nice job!

  7. User GravatarTom 4th March 2009

    Thanks Gordymac :)

  8. User Gravatarjoyoge designers' bookmark 4th March 2009

    very nice design thanks for the tut..

  9. User GravatarTom 4th March 2009

    No problem! I’m glad you liked the end design.

  10. User GravatarJaswinder 4th March 2009

    Perfect title it is simple sleek & elegant. TH e gradients add a nice effect. Not sure about the top one though.

  11. User GravatarTom 4th March 2009

    Thanks! Do you mean the top gradient as in the main page gradient?

  12. User GravatarLogo Design Guru 4th March 2009

    these are nice. I think it is important for real estate companies to have nice looking websites. If a consumer is going to trust someone to find them a big ticket item like a house, then they should at least look reputable.

  13. User GravatarTom 4th March 2009

    Yeah definitely, I couldn’t agree more. Although saying that, it’s amazing how many real-estate companies lack a basic, clean design.

  14. Rob Stathem 6th March 2009

    Tom, Very nice work!! This is a very crisp, well fleshed out design. This is how every creative comp should be designed before going to the web.

    I love the rounded corner look, although I haven’t found a good remedy for this with CSS. I always have issues with CSS and rounded corners.

    Do you suggest that I cut the rounded corner samples in Photoshop and bring into Dreamweaver as images, or do I try one of the non-image ways of making rounded corners using CSS?

  15. User GravatarTom 7th March 2009

    There are many ways to achieve rounded corners using CSS. Hopefully this tutorial can help you: http://kalsey.com/2003/07/rounded_corners_in_css/

  16. User GravatarT-Law 12th March 2009

    Thanks for this tutorial, here’s my try: http://iniwoo.net/2009/03/12/photoshop-tutorial-sleek-real-estate-web-design/

  17. Phayne 25th March 2009

    I’ve always been a huge fan of your work. I learn a new work of art every tutorial of yours i read. Thank you for all your great work!!!!!

  18. User GravatarTom 25th March 2009

    Thanks for the kind words Phayne, that’s really great to hear. I hope that you’ll continue to read my tutorials :)

  19. User Gravatarphoto retouching 8th May 2009

    Very professional and sleek. Overall a nice result

  20. User Gravatarclippingimages 28th October 2009

    WoW :) Awesome tutorials. Thanks for sharing this nice post.

  21. User GravatarKarl 28th November 2009

    Hi Tom,

    Nice design you made there, i like it.

    Congrats on the new site!

  22. Tim 3rd December 2009

    You forgot to add how you added the logo in the top left! Nice design though.

  23. User Gravatarcyprus 15th January 2010

    wow..thanks for the tutorial there..will surely help me..

  24. User Gravatardubailand 26th January 2010

    wow..this is a cool way to start off my website..thanks

  25. User Gravatarpaphos 28th January 2010

    thanks for the post..really great and sleek website..

  26. User Gravatarlarnarca 28th January 2010

    thanks for the post..like having it to my website..

  27. Upendra Duwadi 2nd March 2010

    Hi Tom,
    Thank you for a such a nice tutorial. I am beginner in photoshop even I had designed some small sites. I followed your tutorial got a good mock up. I really appreciate your work but in some places there are not color codings in the tutorial. If you go for tutorial with more details that that would be great.
    Anyway, you did a good help for me.

    Regards,
    Upendra

  28. User Gravatarchaitanya 13th March 2010

    really cool man.!
    i was really worried about this html background layout.. seeing ur tut i’m feeling hw easy it is!!!!!!!!

    thanks a lot!

Leave a Comment: