Design a Clean Blog Theme in Photoshop

by Steven Snell

on May 11, 2009

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Today we’ll be looking at the process of creating a basic, clean blog layout in Photoshop. The process and steps are very simple and should be easy to follow for anyone who has a little bit of experience with Photoshop.

What We Will Be Creating:

Here is the finished blog design (click on the image to see it full sized).

Step 1: Getting Started

Create a new document 1024 pixels wide and 2000 pixels high.

Step 2: The Background

Set the foreground color to #efefef, select the paint bucket tool, and fill the background layer with that color.

Step 3: Setting the Guides

Go to View > New Guides and set vertical guides at 32, 52, 972 and 992 pixels. And set horizontal guides at 5, 100, 130 and 431 pixels.

Step 4: Creating the Featured Post Area

Create a new layer (Layer > New) and select the rectangular marquee tool. Using the rectangular marquee, select the area between 32 pixels and 992 pixels from the vertical guides, and between 130 pixels and 431 pixels from the horizontal guides.

Set the foreground color to #242522 and the background color to #111110. Select the gradient tool and choose the linear gradient.

Fill the selected area with the gradient by clicking at the top of the selected area, and dragging down to the bottom of the selected area.

Step 5: Create the Navigation Menu Area

Select the rectangular marquee tool again and highlight the navigation menu area that is just above the gradient that was applied.

Select the paintbucket tool and set the foreground color to #484844. Fill the selected area with that color.

Step 6: The Logo/Site Title

Select the type tool, as we will enter the site title/logo. I’m using Rockwell for the font (30 pt) and a color of #283c77. Align the text with the vertical guide at 52 pixels.

Step 7: Add the Top Border

Create a new layer. We’ll now add the 5 pixel border at the top of the screen by choosing the rectangular marquee tool and selecting everything above the 5 pixel guide.

Select the paint bucket tool and set the foreground color to #484844. Fill the selected area with this color.

Step 8: Adding the Search Box

Add a new vertical guides at 662, 667 and 987. Also add new horizontal guides at 30 and 35. Create a new layer and using the rectangular marquee tool, select the area for the background of the search area (between the 662 992 vertical guides and the 5 and 35 horizontal guides). Your foreground color should still be set at #484844, so use the paint bucket tool to fill this area.

Now we’ll create the search button by using the rectangular marquee tool to select the area for the button (875 pixles to 987 pixels). Then select the paint bucket tool and set the foreground color to #e0dfdf. Fill the selected area with this color to create the button. We’ll then put the text “Search the Site” on the button using 12 pt Arial with #111110 as the color.

Then, use the rectangular marquee to create the search field and use the paint bucket tool to fill it with white (#ffffff).

Step 9: Adding Text to the Navigation Menu

We can enter the text for the navigation menu by using Arial, 14 pt with a color of #efefef, and line it up with the vertical guide at 52 pixels.

Step 10: Adding the Featured Post Photo Area

Next, we’ll add the photo area for the featured post. To do this, add horizontal guides at 151 and 411. Create a new layer and select the rectangular marquee tool. Select the area for the photo’s border between the vertical guides at 662 and 972, and between the horizontal guides at 151 and 431. Then choose the paint bucket tool and set the foreground color to #e0dfdf (same color that was used for the search button) and fill the selected area with that color.

Then add new vertical guides at 672 and 962, and new horizontal guides at 161 and 401 pixels. Using the rectangular marquee and those 4 new guides, add a photo or fill it with a solid color for now. I’m just going to fill it with a stock image that can be found here.

Step 11: Adding the Featured Text Area

Now we’ll create text area for the featured post. Add a new vertical guide at 642 pixels. Using the type tool, create a text box that uses the guides to leave 20 pixels of padding all the way around.

For the title I’m using Times New Roman at 20 pt with a color of #abbbec. The author name and date is using italic Times New Roman at 16 pt with a color of #cbc9c9. The text for the excerpt is using Arial at 14 pt with a color of #efefef, and the leading is set at 18 pt.

Step 12: Creating the “Read More” Button

Now we’ll use the rounded rectangle tool to create the “Read More” button.

Set the radius at 15px.

Set the foreground color to #484844 and use the guides to give the button 20 pixels to the left and to the bottom. Then add the text “Read More” on top of the button.

Then double click on the button shape layer in the layers palette. Click on stroke and add a 1px inside stroke with the color #7a7a73.

Step 13: Adding the Other Posts

We’re now ready to add the titles and excerpts for the other four posts on the front page. Add a horizontal guide at 451 pixels to allow for the margin above the post. I’m using the vertical guides at 52 and 642 pixels. For the post titles I’m using Times News Roman at 20 pt and #283c77 as the color (same color as the logo/site title). The author name and date is 16 pt Times New Roman with #484844 as the color. The text for the post excerpts is 14 pt Arial in #111110.

I’ve then used the rectangular marquee tool to create a gray box that is 30 pixels high, and add the text “Read the Full Post | 8 Comments” on top of it. The text is 14 pt Arial, #283c77.

You can then repeat the process to fill in more posts excerpts. I’m using a total of 5 posts, including the featured post in the dark box at the top. And we’re now ready to move on to the sidebar.

Step 14: Setting Space for the Banner Ads

At the top of the sidebar we’ll create space for a few 125 x 125 banner ads. I’m going to clear the existing guides before creating new ones. Go to View > Clear Guides. Add new vertical guides at 662, 672, 797, 807, 827, 837, 962 and 972. Add new horizontal guides at 451, 461, 586, 596, 616, 626, 751 and 761.

These guides will give us a grid for four 125 x 125 banners with a 10 pixel border around each and 20 pixels of spacing. Create a new layer and set the foreground color to #e0dfdf. This gray color will be the border, so use the rectangular marquee to select the large area that borders the banners, and fill them with this color.

Then use the other guides to insert 125 x 125 ads.

Step 15: Adding Links to Popular Posts

Many blog sidebars include a popular posts section to point visitors to certain content on the site, so that’s what we’ll add in this sidebar. Using the type tool add a popular posts list with 5 post titles. I’m using 20 pt Times New Roman with a color of #111110 for the header and 14 pt Arial, #283c77 for the links. I then added a new layer and used the pencil tool to create a 1 pixel bottom border for the links in the color #e0dfdf.

Step 16: Adding the Footer

We still need a footer, so add a new horizontal guide at 1650 pixels. In a new layer, use the rectangular marquee tool to select everything below the guide and use the paint bucket tool to fill it with #484844.

Then add links to the main pages using 14 pt Arial in #efefef.

Step 17: Adding 1-Pixel Borders

The design is almost complete, and you can clear all of the guides. We’re going to add a 1 pixel border below the navigation menu. Set the foreground color to #7a7a73, and choose the pencil tool and a square 1 pixel brush. I usually magnify the image to about 500% to get the border at the right place. I want the border to be below the navigation, so click on the pixel to the uppermost pixel to the left of the featured post area.

Then scroll to the right side and find the pixel in the uppermost right side of the featured post box. Hold shift and click on that pixel and the line will be created. There are other ways to create lines, so use whichever method you prefer.

I’ll then do the same thing to create top and bottom borders to the thin gray rectangles that contain links to the full posts and to the comments. For those borders I’m using the color #bcb8b8.

The Finished Product:

Here is the finished blog design (click on the image to see it full sized).

Feedback:

Since this is the first tutorial of this kind that I have done, I would appreciate any feedback about how helpful it was (or wasn’t) or how it could be improved for the next time.

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+