Voosh Themes

How To Design A Personal WordPress Blog

In this tutorial I’m going to show you how to design a personal blog in Photoshop. In particular, I’m going to focus on building the front page of the Zarina WordPress theme that was released last week.

This design has a simple structure – there is the header which contains the blog author’s name and a subtitle. Directly beneath that there is a navigation area that contains links to all of the different pages on the site.

This is then followed by the main content area where the blog posts are displayed and a sidebar where additional details are provided such as a photo of the author, latest tweet, and recent Flickr Photos.

At the bottom there is a simple footer that contains some copyright information. Below is a screenshot of the template we’ll be creating:

1. Create A New Document

Create a new document with a size of 1100×1100. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens.

2. Add The Background

Now change the color of the background to grey – select your background layer and choose Edit > Fill – set the color to #EEE.

Now add a vertical guide 70px from the top and 70px form the bottom of the document. Within these guides we want to draw a white box – select the Rectangle Tool, set the color to #FFF, and draw a box inside of the guides:

To make this box stand out a litte more we need to add an Outer Glow effect with the following settings (where the color of the glow is #CCC).

3. Create The Header Background

The first step in creating the header is to add the background – select the Rectangle Tool, set the color to #301619, and draw a box from the left guide to the right that is 150px in height.

Now create a new layer above the box you’ve just drawn, set the color to #eb7616, and draw another box slighter smaller than the brown one:

Now select the Line Tool and set the color to #FFF – draw a 1px line from the left guide to the right where the orange and brown boxes meet – do this at the top and bottom:

4. The Author Name & Subtitle

The next step is to add the author’s name and a subtitle – set the font to Myriad Pro, the font weight to bold, the font size to 64px, the color to #301619, and the letter spacing to -40px – now type “David Thompson” (or your own name) and position the text to the left of the header.

To create the subtitle, keep the font as Myriad Pro, set the font weight to bold, the font size to 40px, the letter spacing to -40px, and the color to #EEE. Then type “My Personal Blog” and position it to the right of the header:

To make this stand out a little more we’ll add a subtle drop shadow with the following settings (where the color of the shadow is set to #333):

5. The Navigation Area

The first step in creating the navigation area is to draw the background – select the Rectangle Tool, set the color to #EEE, and draw a rectangle from the left guide to the right that is about 45px in height:

Now select the Line Tool, set the color to #EEE, and draw a line from the left guide to the right – place this line 2px underneath the rectangle you’ve drawn – this should give the effect of a white line followed by the grey one that you’ve just drawn:

Now we need to write the text for the links – set the font to Arial, the font weight to bold, the font-size to 14px, the color to #301619, and type (in uppercase) some page names:

6. Create The Blog Posts

To create the first blog post we initally need to add a title – set the font to Arial, the font weight to regular, the font size to 28px, the color to #301619, and add a title:

We now want to add some meta information about the post – change the font size to 20px and the color to #AAA (keep the other settings the same) – type some text underneath the title:

Next we need to add the image – to create the image border, select the Rectangle Tool, set the color to #FFF, and draw a box that’s 210×210px in size. Set the border color of that box to #CCC:

You then need to add an image inside that box that’s 200×200px in size – this can be anything you choose.

Now we need to add some text to the right of the image – set the font to Arial, the font size to 12px, the color to #444, the line spacing to 22px, and type some dummy text:

Finally, we need to add a button underneath the text – select the Rectangle Tool, set the color to #301619, and draw a box that’s around 100×30px:

Now add some text inside the box – set the font to Arial, the font weight to regular, the font size to 12px, and the color to #FFF. Type “Read More >>” and place it in the middle of the box:

To finish this section off we need to add a dotted line at the end of the post – select the Type Tool, set the font to Arial, the weight to bold, the size to 12px, the color to #EEE, and then type a series of full stops from the left side of the template to the right.

Now that we’ve created one post, we can copy and paste everything again to create some more – create 2-3 new posts changing the titles and images as you go.

7. The Sidebar

To create the sidebar, we initially need to add the background – select the Rectangle Tool, set the color to #EEE, and draw a box from the top of the content area to the bottom (with a width of around 275px).

We now need to add a vertical line down the left side of the sidebar – select the Line Tool, set the color to #FFF, and draw a line from the top to the bottom of the sidebar rectangle. Place it to the left side of the rectangle.

Now create a copy of that line and place it 1px to the left of the line that you’ve just created – also change the color of the new line to #EEE:

We now need to add a 3D strip for the sidebar – to do this, select the Rectangle Tool, set the color to #EB7719, and draw a box that’s 265×35px – position this box just past the right guide:

To create a nice 3D effect, select the Pencil Tool, set the color to #BA5E13 (a darker orange), the size to 1px, and draw a triangle next to the top of the box:

Now add some text to the strip – select the Arial font, set the weight to bold, the color to 14px, and type in uppercase, “THIS IS ME…”:

Now add a photo with a border – this is exactly the same process used in step 6 for creating the post images:

You can then add some further sections here including one for latest tweets and another for recent photos. This process will be just the same as above – you create the header again and then underneath that add the type of content that you want to include (see the full size screenshot below for some examples).

8. The Footer

To finish the template we need to create the footer – initially, we need to create the background – select the Rectangle Tool, set the color to #EEE, and draw a rectangle from the left guide to the right that’s 960×45px in size.

Then add some copyright text – set the font to Arial, the font-size to 12px, the color to #555, and type something like the following:

And that’s everything! The template should now be complete:

All Finished!

I hope you found this tutorial useful – check out the Zarina Features Page for more details about the theme where this design is used – there’s also a live demo you can view if you want to take a closer look.