Dark blog template

Here is a Photoshop tutorial that will help you to create a nice blog template. This one is very dark but you can choose your own colors. Here is a preview of layout that we are creating.

Step 1:

Let’s start out by creating a new file. I used a 1000×900 pixels canvas set at 72dpi, and I filled my background with black color. Now make a new layer then draw a large white rectangle with 716 x 570 px dimensions on the left side of your canvas, this will be your main content body.

Step 2:

Create a new layer then draw a long black rectangle on top of your main content box.

Step 3:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your long black rectangle layer.

Result:

Step 4:

Now draw another black rectangle across your content box as shown below.

Step 5:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your second black rectangle layer. Then set the layer’s blending mode to Lighten.

Result:

Step 6:

Select the Horizontal Type Tool then set the font family to Arial, regular, 14 pt, crisp and #E40000 color shade. In a new text layer type out your navigation links on the gray gradient rectangle, make sure you leave spaces between each link and add a black vertical bar. Then add an RSS Feed link with #FF7000 color at at the end of your navigation.

Step 7:

Now add a header above your navigation interface. You can make your own or look for one in various stock sites. I have chosen a space scene.

Step 8:

On the right side of your template add more space design.

Step 9:

Now add the RSS logo at the end of your navigation interface next to the name. Download the RSS logo in PSD file here.

Step 10:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Satin blending options to your RSS logo layer.

Result:

Step 11:

The right side of your template will be the sidebar, first the advertisement section using 125 x 125 banners. Above the ads add a link for ‘Advertise we us’ using font Arial, bold, 10 pt, none and #E40000 color shade.

Step 12:

Below the ads add a section for categories, use font Arial, bold, 14 pt, none and #A4D0FF color shade for the title. Now add the category links with the same font style from the advertise us link then in a new layer add 1 px lines with #1A1A1A color shade below each link.

Step 13:

Create a new layer set and name it ‘Content Box’. In a new layer draw a large rectangle with 706 x 170 px dimensions and #2E5873 color shade on the white body space.

Step 14:

Under Layer Style(Layer > Layer Style) add an Inner Glow and Stroke blending options to your content box rectangle layer.

Result:

Step 15:

Create a new layer. Now make a rectangle with #214155 color shade and 694 x 25 px dimensions on top of your content box, this will hold the title.

Step 16:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the #214155 color shade rectangle layer from step fifteen.

Result:

Step 17:

Select the Horizontal Type Tool then set the font family to Arial, regular, 12 pt, none and #00D2FF color shade. In a new text layer type out a title on the content box header. Then in a new text layer type out a content paragraph using white color.

Step 18:

Add as many content box as you want by duplicating the ‘Content Box’ layer set.

Step 19:

Create a new layer. Below your content boxes draw a large rectangle with #1F1F1F color shade and 716 x 125 px dimensions.

Step 20:

Make a new layer then draw a 1 px border with #282828 color shade around your dark gray rectangle. Then draw a 1 px line on the middle to create two sections.

Step 21:

Now add a section for Latest Post and Latest Comments on the dark gray area of the template.

Step 22:

Create a new layer then draw a long dark gray rectangle with #191919 color shade and 716 x 19 px dimensions right below the latest post and comment section.

Step 23:

Now add your footer with a simple copyright info and a 1 px dark gray line above it for separation.

Step 24:

Select the Horizontal Type Tool and set the font family to Britannic Bold, 24 pt, smooth and white color shade. In a new text layer type your website name on the space design header.

Final Results: