• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

In this tutorial we will be creating a minimalistic blog layout in Photoshop. We will be using a simple grid layout and the most basic of Photoshop tools to create a fairly traditional blog layout. Once you have created the framework for this layout you should be able to go on and customise it to your liking by using different colors and fonts. The tutorial was created in Photoshop CS3 but any copy of Photoshop will do as we only use basic tools.

This is the layout we will be creating, click to see full version :

1. The 960 Grid

To start off, go grab yourself a copy of the 960 Grid, download and unzip it and you will see a folder for templates, inside that is a Photoshop folder and inside that open the one called “960_grid_12_col.psd”, this is how the grid looks :

Delete the folder in the layer window containing the red stripes, we dont need those, just the guidelines.

2. Content Areas

Using the paint bucket tool

Color the background layer grey, I used #F5F5F5.

We need to add 3 main content areas to start with, the top bar, the featured post area and the sidebar. The top bar will be black #000000 and the featured area and sidebar are white #ffffff. To add these, create a new layer and use the rectangular marquee tool

Then fill selected shape with the paint bucket tool like this, click to see full size image :

3. Featured Post Area

Now create a new layer and draw out a selection within the featured post area and fill with grey #E9E9E9, this is where the content slider will go :

Now create a new layer, draw out a rectangle and fill with black for the featured post text area. Right click this later on the layer pallete window, select “Blending Options” and take the opacity down to 55% :

4. Slider Buttons

We need to create 6 circles which will be the slider button controls. Select the elipse tool :

Hold the shift key down and drag the tool to create the circle. Now copy and paste this circle 5 more times next to each other.

Make one circle white and the others black. With a black circle selected, in the layer pallete window, right click it and choose “Blending Options” then select “Stroke” and enter these settings to give it a border :

Repeat that for the other black circles and you will end up with this :

5. Sidebar Title Background

We need to create a background for the sidebar titles, to do this, create a new layer and draw our a rectangular shape and fill with color #E9E9E9 like so :

6. Post Area

Create a new layer and fill a selection the same width as the featured post area and fill with white. Then create another layer and fill a selection with #E9E9E9 to create a title background area the same height as the one created for the sidebar title background like so :

You now have your main content areas laid out :

7. Logo text and top bar text

Time to start adding some text to the layout, for the logo I used Liberation Sans, a free font from RedHat. I used 30pt size for the logo. The top bar text was added in arial white at 12pt size. You see here how I lined the text up with the featured content area :

8. Featured Content text

Now use the Liberation Sans font in white and at 24pt size to add text for the featured post area :

9. Sidebar Text

Now add some text to the sidebar background area you created before, Liberation Sans at 18pt size was used for the “Categories” title. The smaller text for the category listing  is Arial at 12pt. Add a pixel line under each menu item using color #E9E9E9 :

Repeat this to mockup the other sidebar items, such as archives, search and meta :

10. Post area text

Add in a title for the blog posts in Liberation Sans at 18pt size and some Lorem Ipsum text in Arial at 12pt size :

11. Rounded Buttons

We need some rounded buttons for the main menu and the tags, to do this choose the Rounded Rectangle tool and set the radius to 4px :

Draw out buttons for the main menu and add white Arial text at 12pt over the top for each item :

Do the same for the tags :

12. Finish the Posts area

To finish off the blog posts area, add in 12pt Arial text for “comments” “Read Full Story” and “By Author Name in Category”

Also create a new layer and add in a stripe 14px high and color #E9E9E9.

The last part is to again use the rounded rectangle tool, hold shift and create a square with rounded corners for the comment count and and white Arial 12pt text for the comment count:

Highlight all the elements in the blog post area and in the layer pallete window, drag them to the “Create a new group” icon. You can now right click on the group you created and “Duplicate Group”, do this so you have 4 groups the same and position them underneath each other to create the posts :

13. Connections area

Using Liberation Sans font at 36pt and Arial at 12pt, create the connections text.

Use the rounded rectangle tool to create 3 rounded squares for the facebook, twitter and rss icons.

14. Copyright Text

Under the sidebar, add some text in Arial 12pt #aba7a7 for the copright info and RSS links :

15. Featured Post image

We need to add an image in to the featured post area for purposes of the mockup design, I searched Flickr for Creative commons images and found this suitable image by Alaskan Dude.

Grab the photo and paste it into your design on the layer above the grey featured post area, resize it down and trim the edges to fit :

16. Finished Design

The design is now finished, we have a simple minimal design layed out in Photoshop, ready to be coded into html and then a WordPress theme. We will cover these in future tutorials.

If you have any questions or comments, please leave them below and I will do my best to help you out.


Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

16 Comments

  1. Tutorial Lounge

    beautiful tutorial but not much professional design.

  2. I think it should be more a html/css tutorial as you do not need any images at all except the teaser image. But anyway I really love the result. It looks nice and clean. Maybe I personally would add a little more depth with little gradients, but that’s just my opinion. :-)

  3. Excellent WordPress tutorial, Thanks for sharing… :)

  4. Anonymous

    Very decent and graceful design. I like the layout and colors. :)

  5. This is awesome! Can the author also include the steps to go from the completed design to the actual coding of the theme? That would be HUGE if it can be documented. This is something that i find lacking in most design tutorials.

  6. I don’t know why people are clamoring about how they find designing their WordPress themes with Photoshop,
    difficult. Personally, I think it’s great, since we get to customize our
    profiles to our heart’s content. And since were using Photoshop,
    imagination is the only thing that can limit you.

  7. Great tutorial.  I’ve been wanting to experiment with designing WordPress layouts.  This looks like a great place to start…the tutorial is very thorough and the outcome is nice and classy.

  8. gerald

    can you explain why my circles become not circle after i fill them black in step 4?

  9. gerald

    once i’m done with the layout, how do you make this into an interactive site, ie clickable buttons

  10. Nice post. I’d love to design by Photoshop too. If anyone wants to learn more about Photoshop, you can check this out: http://adf.ly/jyYsL. I’ve just known many things from there.

  • Comments are Closed

Search

Our Sponsors