Mar201126

By Ravi

Design a nice looking wordpress theme

4
Posted in Web Layouts, WordPress

Today we are going to design a nice looking WordPress theme layout. Layout is 980 px fixed width. You can download the layer PSD file of the layout at the end of tutorial.

Final Preview

Before I start the tutorial, lets see the final image of the template layout we will design in this tutorial.
So, now let’s get started.

Step 1:

Create a new document of size 1000 X 1200 px and transparent background.


Fill the background layer with color #e3e3e3

Step 2:

As we are going to make this theme 980 px fixed width, we will leave margin of 10 px from both left and right side. For this we will create two Guide.
Create first guide.
View >> New Guide.. >> Vertical >> position 10 px


Create second guide.
View >> New Guide.. >> Vertical >> position 990 px

Step 3:

In this step we will make header region. Select Rectangle Marquee Tool.
rectangle-marquee-tool

Make a selection of about 260 px height for header region.


Fill the selection with #4e6578 color using Paint Bucket Tool.

Step 4:

Make a diagonal line pattern as explained in this post. This is going to take only 2 minute.
How to create a Photoshop diagonal line pattern

After you have made a diagonal line pattern, fill the selected part with this pattern.
So, it looks like this now.

Step 5:

In this step we will add some cloud using some cloud brush in header region. Download some free cloud brush, and add few clouds in white color in header region. Below you can see how I have added few clouds.

Step 6:

In this step we will add logo.
Create a new layer for logo and select Text Tool.
Write Site Name using following font style.
Font Family: Brush Script Std
Size: 48 pt
color: #051c2f and #ffffff


Apply following layer style to this logo text layer.




So, it looks like this now.

Step 7:

In this step we will add site description text. Create a new layer and select text tool.
Write your site description just below site name in color #051c2f and font Kartika.


Apply following layer style to this text layer.


So, it looks like this now.

Step 8:

In this step we will add a menu bar for WordPress pages.
Select Rounded Rectangle Tool with 8 px radius.
Rounded rectangle tool

Draw a rounded rectangle shape in color #cbcbcb as shown below. It should end at right guide line.


Apply following layer style to this rounded rectangle shape.






So, it looks like this now.


Load rounded rectangle shape layer.


Contract the selection by 2 px.
Select >> Modify >> Contract
Now de-select the lower half.


Create a new layer, and fill the selected part with white color.


Now change opacity of this layer to 10%.
So, it looks like this now.



Now apply following layer style to this text layer.


It should look like this now.


Now we will add a vertical line between two links. For this select Line Tool and set color to #33343b. Now put a small line as shown below.


To just right of this line, make another identical line but in color #FFFFFF


Merge these two lines in one layer. And apply Motion Blur.
Filter >> Blur >> Motion Blur


Similarly create few more such lines and add after each link.

Step 9:

In this step we will add category menu bar.
Create a new layer. Select Rounded Rectangle Tool with 10 px radius.
Draw a rounded rectangle shape in color #abb4b9 starting from left guide line to right guide line.


Delete the lower part as shown below.


Apply following layer style this shape.




So, it looks like this now.


Now add some category links in this menu bar, just like we did for page menu.

Step 10:

Select Rectangle marquee tool and make a selection as shown below.


Select Gradient tool with Foreground to Transparent. Set foreground color to #bec3c9 and apply gradient in selected area.

Step 11:

We will use 300 px width for sidebar area rest 680px for post area. So, make a new vertical guide at distance 690 px.


Like in step 10, we will apply a gradient to separate sidebar.


To the right of this gradient we will add a vertical line in color #ebeaea.

Step 12:

In sidebar, we will add four 125 X 125 px advertising slots. So, select Rounded Rectangle tool with 6px radius and draw 4 shapes in color #c8c8c9 as shown below. Also, add 1px #FFFFFF stroke to each shape.

Step 13:

Below Ads, Type Blogroll in Arial font and 24 pt size and #505966 color.


Apply following layer style to this text layer.


Below text draw a straight line in color #c8c8c9


Just below this line, draw another line in color #FFFFFF


Using custom shape put a small arrow in color #505966
And using same color, type some text.


Similarly add few more links.

Step 14:

Add some text as post title in color #272c35 and 30 pt size.


Below the post title add a line just like we added in sidebar.


Below the line, add post details like date, posted by, category, comments.


Now add a 150 X 150 px post thumbnail image, and stroke the image with 5px and #b9b9b9 color.


Now some text as post text.

Step 15:

In this step we will add wordpress page number.
Select rectangle tool. Press and hold SHIFT key and draw 4-5 square shapes as shown below.



Step 16:

In this step we will add footer blocks. Select marquee rectangle tool and make a selection as shown below.


Fill the selected part with color #3c3c3c


Now fill it again with diagonal line pattern as we did for header.


Just like sidebar, we will add three blocks with some links in this footer region.

Step 17:

Fill rest footer part with color #000000


In this footer region, add some copy right text in color #dcdcdc


And in right side of this footer part, add some social icons.

Our WordPress theme is ready. Below is final image.

Below you can download PSD file of this wordpress theme layout.

We Recommend

About the Author

Name: Ravi Shekhar
Designing is part of my life. I love designing and writing related tutorials.

Share this post

    • You can leave a response below, or trackback from your own site.

    4 Comments to "Design a nice looking wordpress theme"

    Add Comments (+)
    1. F Hamid says:
      April 8, 2011 at 1:35 pm

      Hi, What about the rest, how do you upload and make it work on wordpress ??

      Cheers
      F

      Reply
    2. DesignGuru says:
      April 28, 2011 at 6:35 pm

      Thankx for such a greate Tutorial

      Reply
    3. Loyd says:
      June 18, 2011 at 6:30 pm

      Thankyou for the tutorial.
      Can you please provide a link (tutorial) on how to code this from PSD to wordpress if there are any. That will be very helpful. Thanks again .

      Reply

    Leave a Reply