Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a trendy and colorful wordpress layout in Photoshop. If you’re thinking to redesign your blog, you can follow this tutorial. I will try to explain step by step how you can create a similar wordpress layout in Photoshop.

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members.

Click Here To See The Live Preview (CSS/HTML)

To create this tutorial I have used:

• The basic tools from Photoshop (Rectangle Tool – mostly)
• Some vector icons from our free pack

Let’s start the tutorial. Open phootshop and create a new document. Dimensions: 1020 x 1710px

Select paint Bucket Tool and fill your document with #d9cb9e.

Step1 – Creating the top area

Select rectangle tool create this 2 rectangles.  For the rectangle on the back I have used this color: #d9b94c and for the top one I have used this color: #fed95d, then with Type Tool I will write “trendyTUTS” and I will apply this layer styles:

Here’s my result for logo:

Next on the right side I will create the search bar.  Select Rectangle Tool and create 2 similar shapes.  Dimensions 324x24px. For the back one I have used this color: #455352 and for the top one, this color: #738483.

Having Rectangle Tool selected I will create again 2 more shapes . Dimensions: 51x34px. For the back shape I have used this color: #962418 and for the top one, this color: #dc3522. With type tool I will add some text, and here is my result for the search bar:

Step 2 – Creating the navigation

First I select Rectangle Tool and I will create this 2 shapes. Dimensions: 949x54px. For the back shape I have used this color: #738483 and for the top one: #374140. For the top one I will apply this layer styles:

My result so far:

Next I will select Rectangle Tool and I will create this red shape: #dc3522

Then I will select Pen Tool and I will create this triangle (in order to create a nice 3d effect for our red shape). Color use for this triangle: #962418

With type tool I will add the links for navigation. Here is my final result:

Step 3 -  Creating the featured area

First I will select Rectangle Tool and I will create this 2 shapes. The first one (the bluish one) it will be used for Featured Area and the second one (white one) will be used later for the content area.

Next on the top of our bluish shape I will create another one. Dimensions 925×328, color: #567989, I will apply this layer styles, also:

You should have something like this:

Next on the left side I will add an image and with Ellipse Tool I will create 3 circles at the bottom. Basically we will integrate a jquery slideshow when we will code this template in XHTML. I remember you that you can download this template and you will be able to acces the PSD to XHTML tutorial only if you will become a premium member.

Because this will be a wordpress blog, we will need to create a sidebar also. We will create them as usual, on the right side. Select Rectangle Tool and create a similar shape. Dimensions: 275x400px, color: # b1ac2a, then apply this layer styles:

My result so far:

Next with Pen Tool I will create a triangle to have a nice 3d look. I have used this color: # 726f1b

I will select Rectangle Tool and I will create a yellow rectangle. Color: # fed95d

And again with Pen Tool I will make a triangle to create a nice 3d look. Color used: # 9d873e

With Type Tool I will add the text and some banner ads (because this area is for advertisment)
My final result for featured area:

Step 4 – Creating the content area

First I will select Rectangle Tool and I will create this shape. Dimensions: 925X417px, color: # ece9df

With Rectangle Tool I will create this red shape. Dimensions: 606x45px, color: #dc3522

As usual, I will select Pen Tool and I will create again a nice 3d look. Color used for this shape: # 9a291c, then with Type Tool I will add the title:

Wit Rectangle Tool I will create another one rectangle over the red shape. Dimension: 178x39px, color: # 374140

Then I will add an image and with type tool I will add some text

At the bottom of the article with Rectangle Tool I will create a shape and with Pen Tool I will create again a nice 3d look. Over this button with Type Tool I will write “See more”

On the right side I will create a sidebar again. I will use the same steps used to create the sidebar on featured area. I will use again Rectangle Tool (to create the horizontal and vertical rectangles) and with Pen Tool I will create again a nice 3d look.

With some image and Type Tool I will add the content for the sidebar.

In the same way I will create another post on our wordpress layout and at the bottom I will create a pagination
Here is my final result for the content area:

Step 4 – Creating the footer

Well to create the footer it’s quite easy. First I will add the logo (I have duplicated it) then on the right side, using Rectangle Tool I will create 2 shapes and using some icons from the free pack I will add a twitter and an rss icon.
Here is my final result for Footer

Click Here To See The Live Preview (CSS/HTML)

If you’d like to know when we update this blog with new tutorials, you can follow us on twitter. If you have any questions, please don’t hesitate to ask them in your comments.