How to create a wordpress theme in Photoshop

Aug 12th, 2010View Comments

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:

To create this template I have used:

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

Want to Download the Source File including including the WordPress Theme (available soon)?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

The tutorial is finished now. Soon this coded WordPress Theme it will be available for our Premium Members.

Follow us on twitter if you’d like to know when we publish new tutorials.

  • http://jeffri.net Jeffri

    Nice and well explained tutorial. Thanks. :)

    It will be great if you can show us how you would design the rest pages, such as the single page and category page.

  • http://jeffri.net Jeffri

    Nice and well explained tutorial. Thanks. :)

    It will be great if you can show us how you would design the rest pages, such as the single page and category page.

  • http://www.avis-el.bg климатици

    Nice tutorial and some good techniques :) Thanks

  • http://www.avis-el.bg климатици

    Nice tutorial and some good techniques :) Thanks

  • http://tutorialblog.info tutorial blog

    thank

  • http://tutorialblog.info tutorial blog

    thank

  • ThatGuy

    Would love to see the functional site from this design.

  • ThatGuy

    Would love to see the functional site from this design.

  • gobanq

    how convert it to wordpress? it’s just psd file .

  • gobanq

    how convert it to wordpress? it’s just psd file .

  • r2d2

    Great theme – is there a set time for when the wordpress conversion tutorial is to be released?

  • r2d2

    Great theme – is there a set time for when the wordpress conversion tutorial is to be released?

  • admin

    @r2d2

    The wordpress theme it will ready for tomorrow. The tutorial on how to integrate this psd with wordpress it will come next week.

  • admin

    @r2d2

    The wordpress theme it will ready for tomorrow. The tutorial on how to integrate this psd with wordpress it will come next week.

  • r2d2

    Ah – Great – Looking forward to it :)
    Is it a premium file?

  • r2d2

    Ah – Great – Looking forward to it :)
    Is it a premium file?

  • http://www.abhijit.biz Photoshop Artist

    Cool method. You explained in simple steps. Good work. Keep sharing.

  • http://www.abhijit.biz Photoshop Artist

    Cool method. You explained in simple steps. Good work. Keep sharing.

  • http://www.xcertvip.com MCSE

    Thank you very much for sharing this steps and information. Man you are doing really good job and keep letting this kind of information with the world

    MCSE

  • Nadvas

    You do a great work. Thank you. But I´m still waiting for wordpress integration explanation. When?

  • http://trendytuts.com admin

    The tutorial on how to integrate this template with wordpress is already written as well as the psd to html tutorial for the rest of the layouts. I need to find some time to upload them on the website. This week I will publish the integration with wordpress, so stay tuned :)

  • http://twitter.com/gregpidcock Greg Pidcock

    soon please! looks like would do it right! really hope you find the time

blog comments powered by Disqus