How to creat a Wordpress theme in Photoshop

Hello and welcome to another tutorial here on trendyTUTS.com

For today I will create an wordpress theme which can be used for a personal blog, but in the same time for a variety of blogs such as business, showcase your product/services, etc.

In a couple of days we will integrate this design with wordpress, and we will create an wordpress theme with the psd file from this tutorial. This wordpress theme it will be available to our Premium Members.

Also, a tutorial on how to integrate a PSD design with WordPress (to have a fully functional wordpress theme) it will be available soon for our Premium Members in PSD to HTML section.

Here is my final result:

SiteGrinder 3 will automatically convert this Photoshop web design template from a PSD to HTML/CSS website – NO Slicing and NO coding skills required! Click here to see more…

To create this template I have used:

• Basic tools in Photoshop (Rectangle Tool, Ellipse Tool, etc)
• Some icons from our free web vector icons pack

Let’s start the tutorial. Open Photoshop, set the background color to: #dcdcdc and create a new document 1100 by 1570px.

Than using Rectangle Tool, create this shapes. For each of them I have added dimensions and colors. Please see the image bellow

Step1 – Creating the top part ~ logo and navigation

With Type Tool (T) I will write “WordPress Theme” and tagline: “design by trendyTUTS”.
For WordPress text, apply this layer styles

And for Theme, apply this layer styles:

Having Type Tool selected, add the links on the right side:
To see my result and what kind of fonts I have used, please see the screenshot bellow

Step2- Creating Featured Area

This one is really easy to create. On the right side I will add an image with some of my layouts and on the left side with Type Tool I will add some text. Please see the screenshot bellow to see what fonts I have used and to see my result for this area

Step 3 – Creating

the content area

To create the content area, I will select first Rectangle Tool and I will make this shape:

With Rectangle Tool I will create another shape. This one it will be used to create a shadow on the top of the shape created in previous step.

Then, make sure that you have this shape selected, and add a layer mask (please see the screenshot)

Next, select Gradient Tool, make sure that you have the default palette selected (black & white), than drag a similar line

You should have something like this now:

Do you see what a smooth shadow we have? In the same way I will proceed for the bottom of this shape.

Next, I would like to create another cool shadow, but this time I will create it for the left corner of the shape.
First I will select Pen Tool and I will create a triangle

Then I will go to Filter>Blur>Gaussian Blur and I will apply a gaussian blur of 3.5px
I will proceed in the same way for the rest of the corners
Here is my result:

Next I will add the content. With Rectangle Tool I will create a shape. Dimensions: 291×285 and I will apply this layer styles:

Than with Type Tool I will add some text, and using some images I will place them on my document:

Next I will select Rounded Rectangle Tool with a radius of 5px I will a button and I will apply this layer styles:

I will repeat this steps and I will create 5 more blocks of content

On the right side I will create the sidebar. I will create them in the same manner that I have created the blocks with content

At the bottom I will create the pagination

Step4 – Creating the footer

Well the footer is already created. With type tool I will add the text for footer.
Here is my result:

Here is my result for the entire layout

From trendytuts.com