Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Simple Layout for Architecture or Real Estate

Create a Simple Layout for Architecture or Real Estate



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.

Img

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

Img

I will place the shape like in the following image

Img

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.

Img

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

Img

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

Img

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

Img

For this shape I will use the following layer styles

Img

Img

Img

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.

Img

For this shape I have used the following layer styles

Img

Img

Img

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

Img

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

Img

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

Img

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.

Img

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

Img

Img

Img

This is the result

Img

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

Img

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

Img

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

Img

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

Img

Img

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

Img

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

Img

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

Img

Img

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

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: