This will be our final result:
1 - Create a new document in Photoshop, with 1024px width and 1300px height. Fill the background with #669999.
2 - Create a new layer. Pick up the brush tool with 500px smooth, and make a point on the top on the layout. Change the layer opacity to 84% and change the blending mode to hard Light:
3 - Now, let’s create the following layer sets for our design:
-Content
-Slider
-Navigation
-Form
4 - Create a new layer named header in the Navigation layer set. With the rectangular marquee tool, draw a full-width rectangle of 40px height. Fill it with #333333.
5 - Pick up the text tool and select the Rockwell bold font, with a 10pt size. In the left corner of our design, write the site name (In our example, it is MisterDesign) and the site navigation menu on the right corner.
6 – Pick up the rounded rectangle tool and draw a rounded rectangle around the “Home” page of our navigation. Fill the background with #669999. This will indicate the active page. Don’t forget to replace the navigation menu text layer on top of this one. Right now, we already have a completed website header/navigation.
7 - Now, let’s populate the content layer set. The first thing to do is to create a slogan. I chose “Websites that rocks”, which is probably already used by dozens of sites. But, that’s just an example 
Pick up the text tool with the Rockwell bold font and set text size to 36px. Write your slogan in #eeeeee color, and then duplicate the slogan layer (Cmd + J)
8 - Select the copy of the slogan layer, place it below the slogan layer. Set its color to #555555 and its opacity to 50%. Then, select the Move tool and move the layer 1px right and 1px bottom using the arrows keys.
It should look like this:
9 - Now let’s showcase our most recent design. To do so, I used a 511*309px screenshot downloaded on Flickr. Place the screenshot on the right part of the design.
10 - Once you added the screenshot to the design, pick up the Polygonal lasso tool and draw a triangle in the top right corner of the screenshot. Then, delete the selection:
11 - Draw a new triangle as shown in the screenshot below. Fill the background with white (#FFFFFF)
12 - On the left part, pick up the Text tool and draw a square. Then type some text in it. Once don, select the text, open the Paragraph Window (PS menu -> Window -> Paragraph) and justify the text.
At this point here how the design should look:
13 - We’re now done with the main content area. The next part is to design a slider to showcase some of the company best designs. Create a new layer in the slider layer set and pick up the rounded rectangle tool. Draw a 875*238px white (#ffffff) rounded rectangle. Once done, right click on the layer, choose Rasterize layer and finally rename the layer slider.
14 - Pick up the Ellipse tool and draw a circle on the middle left side of the rounded rectangle. Do the same on the middle right side of the rectangle, then rasterize the two layers.
15 - On the Layers window, click on the first circle layer and press Cmd+E to merge it down with the rounded rectangle layer. Do the same with the other circle layer. At this point, you should have a shape like this one:
16 - Right click on the slider layer, and select Blending options. Add a 5px #CCCCCC stroke around the shape. The position used is outside.
17 - Now, let’s add navigation arrows to the slider: Pick up the text tool with the Rockwell font, 10pt and #333333 color. Use the < and > symbols to create navigations arrows. The result should look like this:
18 - Let’s populate the slider with items. To do it, I simply used thumbs from previous Photoshop tutorials. The size of the thumbs is 224*179px. each thumb have a #CCCCCC 5px stroke around it. The position used is inside.
Once you added the thumbs, our slider is finished.
19 - The last part of our design is the footer. Create a new layer (named footer in this example) in the form layer set, pick up the Reactangular marquee tool and draw a 354px height rectangle. Fill it with #333333.
20 - We definitely should add a nice border on the top of our footer. To do so, I have used the rectangular marquee tool to draw a 7px height rectangle. The background color is black (#000000).
21 - Time to add a “Request Quote” form in the footer. The first thing to do is to create a title, so clients will know what this form’s purpose. I have chosen the Rockwell font, bold, 10pt, and wrote the text “Request a quote now, get it in 30 minutes” in white (#FFFFFF), capital letters.
22 - Using the Rockwell font, write the form fields. I have used a 18pt line height.
23 - Pick up the Rectangular marquee tool to draw the first text field. Width is 347px and height is 32px, filled with white (#FFFFFF) background. Once done, select the text field layer in the Layers window, and select blending options. Add a stroke around the text field using the following parameters:
24 - Once one of the fields has been created, simply duplicate its layer to create the other text fields. Once done, the result should look like the following:
25 - Select the last text field, press Cmd+T and resize it. We need to display a bigger field as the client will add his project guidelines and requirements in that field.
26 - Our form is almost complete, but a very important thing is still missing: A submit button. To create one, I have used the Rockwell font, bold, 10pt in white (#FFFFFF) color, and simply wrote “Send!”.
27 - To create the button background, pick up the Rounded rectangle tool and draw a rounded rectangle around the “Send!” text. Background color used is #669999.
28 - Our completed form should look like this:
29 - In order to fill out the empty space on the right side of the footer, what about some clients testimonials? Title is Rockwell font, bold, 10pt. Text is Georgia, italic, 10pt. Client name is Rockwell, bold, 8pt.
30 - All right, the tutorial is finished. Look at what we created together:
Get a commercial/public use licence for this PSD (More info)
