Create a new document with the dimensions 850x1012, set the colors #0b3349 as your foreground and #156894 as your background select the gradient tool with a linear gradient. On your background layer begin to drag the gradient starting from the top to about a quarter of the way down your canvas.
For this next part you need this image. Save the image to your desktop then open it up in photoshop. Drag the image over to your canvas, flip and resize the clouds to fit your canvas. Add a layer mask to your clouds image then drag a linear gradient from the left side of the clouds image, right click your layer mask in your layers window and goto "apply layer mask". Add another layer mask then drag the linear gradient from the bottom, right click the mask in the layers window then goto "apply layer mask". Do the same for the right side. The look were going for is this.
Once you have something similar duplicate the clouds layer, then hide which ever clouds layer is on top. The bottom clouds layer we need to blur by about 4 pixels so goto "filter > blur > guassian blur" blur by 4 pixels. Unhide the top clouds layer. Set layer opacity to 80% then set blending mode to luminosity. You should have something like this.
Add your website title and slogan in the top left corner.
The layer styles for the yellow bit of the title are as follows.
The layer styles for the light blue part of the title are exactly the same as above just change the gradient overlay to.
On the right side of your canvas add your navigation box using the rounded rectangle tool.
The layer styles for the navigation are.
Add your text to your navigation.
Leave quite a big gap beneath the clouds and create two white rectangles using your preferred rectangle tool. Fill them with the color #eeeeee. Then add a drop shadow.
Above your biggest content box add a catchy sentence use the same layer styles as your title to make it stand out a bit.
In the top bit of your big content box add some content, the icon I used next to the welcome text is from dryicons.com.
Underneath your welcome text and welcome content add 3 dividers (see red arrows). To make dividers like the ones below just create two 1 pixels lines on top of each other.
Using the rectangular marquee tool create two rectangles inbetween the dividers, fill the selections with the color white, also make sure you have two individual layers.
Add this gradient overlay to your two rectangles.
You should have something like this.
In your boxes that you just created add some icons and some services you may offer, again these icons are from dryicons.com.
In your smaller content box add a sample form including text fields and labels. Above your smaller content box add a rounded rectangle with the wording "free quote" on it. Press CTRL+T to rotate the box and lettering slightly. The layer styles for the rounded rectangle are the same as the yellow text in the title.
Underneath the smaller content box add some more content regarding, services, work etc… Use the divider technique explained earlier to divide each part. Maybe add some more spiffy icons from dryicons.com.
Then finally add a simple text footer. All finished.
More Tutorials: 
