Hello and welcome to another tutorial here at TrendyTuts.com. For today you will learn how to create a nice 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)

Let’s start the tutorial:
Open Photoshop and create a new document 1020 by 1730px

Set the foreground color to #746648 then select Paint Bucket Tool and push one time on your document (having Paint Bucket Tool selected)
Next select Rectangle Tool and create this shape (mine has 1020 by 6px), as a color I have used: #4e4634

Then apply this layer styles:

As you can see I have added a smooth line on the top

Step 1 – Creating the top navigation:

I will select Rectangle Tool and I will create this shape (i have used this color #ac9971 and this dimensions: 915 by 96px).

On the left side I will add the TrendyTuts.com logo (here you will need to add your own logo)

Then on the left side I will select Rectangle Tool and I will create a shape (77 by 36px) and I will apply this layer styles:

My result:

Near this shape (on the right side) I will add more shapes with the same dimensions, but for them I will apply this layer styles:

The with type tool I will add the links
Here is my final result:

Step 2 – Creating the featured area:

First I will select Rectangle Tool and I will create this shape: 949 by 366px, as a color I have used: #4e4634

Next having Rectangle Tool selected I will create this shape 915 by 100px and as a color I have used #ac9971

Now on the top of the shape created on previous step I will add a shadow. To create this shadow I will select Ellipse Tool and I will create this shape:

Then I will go to Filter>Blur>Gaussian Blur, here I will select a radius of 5.5px

I will select rectangular Marque Tool and I will make this selection . As you can see I have selected that shadow which is above that shape

Once you have a similar selection, hit Delete on your keyboard, than press Ctrl +D (to deselect), you should have something like this now:

Next I will select Pen Tool and I will create this triangle

Then, having Pen Tool on the middle of the triangle I will right click and I will choose, Make Selection

Once you have a similar selection, push Ctrl + Alt+ Shift+ N to create a new layer, than select Paint Bucket Tool, make sure that you have this color set on foreground (#4e4634) and push one time on the selection (with Paint Bucket Tool)

Once the selection has filled press Ctrl + D to deselect.
My result

I will proceed in the same way for the rest of the corners (I have 3 more)

Next I will select Rectangle Tool and I will create this shape (922 by 22px), color: #4e4634

Featured area is almost finished. I will add on the right side an image with one of my layouts then on the left side I will add some text using type tool

To create the Buy Now button I have used Rounded Rectangle Tool and this layer styles:

Now to finish the Featured Area I will add some social links (twitter, rss feed and email subscription). The icons used are from our free icon pack. Download our free icon pack:
Final result for Featured Area:

Step 3 – Creating the Content Area

To create the content area it’s a simple task. You will need to use Rectangle Tool and Type Tool to create some shapes and to add some text.
Here it goes:
I will select Rectangle Tool and I will create this shape: 915 by 908px. Color: #ac9971

Next on the right side with Rectangle Tool I will add this shape: 305 by 908px. Color: #c3b393

Next on the left side using Rectangle Tool I will add some shapes and with Type Tool I will add some text.
On the right side I will add some advertisement banners and some screenshots with some of my previous tutorials.
My result for content area:

Step 4 – Creating the footer

To create the footer I will select Rectangle Tool and I will create this shape. 915 by 239 and as a color I will use: #4e4634

With line tool I will create 2 lines : 807 by 1px. For the first line (the darker one) I have used this color: #383225 and for the second one #5e533c

Next with Type Tool I will add the links for the footer. Here is my final result:

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

I hope you liked this tutorial. If you’d liek to know when we will post new content, you can follow us on twitter. Also if you have some questions regarding this psd template, please write them in your comments. Stay tuned, because some new and cool photoshop templates will come pretty soon!