Preview

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

Tutorial Resources

• Function Icon Set
• Hong Kong

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.

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.

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.

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

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).

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.

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.

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.

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

Stroke layer style

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.

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

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.

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).

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.

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).

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.

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

Inner Shadow layer style

Gradient Overlay layer style

Stroke layer style

You should have something like this.

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.

Add these layer styles to your other five other markers.

Gradient Overlay layer style

Stroke layer style

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

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.

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

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

You should have something like this.

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.

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

You should have something like this.

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.

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

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.

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.

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.

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.

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

Finally, add your Footer content to finish the layout.

Here’s what it should look like when finished.

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!

Download Source Files

• dark_blog_webdesign (ZIP, 1.31 MB)

Author: Richard Carpenter

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

• Tweet
• Delicious