This design tutorial will show you how to create a clean, professional, dark blog layout using Photoshop. This tutorial uses the 960 Grid System, which keeps the layout looking semantic and organised.

Resources
Before you begin this tutorial, you will need to download these resources, in order to complete the design:

• 960 Grid System
• 20 Seamless Grid Patterns from Premium Pixels
• Post Images

Final Preview

Download the 960 Grid System
1 Before you begin to create this layout, you need to download the 960 grid system and then open in Photoshop, the 16 column grid template.

Download the 960 Grid System here

1.1 Once you have opened the 16 col. Grid template, you then need to extend the canvas size so that it is 1800px in height. You can do this by adjusting the canvas size, like so:

Applying the Background Colour & Pattern
2 The next step in the tutorial is to apply the background colour and pattern to the canvas. To do this, first change the foreground colour to #2a2a2a, then using the paint bucket tool (G) apply the foreground colour to the background layer, like so:

2.2 To complete the background, you need to apply a grid pattern to the background layer. Using the grid patterns from the download you got before beginning this tutorial, follow these steps, in order to apply the grid pattern:

Right-Click the Background layer and select ‘Blending Options’ from the menu list. Then in the ‘Pattern Overlay’ tab, load the ‘grid_patterns.pat’ file from the download and then select ‘grid 17’. Adjust the opacity to 2% like so:

The background should now look like this:

Creating the Header Borders and Navigation Bar
3 The next part in creating this layout is to create the header border bars and the navigation bar. Start by setting the foreground colour to #1a1a1a, and then create a selection on a new layer, using the rectangular marquee tool (M), with a height of 8px and the width of the canvas. Then using the paint bucket tool (G) fill the selection with the new foreground colour, like so:

3.1 Then apply a 1px Stroke layer style setting to the top bar you just created, in the blending options window, for the layer, like so:

Stroke

The top bar should now look like this:

3.2 Now we need to create the second grey bar, straight underneath the top bar. Again, create a new layer, then change the foreground colour to #353535, then using the rectangular marquee tool (M), create a selection on the new layer, with a height of 3px and the full width of the canvas. Then fill the selection with the foreground colour using the paint bucket tool (G).

3.3 To complete this second bar, apply a drop shadow layer style setting to the layer, in the blending options window, like so:

Drop Shadow

3.4 The next step is to duplicate both top bar layers. You can do this by selecting both layers, then Right-Click and select ‘Duplicate Layers’ from the menu list. You should now have another two layers with the same bars.

You then need to select both duplicated layers and then select ‘Free Transform’ from the ‘Edit’ tab in the file menu. Once you have done this, the two layers should be highlighted in a box. You then need to Right-Click this box and select ‘Rotate 180’ like so:

The next thing we need to do, is to position the rotated bars 98px from the top bars, you can position a guide in order to help you do this.

Tip: You can toggle guides on and off in the file menu. View > Show > Guides

3.5 Now that the header bars have been created, we can now create the navigation bar. To do this, change the foreground colour to #d0cebd, then create a selection on a new layer 45px in height and the full width of the canvas, underneath the bottom bars. You then need to fill the selection with the foreground colour like so:

3.6 To finish the navigation bar, apply a 1px stroke, the same as the top bar.

3.7 To complete the header, duplicate the top bars again and position them underneath the navigation bar. Keep the same layer style settings as well. Your layout should now look like this:

Header Content
4 The next steps in this tutorial is to create the header content, which includes the logo, navigation and search box. First let’s create the logo. To do this, create a new layer, and then select the Type tool (T), change the text settings to the ones below and type out the text based logo, like so:

Font: Rockwell, Style: Regular, Size: 36pt, Anti Aliasing: Sharp, Colour: #ffffff

4.1 Now you need to create a blue bar 416px width x 6px height. Set the foreground colour to #00baff, then on a new layer create the blue bar, like so:

You need to position the blue bar so that it is 3px from the logo text and in line with the logo.

4.2 Now you need to create the slogan text which goes 3px underneath the blue bar you just created. Again on a new layer, select the type tool (T) and type out the slogan using these text settings:

Font: Rockwell, Style: Regular, Size: 14pt, Anti Aliasing: Sharp, Colour: #ffffff

Position the logo, so that it is centred vertically between the top bars and the navigation bar.

4.3 The next component of the header we are going to create now is the search box. To create the search box, start by setting the foreground colour to # 1a1a1a, then on a new layer, select the rounded rectangle tool (U), and create a rounded rectangle with a radius of 5px, with a width of 300px, so that it overhangs the top of the canvas, so that only the bottom rounded corners are showing. Then position it so that it is 60px from the top of the canvas, like so:

4.4 Now reduce the opacity of the search box layer to 60%, it should now look like this:

4.5 Now you need to create the search bar and button on separate layers. Using the same foreground colour create a rounded rectangle 210px wide by 30px height for the search bar. Then create another rounded rectangle on another layer with a width of 50px and a height of 30px. Then position them so that they are centralised inside the search box, like so:

4.6 Now apply these layer style settings to both layers in the blending options window for each layer.

Tip: You can copy layer style settings easily, by Right-Clicking on the layer and selecting ‘Copy layer Style’ from the menu list.

Drop Shadow

Inner Shadow

Gradient

The search bar and search button should now look like this:

To finish the search box, just add the text ‘SEARCH’ into the search button using these text settings:

Font: Arial, Style: Regular, Size: 8pt, Anti Aliasing: Sharp, Colour: #ffffff

