First we need some inspiration. Nice image which will move our project forward. I found one on SXC.HU and You can download it from there. www.sxc.hu Create a new document with 1024x700 px and white background. Now View -> New Guide and use 127px Vertical, and then make this same thing but put 897px Vertical (Guides are very helpful, use them always when You can)
We have our work field ready. Now we have to use our sxc.hu image mentioned above but first we have to scale it a little. Open this image in photoshop and use Image -> Image Size (Alt + Ctrl + I) and set width to 650px. Now drag thumbnail from layers palletes to our document.
Now using Move Tool (V) place this image like on picture (a part of sky will be outside the document), and using Rectangular Marquee tool (M) select a part from bottom and hit delete (layer with top image have to be active layer).
Create New Layer, use Rectangular Marquee Tool (M) and using fixed size make a selection. Fill this selection with #fae5c8. Keep our selection, use Select -> Transform Selection, and with Shift key rotate it by 45°, place it in left corner and hit delete. Now Select -> Deselect (Ctrl + D)
Now duplicate this layer (Ctrl + J), then Edit -> Transform -> Flip Horizontal, and move this layer to get the shape like bellow. Marge those two layers (right click on duplicated layer and Marge Down)
Grab Elliptical Marquee Tool (M), use 18x18 px fixed size and place this selection as on image bellow. Fill this selection with #916047. Now Select -> Modify -> Contract , use 3px, hit OK and then Delete.
Make sure, that You have our new object layer active then use Edit -> Free Transform (Ctrl + T) and place it like bellow.
Now lets make a string. Make new layer, select Brush Tool (B) and set brush to regular soft 2px brush and use #612915 for foreground color. Use Pen Tool (P) and draw something like string. Next click right mouse button and select Stroke Patch. Next use Eraser Tool and erase a small part of our string. With this same Eraser Tool erase some part of the sky to blend it with white background (use big size, soft eraser - remember to select house layer first).
Now lets make something on the right side. This will be easy. Just take Rectangular Marquee Tool (M) with fixed 205x675 px size and make selection sticked to right guide. Make new layer and fill this selection with #eef1d9. And that will be all for now, we will fill this space with content later.
Every site need a menu - we will make it now. Use Rounded Rectangle Tool (U), set Radius to 5px, make new layer and draw first button (color isn't important). Place this layer under the layer with our house. Next hold Ctrl button and click on our future button layer thumbnail - this will make a selection.
Select Gradient Tool (G) and with settings like bellow drag this gradient over our button layer.
Apply layer style for this button
Duplicate our button layer (Ctrl+J) and move it right. Do it twice more.
Now lets make something to make those buttons look better. Make new layer over our buttons and our home/house layer. Grab Clone Stamp Tool (S) and use this settings.
Now hold Alt key, click somewhere on the grass, this will be our source for clone stamp. Now just paint like on image bellow. Remember to have always grass as Your source. You can zoom a little if You want.
Now use Rounded Rectangle Tool (U) with 5px Radius and draw a shape like this on new layer
With this same tool draw another shape on the bottom.
Now it's time for a little content. First - Buttons.
Now lets make search bar.
Nothing hard here - just some text. Only interesting thing is Search button. How to make it? First draw a rectangle.
Now apply those blending options.
In easy way we can feel rest of our template. I make it only to check how it will look. Normally You will add content in coding part (xHTML and CSS). Typing text in photoshop is really easy. I used two icons on my final template. You can get both here
And the final result:
Reply