Grafpedia

Today I will show you one more time how to create a wordpress theme in Photoshop. Soon I will start designing some premium wordpress themes together with a friend and I thought it is good to share my knowledge with you. In this tutorial I will create a 2 column wordpress theme.

Preview full size WP Theme Layout

Register to download. If you have an account you can download all our VIP files.

Let’s start this tutorial with a new document with the following sizes: 960 x 900 pixels. Normally the height of this layout is not important, because you will set how many posts are visible on your page from your wordpress admin area.
I will use a dark background for this layout: #222222

I will create a new layer (press on CTRL+SHIFT+ALT+N) and on the left side I will add a simple brush drawing, with a smooth brush.

I will grab Rounded Rectangle Tool, and I will create 2 shapes. On the top layer I will place the navigation bar, and on the bottom one will be the content

With the same tool I will place another shapes. Please click on the following image to see the full size wordpress theme

For the yellow shape I will add a simple stroke

This is my result

Make sure you have this layer selected in your layer palette, then press on CTRL+J to duplicate this layer. Select Move Tool, and press on the down arrow key from your keyboard. Place the shape like in the following image

You can see that I have changed the color for the second layer to #eeece2
Right click on this layer in your layer palette, and choose Rasterize Layer

Select Rectangular Marquee Tool, and make a selection on the top of the shape

Be sure you have the proper layer selected, then press on Delete key from your keyboard, and then press on CTRL+D to deselect. Click on the next image to see the full size layout

Select Line Tool, and set your line weight to 1 pixel

I have used the following colors to create some lines: # c2bead and #ffffff. Here I want to create a nice slideshow.
The following image is zoomed to 200 %

This is the real size

I will select Polygon Tool, and I will set the sides to 3

I will create a triangle, and I will place it on the top thumbnail

For this shape I have used the following layer styles

Now I will duplicate this layer (select the layer in your layer palette, and press on CTRL+J)
Select both layers in your layer palette, and press CTRL+E to merge the layers into a single one. The result is the same but this step is required in order to achieve the following effect
Select Eraser Tool, and choose a smooth brush with a size of 30 pixels, and delete the left part of the triangle

To create a nice arrow, I will use the following layer style

This is my result

I will place some images on this slideshow with one of my previous tutorials:

Design a stylish Chevrolet Icon in Photoshop
Draw a surreal dragon
Draw a cartoon girl

On the right side, in the wordpress side bar I will place some banners. I know this is an easy step, but ads should be inside a wordpress theme, because for some bloggers is the only way to generate revenue. If you create wordpress themes for your clients, please take
care of this feature, and incorporate spots for ads from the first time.

On the left side of this wordpress theme I will add some text. This will be transformed into actual posts

On the slideshow I will create another shape with Rounded Rectangle Tool, and then I will delete the top part of the shape

On the top part of the layout, I will place some bookmark icons. A few days ago I have released a set of scratched vector icons: Download icons

Add some icons on the right side and let your users interact with you through social bookmarking sites

This is my final wordpress layout.

If you want to download this layout please apply for a VIP account, and you can download all resources from our blog including this layered PSD wordpress layout