PSDFan Extra

Design a Sleek Real Estate Website

Final Image

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

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).

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.

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.

Step 4

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

Step 5

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

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.

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.

Step 8

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

Step 9

Now apply an inner shadow effect to your menu layer.

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.

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.

Step 12

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

Step 13

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

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.

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.

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:

Download Source File for this Tutorial


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

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.

Leave a comment

36 Comments:

  1. Mike Smith says:

    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).

    • Tom says:

      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!

  2. Anon says:

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

  3. Gordymac says:

    Very clean. Nice job!

  4. very nice design thanks for the tut..

  5. Jaswinder says:

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

  6. 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.

    • Tom says:

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

  7. Rob Stathem says:

    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?

  8. Tom says:

    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/

  9. Phayne says:

    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!!!!!

  10. Very professional and sleek. Overall a nice result

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

  12. Karl says:

    Hi Tom,

    Nice design you made there, i like it.

    Congrats on the new site!

  13. Tim says:

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

  14. cyprus says:

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

  15. dubailand says:

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

  16. paphos says:

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

  17. larnarca says:

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

  18. Upendra Duwadi says:

    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

  19. chaitanya says:

    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!

  20. Thanks for the Tutorial!
    I translated it to Portuguese and will go post on my blog, with due credits of course.

    Hugs

  21. e-otel says:

    very nice design thanks for the tut..

  22. chirahan says:

    Enjoyed the tutorial very much, thank you.

  23. WAEL says:

    GOOD POST
    THANXXXX

  24. jake wand says:

    In this blog is very nice post….

  25. Salmy says:

    stuck on step 5, i have a dark background and a header background as different layers, can’t seem 2 get the grad right, help?

  26. excellent tutorial for newbie. Help to learn techniques in adobe. I wan to download the PSD file. How can i download it ?

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY