In this tutorial I will be showing you how to design a wordpress themed website in Adobe Photoshop.

Step 1.

Open Adobe Photoshop and create a new canvas (File>New) make the canvas 1200 x 1400px with a transparent background.

Step 2.

Create a new layer (Layer>New>Layer) name it black_bg and now using the bucket tool select the colour black and fill the entire document.

Step 3.

Create a new group (Layer>New>Group) and name it header. Now select #2c2a2b as your foreground colour and #353334 and the background colour and make a rectangle the width of the canvas like shown in the image below.

Then go to blending options (Layer>Layer Style> Blending options) and use the following settings.

This layer should be named affiliate_link_top

Step 4.

Create a new layer named affiliate_link_bg and then using the colour #353334 and with the rectangle tool create a rectangle the same width as the previous layer. This layer should be placed behind affiliate_link_top.

Step 5.

Create a new group inside of the header group named navigation bar. Now set the colour to white and create a rectangle the width of the entire canvas.

Then go to blending options (Layer>Layer Style>Bending options) and use the following settings.

Step 6.

Create a new group (Layer>New>Group) named Featured Content. Now using the rectangular marquee tool select an area like shown below.

Now select the gradient tool with the colours as shown below.

Now select radial gradient and make a gradient so that it looks like so.

It may not look like there is a gradient though it is lighter in the middle compared to the outer edges. This layer should be named featured_content_bg

Step 7.

Select the Rectangle tool and set the colour to #373737 and make a rectangle like shown below. This layer should be named featured_content_img_bg.

Now you can add content into this area. I will show you how I have added content at the end of this tutorial.

Step 8.

Create a new group (Layer>New>Group) named Posts and then create a new group inside of this group called Post_1.

Navigate to the layer named featured_content_bg, click on it then whilst holding the control button on your keyboad click on the layer named featured_content_img_bg then duplicate the two layers and drag them into post_1.

You can rename featured_content_bg to post_bg and featured_content_img_gb to post_thumbnail

Step 9.

Highlight the entire post_1 group and then by pressing control + T transform both layers so that they are smaller.

Step 10.

Now you can duplicate post_1 as many times as you want, I want an additional 3 areas so that it will look like this.

Step 13.

Create a new group named sidebar. On a new layer create a rectangle like shown in the image below.

Now go to blending options (Layer>Layer Style>Blending Options) and use the following settings.

Step 14.

Now you can add advertisements or whatever you like here. I will be filling this area with advertisements on my completed copy at the end of this tutorial.

Step 15.

Now I am going to add some “Follow Us” links. I’ve found some good icons that I will be using from www.iconarchieve.com

Step 16.

Now you have to add some links and content. This is what the templates looks with and without content.