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!
A blank document, size of your choice, resolution 72.
Fill the background with solid Black Color.
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.
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.
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!
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.
Now I’m making a search panel. Choose the Rounded Rectangle Tool and draw the shape with 70% opacity.
Now I selected Pen Tool and draw this shape and filled with Solid Black Color.
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.
If you want to create a drop down effect, choose this Shape and draw it inside the textfield.
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.
We draw the featured area now. So first we choose Rounded Rectangle Tool and draw this shape with 60% opacity.
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.
We should add a little Drop Shadow on image. This will give it a boost.
And if we are adding layer styles, what’s wrong with a stroke.
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.
Here’s the final result of the slideshow.
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.
Now its time to fill the data in the slider. Choose Rounded Rectangle tool and draw a box shape.
Now add some images and use Clipping Mask technique. And we’re done.
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.
Fill the footer with links.
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.
There you go.