Create a simple layout for architecture or real estate
->
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.
















































Thank you for the amazing post! Like it a lot!
Really like this, so simple and easy to create.
Easy to bring into HTML / CSS also.
Keep up the good work!
thank you for the great tutorial.
Really great layout Razvan, nice and clean. Good to see the final result of what you were working on
Awesome tutorial with amezing web layout
you are genus
Very good tutorial
Thanks so much for posting it
keep up good work
God bless you
This is a great frekin tutorial i love this web design! Perfect for a real estate site.
This is a really nice template and will work well. Have an architect client and will propose something similar.
Great tutorial mate, very informative!
This is a great tutorial. I was looking at the image you added to the header I noticed there is some kind of color effect going on with the picture. How do you make that effect I would like to use that effect on different images.
Thanks for the tutorial
I did not change the effect on that image. all i have applied is a sharp filter
Really great layout , I’ve create one by following your tutorial , but I really need another tutorial on how to convert this PSD layout into HTML one , especially how to create the slide show to be working well .
if you have a tutorial like this I will be very glad to give it to me
.
.
thank you Razvan
Thanks for the great tutorial. I have utilized it with some variation for my personal portfolio site at http://www.willhull.com/
I was also able to integrate it with jQuery/jFlow and Wordpress.
What do you think? Did it turn out well?