|
| Web Hosting Deals | Holiday Logo Design | Website Header Templates | Register domain | Search Engine Optimisation | Web Hosting |
|
|||||||
| Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials. |
![]() |
|
|
Submit Tools | LinkBack | Thread Tools | Display Modes |
|
||||
|
Hello my friends
Today i will create Tutorial Number 143 from 500 Tutorial Marathon I will show you how to create a Real Estate layout. ![]() ![]() Let's start with a new document Size should be as usual 760x770 pixels background : white Duplicate the background layer ( to duplicate be sure you have the background layer selected in your layer palette, then press on CTRL+J Go to Filter > Noise > Add noise , and use the same settings like me ![]() Then press CTRL+U , and use the following settings : ![]() We have a nice background for our layout. ![]() Grab Rounded rectangle tool, and create a shape like mine ![]() Now download the following image , ![]() and place it like me : ![]() Be sure you select this layer in your layer palette , then with " Single Column Marquee Tool " make a selection like mine ![]() Then press CTRL+J ( this shortcut will create a new layer above the layer with the house ) I have created a new layer via copy Select this new layer on your layer palette , then press on V on your keyboard, or select Move tool , and after that press CTRL+T You can see on your screen the transform controls ![]() With Move toll change the Horizontal scale until you have the same result like mine ![]() Select Rounded rectangle Tool , and create a few shapes. You can see that i have created 6 small shapes with a white color , and i have placed on the top of our layout. This shapes will be our buttons Then i have created a shape on the left side with a blue color. ![]() For the blue shape layer please add the following layer styles ![]() ![]() ![]() ![]() ![]() This is my result. you can see that i have added also some text. this is a simple job and i think everybody can do it alone. If you want you can download a 3D logo from www.logo-3d.com ( a talk-mania website ) and use it instead of my text logo ![]() After that i have placed some forms and text on this orange shape ![]() I will add some text on the body of this layout. in the same time i will add also some images ![]() If you have Talk-Mania Big-Pack you can find a nice set of pixel icons for the next step. Please load the pixel icons brushes and create 3 or 4 icons on the right side of your layout ![]() Now select Line Tool ( be sure the weight is set to 1 px ), and create 2 small lines like me You can see that i placed another text on this layout ![]() Now please go to www.photo-shop-brush.com ( a Talk-mania website ) and download the following set of brushes : Free Photoshop Brushes After you will load the brushes , create a new layer above of all layers , and add some simple details with brush tool. ![]() I hope you will find useful this layout. Please register and download the layout to see how it's made. I am waiting for you tomorrow for another tutorial
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
|
|||
|
wow this is great. It's really useful for me for my real estate website.
|
|
|||
|
nice tutorial. I love the simplicity of your tutorials! Great!
![]() |
|
|||
|
Good evening people , I have a few questions hope you guys can help me?
1) how to make buying,selling,renting,company clickable? Example selling page ? Should i duplicate this page and change it? 2) How do i implement this into my webpage ? 3) How do i do redirecting links? Thanks in advance guys . |
|
||||
|
now were talking layouts!
very nice design admin. -turbocharged
__________________
OUTLAW-WEB.NET |
|
|||
|
I salute this one.. very simple but eye catchy.
__________________
Philippines Freelance Web offers Web Design, Logo Design, Web Redesign, Website Development, Website Maintenance in freelance rate. For more information please visit our website. |
![]() |
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|