33000 Premium resources for designers

Create a simple layout for architecture or real estate

in Tutorials, Web layouts by Razvan on January 17th, 201012 Comments


Today I will show you how to create a simple layout for architecture business.

This layout can be used if you want a website for an architectural or building company or for real estate development, structural engineering, and architectural consulting.
Want to download this PSD layout ?
Register for a VIP account and download our huge collection with 70.000 items. Even if you pay 49 $ you can download ALL our goodies.


Create a new document in Photoshop with the following size : 1000 x 1100 pixels. Set your foreground color to #3a352f.
With Paint Bucket Tool press one time on your document.
I will change my foreground color to #5a733d and with Rectangle Tool I will make a big shape, and I will place it on the top of the layout.

I will select Custom shape tool and I will use the following shape to create a nice sun burst

I will place the shape like in the following image

I will right click on the layer with the sun burst, and I will choose Rasterize Layer. The reason I choose to Rasterize the layer is because I want to delete the bottom part of the sun burst. You can use Eraser Tool to delete the bottom part.

For this layer I will change the blending mode to Overlay, and I will change the opacity value to 10%. These two values you can find them on the top of your layer palette.
After that I will choose Eraser Tool, and with a smooth round brush I will delete the some parts of the sun burst

I will select the sun burst layer and the one with the green shape in my layer palette in the same time, and then I will press on CTRL+E on my keyboard. This shortcut will merge the two layers into a single one. The next step is to add some noise on this layer. you can go to Filter > Noise > Add noise and you can use the following settings

I will use Rounded Rectangle Tool to create a big shape in the middle of the layout

For this shape I will use the following layer styles

I will duplicate this shape( select the layer in your layer palette, and then press on CTRL+J to duplicate it )
With Move Tool I will place the second shape  towards the top of the layout.

For this shape I have used the following layer styles

Between the two layers I will create another dark shape with Ellipse Tool

I will go to Filter > blur > Gaussian blur and I will use the following settings

Then I will lower the opacity value to 65 %, this is my result so far

With Rounded Rectangle Tool I will create another two shapes. the first one will be the body of the website, and the second one will be the footer.

For the body of the layout I will add another layer styles:

This is the result

In the middle of the layout I will add a image.

On the top right part of the header I will create some small circles.

On the body of the layout I will create some shapes with Rounded Rectangle Tool

If you want to have the same result as mine you need to use the following settings

I will create another shape on the right side of the body, and I will add some text and images on this architecture layout.

Under the text menu I will create a button with Rounded Rectangle Tool

For this button I will use the same color as our background , and I will also add some layer styles

This is my final result. please click on image to see the architecture layout.

Want to download this PSD layout? Register for a VIP account and you will be able to download our huge collection with premium downloads : PSD file for each tutorial, Vector files, Photoshop Brushes, vector icons, Photoshop Gradients.

Download Demo

Responses to “Create a simple layout for architecture or real estate”

Leave a reply