Her

Home Photoshop Tutorials Web Layout Architecture Web Template

Architecture Web Template

Author: amitk Author's URL: www.talk-mania.com More by this author

Open a new document in photoshop ( 760 x 700 pixels ) with a white background.

Select Rounded Rectangle Tool ( set Radius to 5 ) and make a rectangle like in the following image. (next image is resized )

I have used the following color: #dfefff

image 1

Then add the following layer style

image 2

Select Line Tool ( set the weight to 1 pixel ), and create one line ( use a grey color ) like in the following image

image 3
Click to enlarge

Press on Add Layer Mask

image 4

Select Gradient Tool , hold the Shift key pressed and make a line like in the next image

image 5
Click to enlarge

Duplicate this Layer ( line layer ) and add the following layer style

image 6

Then change the Fill settings to 0 %

image 7

Grab the Rectangle Tool. Change the Foreground color to white and make a simple rectangle, and place it above the lines

image 8
Click to enlarge

Very simple , and in my opinion it has a nice effect

Now i will add some images from my stock collection

image 9
Click to enlarge

Now you can buy this kind of images , or you can find on free stock images.

Now we will add some more details. I think it will be nice if i will add a house plan

image 10
Click to enlarge

You can change the opacity if you like in this way.

Now we will add some text buttons

image 11

Now add more lines near your text buttons

image 12

You can add some text alone

image 13
Click to enlarge

Then chose a small font , and with the Type Tool write some minus signs " ------- "

image 14

Now add a logo on your header

image 15

Then change the angle size . this is my final layout

Architecture Web Template
Click to enlarge