PSD to HTML5 CSS3 of Real Estate Template

THIS IS WHAT WE WILL BE MAKING!

 Step 1

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

Step 2

Fill the background with solid Black Color.

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.

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 ofstroke 5 px.

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.

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!

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 aslogan here.

Step 8

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

Step 9

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

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.

Step 11

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

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.

Step 13

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

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.

Step 15

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

Step 16

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

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.

Step 18

Here’s the final result of the slideshow.

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.

Step 20

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

Step 21

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

Images Used: Home1 Home2 Home3

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.

Step 23

Fill the footer with links.

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.

DONE..!

There you go.