4.7 Now we are going to add the navigation content to the nav bar. First set the foreground colour to #2a2a2a and then on a new layer, type out the navigation links using the type tool (T), using these text settings. There should be a gap of 45px or 11 spaces between each navigation link. Position the text so that it is 58px from the left and vertically central inside the navigation bar.

Font: Georgia, Style: Regular, Size: 14pt, Anti Aliasing: Sharp, Colour: #2a2a2a

4.8 We now need to create the navigation button or hover state for the layout. To do this create a new layer, then set the foreground colour to #00baff, and then using the rounded rectangle tool (U), create a rounded rectangle 84px wide by 30px height. Then position it over the ‘Home’ link so that it is centred.

You then need to position the layer so that it underneath the navigation text in the layer properties box. By doing this, the navigation text will appear over the button.

4.9 The final steps in the navigation are to add some layer style settings to the navigation button and the navigation text. We are going to use the same layer style settings as the ones we applied to the search bar and button layers. You can quickly copy these layer style settings and paste them on the nav text and button layers.

That is the header complete, your layout should now look like this:

Main Content – Blog Posts
5 Now we are going to create the blog posts for this layout. We will start by just creating one blog post and the post content and then you can simply just duplicate the post with all the layers and create the rest.

First set the foreground colour to #1e1e1e, then on a new layer, create a rounded rectangle with a radius of 5px, a width of 600px and a height of 230px. Then position it so that it is 37px from the bottom bar, like so:

5.1 The next step is to create the blue top panel of the blog post background. Start by setting the foreground colour to #00baff, then on a new layer create another rounded rectangle, the same width as the blog post background, but only 10px in height.

Then using a guide, square the edge of the rounded rectangle so that the height is 34px, like so:

5.2 Now apply a 1px inner shadow to the blue bar with the colour #ffffff (White).

5.3 Now we need to add the bottom half to the blog post background. To do this, create a new layer, then set the foreground colour to #1b1b1b, then following similar steps to the blue blog post title bar, create a rounded rectangle the width of the post background and then on a separate layer, square the top so that the height for the bottom half is 39px.

5.4 To finish off the bottom half of the blog post background, create two lines using the line tool (U) on separate layers, the same width as the blog post background. Use these colour settings:

Top Line
Colour: #343434

Bottom Line
Colour: #000000

Your blog post background should now look like this:

5.5 Now add the title and the date on separate layers to the blog post, position them centred vertically inside the blue bar of the blog post background, using these text settings:

Post Title
Font: Georgia, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: #ffffff

Date
Font: Arial, Style: Regular, Size: 10pt, Anti Aliasing: Sharp, Colour: #ffffff

5.6 Now you need to add the post image to the blog post box. You can use the image I have provided in the download section, or you can use your own. The size of the image is 254px wide by 161px height, which includes the white border.

Position the image so that it is 18px below the blue title bar and in line with the start of the post title, like so:

5.7 Now you need to add the post text on a new layer using the type tool (T). Use these text settings:

Font: Georgia, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #ffffff

5.8 Now you need to add the comment text underneath the break lines in the post box, like so:

Font: Arial, Style: Regular, Size: 10pt, Anti Aliasing: Sharp, Colour: #353535

5.9 To finish the blog post, create a button with the colour #d0cebd using the rounded rectangle. The width is 80px with a height of 24px. Once you have done that, apply the same layer style settings as the navigation button. Finish the button by adding the text ‘Read More’ using the same text settings as the comment text.

Finally position the button like so:

Now to complete the main content, select all of the blog post layers and duplicate them 5 times, so that you have 5 posts. Leave a gap of 31px between each post. Your layout should now look like this:

Sidebar Content
6 We are now going to create the sidebar content for this layout. First we are going to create the advertisement section. Using the same method as we used to create the blog post background, create a rounded sidebar box, 300px wide by 480px in height. Then create the blue title bar, the same as we did for the blog post title bar. You should have something like this:

6.1 Now add the title text to the box, like so:

Font: Georgia, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: #ffffff

6.2 Now for the advertisements, just simply set the foreground colour to #d0cebd, then create 6 125px x 125px selections on separate layers, then fill them with the foreground colour. Leave gaps of 14px between each square and position all 6 so that they are centred in the advertisements box, like so:

6.3 Now you need to create the popular posts section of the layout. Using the post image thumbnail you downloaded at the beginning of this tutorial, complete the popular posts section using the same methods and settings for the advertisements section. The dimensions of the popular posts box are 300px by 300px.

6.4 To complete the sidebar content, create a recent comments box, the same size as the popular posts box. Just change the content to text, like so:

Footer
7 To complete this tutorial, we are going to create the footer section of the layout. Set the foreground colour to #d0cebd, then on a new layer, create a selection the full width of the canvas, with a height of 274px. Then apply a 3% noise effect to the footer layer by selecting in the file menu Filter > Noise > Add Noise…

7.1 Now we need to create the 2 text based sections of the footer content. To do this use the text tool and on separate layers, use these text settings:

Title
Font: Georgia, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: # 00baff

Body Text
Font: Georgia, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #1a1a1a, Underline

7.2 For the final part of this tutorial, we need to create the contact form. To do this use a similar method that we have used throughout the tutorial, using these settings and measurements:

Text Field (Dark Rounded Boxes) Colour: #202020

Blue Button Colour: # 00baff

Text Settings
Font: Arial, Style: Regular, Size: 10pt, Anti Aliasing: Sharp, Colour: #d0cebd

Layer Style Settings: Copy from Navigation Button

That is the tutorial completed, I hope you enjoyed following along to the tutorial, your comments are appreciated. Thanks.

Download PSD FILE