I will be showing you a quick and easy way to develop a simple dark-themed blog layout with the use of Photoshop. When I say “quick and easy”, I mean it. We will only rely on basic Photoshop tools such as the marquee selection tools and layer styles. The outcome will be a professional-level website design mockup that can be converted to a blog theme or HTML web page.

Preview

Here is what we will create in this tutorial. Click on the image to view the full scale.

Preview

Tutorial Resources

Step 1: Creating the Photoshop document

Blogs tend to be quite big in length due to the amount of information they have to display, so we’ll start off with a canvas size of 1200 x 1370 pixels.

Creating the Photoshop document

Step 2: Setting up Photoshop guides

The blog’s main content area will have a width of 850 pixels. To make sure everything lines up nicely, we’ll use some guides. To create a new guide, go to View > New Guide enter the following sizes.

Setting up Photoshop guides

Setting up Photoshop guides

Step 3: Fill the Background layer

In the document we created, we had set Background Contents to White. Set your Foreground color to a dark gray (#282828), select the Background layer in the Layers Panel, activate the Paint Bucket Tool (G), and click on the canvas to fill our background with the dark gray color.

Fill the Background layer

Step 4: Create the first navigation bar

Pick the Rectangular Marquee Tool (M) from the Tools Panel. At the top of your canvas, create a rectangle about 38–40 pixels in height and spanning the entire width of the canvas.

Fill (Ctrl/Cmd + F5) your rectangle selection with any color (it doesn’t matter what color you pick because we will add some layer styles to the layer).

Next, we will add a couple of layer styles. Open up the Layer Styles dialog window by clicking on the layer’s thumbnail in the Layers Panel.

Color Overlay layer style

Create the first navigation bar

Stroke layer style

Stroke layer style

Underneath the stroke on the rectangle, create a 1px selection, making sure the line spans the width of the canvas. You can use the Single Row Marquee Tool for this.

Fill the selection with a dark gray color (#323232).

Stroke layer style

Stroke layer style

Step 5: Creating the blog layout’s Header

With the Rectangular Marquee Tool (M), create a selection underneath the first navigation. The selection should be about 80–83 pixels in height and span the width of the canvas.

Creating the blog layout's Header

Fill the selection with a color gradient using the Gradient Tool (G). First, set your Foreground color to #282828 and Background color to #191919. Then in the Options bar, set the style of the gradient to Reflected Gradient. Start from the middle of the selection, and then drag outwards to either the left or right side of the canvas.

Creating the blog layout's Header

Underneath the header, leave a 1px gap, and then add another line spanning the width of the canvas. Fill the line with the color #323232.

Creating the blog layout's Header

Step 6: Creating the second navigation menu

Again, using the Rectangular Marquee Tool (M), create a selection spanning the width of the canvas. The height should be about 38–40 pixels.

Double-click on the layer to open the Layer Styles dialog window, and then add the following layer styles.

Gradient Overlay layer style

Creating the second navigation menu

Stroke layer style

Creating the second navigation menu

Make sure that the 1px line’s layer we made for our header is above your second navigation layer. The 1px gap we left under the header should be filled with the stroke we applied to the second navigation layer.

Creating the second navigation menu

Afterwards, at the bottom the second navigation, add another 1px line in the same way we’ve been creating them.

Creating the second navigation menu

Step 7: Filling in some content

In the first rectangle we created, add your navigation link items with the Horizontal Type Tool (T). Inside the Header area, add your blog website title and slogan. The blue color I used for the word "blog" is #019fc1.

On the second navigation bar, add your main navigation link items.

In the space on the left and the right, add your favorite social media icons. The social icons I’ve used are from a free icon pack called Function Icon Set.

Filling in some content

Step 8: Creating the Featured area

Using the Rectangular Marquee Tool (M), create a selection about 250 pixels in height and 1200 pixels wide (which is the width of the canvas).

Fill the selection using the Paint Bucket Tool (G) with a very dark gray color (#191919).

Creating the Featured area

Inside your Featured rectangle area, insert a featured image. Place the image against the left guide, leaving about 2–4 pixels above and below the featured image. The image I’m using is an image of Hong Kong from stock.xchng. You can use your own images, of course.

Creating the Featured area

Step 8: Creating the Featured area marker

Using the Rectangular Marquee Tool (M), make a selection from the edge of the right guide finishing at the edge of the featured image. The rectangle selection should be about 37–40 pixels in height. Fill the selection with any color (I used red for demonstration purposes).

Creating the Featured area marker

Using the Polygonal Lasso Tool (L), create a selection to make the left side of the red rectangle into an arrow. Fill the selection on the same layer in the same color as the red rectangle.

Creating the Featured area marker

Next, add the following layer styles to the red rectangle.

Inner Shadow layer style

Inner Shadow layer style

Gradient Overlay layer style

Gradient Overlay layer style

Stroke layer style

Gradient Overlay layer style

You should have something like this.

Gradient Overlay layer style

Step 9: Create additional Featured area markers

Using the same method as above, create a five more markers—only this time, skip the part where we added the arrow at the left of the markers.

Create additional Featured area markers

Add these layer styles to your other five other markers.

Gradient Overlay layer style

Create additional Featured area markers

Stroke layer style

Create additional Featured area markers

Finally, label your markers with some featured post titles. You should have something like this.

Create additional Featured area markers

Step 10: Creating the dummy posts

Use the same technique we used for the first Featured marker. Create a smaller version, keeping the height slightly the same.

Place the little blue arrow underneath your featured area against your left guide.

Creating the dummy posts

On a new layer underneath the small blue arrow, create a rectangular selection.

Creating the dummy posts

Fill the selection with a very dark gray color (#191919). Then add a Stroke layer style with the settings shown below.

Creating the dummy posts

You should have something like this.

Creating the dummy posts

On a layer underneath the last layer we just made, make a selection with the same width as the small arrow and the last rectangle you created.

Creating the dummy posts

Fill the selection with a gray color (#333333) and then add a Stroke layer style using the settings below.

Creating the dummy posts

You should have something like this.

Creating the dummy posts

Step 11: Adding post content

Inside the small blue arrow, add the date of the post. In the darkest gray box, add the "WordPress" post title text. Inside the lightest gray box, add your dummy WordPress post content.

Adding post content

Duplicate each dummy post element so that we have something that looks like a blog’s front/home page.

Adding post content

Step 12: Creating the sidebar

For the WordPress sidebar, we’re going to replicate the dummy WordPress post but without the little blue arrow. So we start off with the darkest rectangle at the top for a box title, then we use the lightest rectangle for our content container.

Creating the sidebar

Start building up your sidebar using similar techniques we’ve been using as well as color and elements we’ve already made.

Here is a search box for example.

Creating the sidebar

Maybe you want to add a blog roll as well. For the list bullets, I just used the Rectangular Marquee Tool (M) and the same blue color that we’ve been using all throughout the tutorial.

Creating the sidebar

Step 13: Creating the Footer

For our Footer, we’re going to use a similar technique for creating the Header. Create a rectangle using the Rectangular Marquee Tool (M)—the rectangle should be about 60 pixels in height and span the width of the canvas.

Set your Foreground color to a dark gray (#282827) and your Background color to an even darker gray (#191919).

Next, pull out the Gradient Tool (G) and set the gradient style option to Reflected Gradient like the one we used in the Header of the layout. Drag the color gradient from the middle outwards.

Add a 1px stroke to the Footer using the color #353535.

Creating the Footer

Directly above the stroke on the Footer, add a dark gray 1px line using the color #0b0b0b.

Creating the Footer

Finally, add your Footer content to finish the layout.

Here’s what it should look like when finished.

Creating the Footer

Tutorial Summary

This tutorial went over a basic way of creating a minimalist, dark-themed weblog layout. We used some beginner-level Photoshop tools such as the Rectangular Marquee Tool, the Move Tool, and layer styles to produce a professional-level website mockup. That concludes this tutorial, thanks reading, and I’ll look forward to your comments!

Preview

Download Source Files

Author:

Richard Carpenter is a freelance Web and Graphic Designer from England. Check out his portfolio here.