Grid setup and the header area

First open a Photoshop template of the 12 grid 960 grid system which you can download here. Increase the Image>Canvas Size width to the size of your screen. I use 1920px so I can see how it will look on larger screens (but this isn’t necessary, it is just a preference).

Use the Paint Bucket Tool to fill the background with a dark colour, we have opted for the darkest #000000 and you should have something like the below image visible. Save your Photoshop file with a different name for this tutorial.

Create a new group and call it header and place the title and navigation we are about to create inside it. Select the text tool and put the title of your company or theme, for this example we will just put Dark. The font we are using is 48pt MgOpen Moderna Bold. Give it a Gradient Overlay going from black to white with opacity 30%, it should be the first gradient selected.

Create some navigation using a common font like Arial 18pt. Place it up against the right side of the grid. Select the rounded rectangle tool (radius 10px) and create a rectangle around the Home text. Give it a Gradient Overlay going from #de1c1c to #fe6161.

Creating the Featured area

Create a new folder called feature and use the rectangle tool to create a feature area that is the width of the page and 250px in height. Also give it a Gradient Overlay going from #de1c1c to #fe6161.

Insert an image to the left of the feature area up against the edge of the grid, I chose this pencil image. Use Magic Eraser to cut out the background and flip it 180 degrees. Then choose free transform and make it approx 17% of its full size so it fits in the feature area. I also removed the brown pencil using the eraser.

Leave a space of one bar between the pencils and your text box and create a feature text headline using the following settings. I have used a small size and non bold for the text underneath as well as some enlarged key words.

You should have something like this.

Use the selection tool to create a box the length of the page like this and create a new layer that is below the main feature rectangle.

Use the gradient tool on the new layer with the black to white gradient to create a glow like below.

Duplicate the layer by right clicking it and selecting this option. Go to Edit>Transform>Rotate 180 degrees and then move the duplicate layer to the top of the box. I just renamed the template also as you may have noticed and lowered the feature text a bit.

Creating the content area

For the content area start off by creating a text box 6 columns wide. Create a heading and some text telling us about your company or product. Then create a slider area using the rounded rectangle tool 300px high and taking up another 6 columns, apply the same red gradient we used before #de1c1c to #fe6161.

Use an image of your product or a portfolio piece and trim it to fit inside the slider. At some arrows beneath the slider and a description of your image. Optionally add a Jquery bar inside the slider image. I used the Milky Icon set.

Creating the footer area

For the footer area we are going to be making another page long rectangle and using the fantastic origami icons from Icon Dock (48x48png). Create your footer group folder and a rectangle approx 120px high and the length of the page. Leave about 300px to the bottom of the page under it. Apply the same red gradient we used before #de1c1c to #fe6161.

Now it is just a matter of filling out the footer content. Put your titles in the red bar along with an origami or other icon that fits. We also used the social media icons from jwloh.

Select View>Extras to view the grid layout and show the 12 Col Grid layer to make sure nothing is overlapping another areas space. This will make it easier to convert to HTML/CSS which we will be doing in an upcoming tutorial.

All done, if you need any help just drop a comment in and I will do my best to get back to you.

You are free to use this file in either commercial or personal projects.

Download the PSD

Update: get the code.