Create a real estate web layout in Photoshop
Hello! For today I have prepared another psd template and this time I will teach you how to create a Real Estate website layout in Photoshop. In this template I will show you how easy is to create a real estate website layout using Photoshop.
Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members
To create this template I have used the following resources:
- Colorful Skyscrapers Vector Icons from our Premium Files
- Basics tools (rectangle tool, ellipse tool, line tool, etc) in Photoshop
Let’s start the tutorial!
Open Photoshop and create a new document 1020 by 1110px
Set the foreground color to #bcbdac and with Paint Bucket Tool push one time on your document .
Step 1 – Creating the top area
Select Rectangle Tool and create a shape on the top of the document, dimensions: 1020 by 151px, as a color I have used: #8f8f87
Next I will select Line Tool and I will create a tiny line (1px width) on the top . As a color I have used #4d4d4d. On the top of this line (on the right) I will create another shape using Rounded Rectangle Tool (radius 10px). With Type Tool I will add “Login| Register”
On the left side I will add my logo – TrendyTuts – here you should add your logo, then on the right side I will try to create a search bar. To create the search bar I will select Rounded Rectangle Tool and I will create a shape, dimension: 230 by 28px, as a color I have used: #bcbdac
Then I will select Rectangle Tool and I will create a small shape, as a color I have used #cfbe27. Make sure that on your layer palette this rectangle is below the shape created on previous step. Using type tool I will add some text, and here’s my result for search bar.
Step 2 – Creating the navigation
To create the navigation I will select Rounded Rectangle Tool and I will create this shape. Dimensions: 912 by 58px, radius 10px, color: #3f3f3f
Next I will select Pen Tool and I will draw this on the left side of the navigation:
I will press Ctrl+Shift+Alt+N to create a new layer on my layer palette, than (make sure that you still have Pen Tool selected) right click on the area created with Pen Tool and choose make selection.
A new window will pop up, press ok. You shold have now the area created with Pen Tool selected. Next set the foreground color to #3f3f3f, select Paint Bucket Tool and click on the selected area
Once you have clicked with Paint Bucket Tool and the selection is filled with the foreground color, press Ctrl + D to deselect.
You should have something like this now:
To create a nice shadow, we will need to apply a gaussian blur. Go to Filter>Blur>Gaussian Blur and here for radius choose 4.2px
I will proceed in the same way for the right side, and here is my result:
I think you really like to navigation, don’t you?
Next if you will look on my final preview, you will see that I have created the navigation in 2 colors. To create that, you will need to duplicate the navigation bar. To duplicate it, you will need to select the corresponding layer on the layer palette, than right click on it and choose duplicate.
A new layer with the same dimension and color it will be created. Right click on it and here choose: Rasterize Layer
Next select Rectangular Marque Tool and make a similar selection over the navigation (make sure that you have selected the layer which has been Resterized):
Hit Delete on your keyboard than Ctrl +D to deselect and apply this layer styles for your navigation (that one which has been Resterized)
Next I will add the links for the navigation. Here is my final result for navigation:
Step 3 – Creating the featured area
Featured Area it’s really easy to create. First download colorful skyscrapers from our Premium Files and add a orange skyscraper on this document, than with Type Tool I will add some text and with Rectangle Tool I will create that button
My result for Featured Area:
Step 3 – Creating the content area
To create the content area, I will select first Rounded Rectangle Tool and I will create this shape.: 927by 520px, color: #e3e4da
Next I will select Rectangle Tool and I will create this shape on the footer. Dimensions: 1020 by 156px as a color choose: #8b8b7d
Now I will use Rounded Rectangle Tool and I will create 5 shapes, 126 by 78px and I will apply this layer styles:
Then I will use again some colorful skyscrapers from our Premium Files.
With Pen Tool I will create some arrows. I will create them in the same way that I have create the shadow for the navigation, but here I will not apply the gaussian blur, instead I will apply this layer styles:
Next I would like to create a shadow just below my images. To do that I will select first Ellipse Tool and I will create this black shape.
Then I will go to Filter>Blur>Gaussian Blur and here choose 10px. Select Rectangular Marque Tool and make a similar selection
Hit Delete on your keyboard and than press Ctrl + D to deselect. In the same way I will create a shadow in the middle of the content area
Here is my result:
Now with type tool I will add the content.
Here is my final result for the content area
Want to Download the Source File? (CSS/XHTML included)
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
The tutorial is finished now! Stray tuned because some new and trendy web layouts tutorials will be posted pretty soon on trendyTUTS.com.blog comments powered by Disqus