Creating a Real Estate Web Design in Photoshop

AD

This is a website template that can work for a real estate developer or a real estate consulting firm.

In this tutorial, I have applied a different approach compared to the previous jewelry website tutorial. There we used patterns, shapes and designs but here, I’m using bitmaps i.e. stock photos.  This technique is particularly helpful if you are a beginner or you want the design get made instantly.

Psst: Clients who are not very web savvy love these kind of designs, not the clean minimalist ones which we like.

This is what we will be making!

Template-Tutorial-in-Photoshop

 Step 1

A blank document, size of your choice, resolution 72.

Real-Estate-Template-Tutorial-in-Photoshop

Step 2

Fill the background with solid Black Color.

Real-Estate-Template-Tutorial

Step 3

Add picture into the background and the use Clipping Mask to cut off the unnecessary parts. Just right click on any layer and click Create Clipping Mask.

Real-Estate-Template-Tutorial-in-Photoshop

Step 4

Now we need a LOGO. Choose the Ellipse Tool, Draw the circle, fill it with color #722a0b and give it a layer style of stroke 5 px.

Real-Estate-Template

Step 5

Add the text in font Opificio and an icon, and we’re done. Most probably, you’ll have a logo from client. I just made this one as a filler.

Real-Estate-layout-Tutorial-in-Photoshop

Step 6

Time for navigation bar. This is something ‘smart’ I did today. Instead of designing something for the designer’s eye, I designed it for the client’s eye. This menu is made quickly, its colorful so its good. You can fill a little gradients in them to make them glossy. Designers don’t like it but clients do!

Weblayout-Tutorial-in-Photoshop

Step 7

And just like that, we got our header. You can spot the blank space between the nav bar and the logo, you can easily fit a slogan here.

Tutorial-in-Photoshop

Step 8

Now I’m making a search panel. Choose the Rounded Rectangle Tool and draw the shape with 70% opacity.

Real-Estate-Template

Step 9

Now I selected Pen Tool and draw this shape and filled with Solid Black Color.

Real-Estate-Template-Tutorial-in-Photoshop

Step 10

Lets draw the form textfields. Choose Rounded Rectangle Tool and draw this shape. By the way, the text “Find Home” is again written in Opificio.

Elegant-Template-Tutorial-in-Photoshop

Step 11

If you want to create a drop down effect, choose this Shape and draw it inside the textfield.

Real-Estate-Template-Tutorial-in-Photoshop

Step 12

This is what I made. It can suit a big web directory but if you’re designing a site for a small town dealer, you’ll can obviously alter it a little.

Web-Layout-Tutorial-in-Photoshop

Step 13

We draw the featured area now. So first we choose Rounded Rectangle Tool and draw this shape with 60% opacity.

Tutorial-in-Photoshop

Step 14

Add a picture into the featured area and the good old technique of Clipping Mask to cut off the unnecessary parts. You just have to right click on any layer’s thumbnail in the layer’s panel and click Create Clipping Mask.

Web-Layout-Tutorial-in-Photoshop

Step 15

We should add a little Drop Shadow on image. This will give it a boost.

Template-Tutorial-in-Photoshop

Step 16

And if we are adding layer styles, what’s wrong with a stroke.

Easy-Tutorial-in-Photoshop

Step 17

Time to create Next/Previous buttons on the edges. So I chose the ellipse tool to draw a circle and then filled the same Custom Shape which we used in the form.

Real-Estate-Template-Tutorial-in-Photoshop

Step 18

Here’s the final result of the slideshow.

Web-Layout-Tutorial-in-Photoshop

Step 19

And now let’s create a slider in the end. I used it to display “Special Deals”. This kind of slider works great on almost all kinds of websites and blogs.

Template-Tutorial-in-Photoshop

Step 20

Now its time to fill the data in the slider. Choose Rounded Rectangle tool and draw a box shape.

Photoshop-Tutorial

Step 21

Now add some images and use Clipping Mask technique. And we’re done.

Images Used: Home1 Home2 Home3

Real-Estate-Template-Tutorial-in-Photoshop

Step 22

And finally, its time for Footer. Choose the Rounded Rectangle Tool, draw the shape and some noise in this shape. To add noise, click on Filter Menu> Noise.

Tutorial-in-Photoshop

Step 23

Fill the footer with links.

Template-Tutorial-in-Photoshop

Step 24

I went crazy on contact details. I didn’t add contact details in the conventional method, I added my visiting/business card, you can also do the same.

Easy-Tutorial-in-Photoshop

Done..!

There you go.

Template-Tutorial-in-Photoshop

create free website wix below post

Further Related Readings

Comments
  1. ivan larco January 27, 2012 at 8:38 pm

    nice stuff and nice web design photo shop for real estate.

  2. Claudio January 30, 2012 at 3:58 pm

    Wow nice, excellent, but how to coding web like that? I mean, PSD to HTML?

    1. Tayyab February 1, 2012 at 5:17 am

      Hello Claudio!

      Our routine is
      Friday 1: Photoshop tutorial
      Friday 2: PSD download
      Friday 3: HTML tutorial

      so this Friday it’s PSD template download and then on next Friday, it’ll be HTML tutorial.

  3. ronwolpa February 16, 2012 at 3:06 pm

    Very interesting to design the image then coding.
    Since table design was deprecated I´ve felt a bit lost because I was used to draw the site , slice and write the code with Fireworks.
    Of course I had to clear it out the code by hand , eliminate the js scripts redundances , etc.
    The method described on this tutorial allows to draw the graphics already considering the coding.
    The question is there a forum to discuss matters concerning the real estate site ?? (lay out got a bit off set on IE8 and carousel has not worked on the latest Chrome version);
    Another question : is it necessary to employ 960 grid system to have more precision to place elements onto the background image ?

    1. Jawad February 18, 2012 at 2:51 am

      that’s odd, I checked it on Chrome latest, it worked fine. I’m not sure about IE8 though, it might not work properly overthere but if we use CSS2 instead of CSS3, it will work.
      You don’t have employ 960 grid, I’m used to it so I just did it.

      Fireworks certainly has given us good memories of web design…. those were simple and easy days… aaah I love the past.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved