Grafpedia

If you want to create wordpress themes , Photoshop is the best way to design a theme for your blog. In this tutorial I will show you how to design a wordpress theme from scratch.  Register for a VIP account and you can download the Wordpress theme + PSD layout.

Feel free to use this wordpress them for your website if you want..

Preview live wordpress theme

If you want to see the full size layout please click on the following image:

I will use the grid system from 960.gs
I will download the psd files for Photoshop an I will open the 12 column grid PSD file.
Once I have the psd file opened, I will make sure my Guides are visible:

I will set my foreground color to #d1d1d1 and with Paint Bucket Tool I will fill the background layer.

Available for download you will find

• Wordpress Theme – Preview live demo
• PSD Layout
• Help file

When you transform the PSD layout in a wordpress theme if is very good if you remember the color codes. In this way you can save a lot of time with the coding part.
In this tutorial I will turn off the Guides, because I want you to see better the layout. For your own good I will keep the guides active. You will align the layout very good if you keep your guides.

On top of the layout I will create 3 shapes. and I will apply some simple layer styles.
You can use one gradient from the following 27.000 Photoshop gradients

This is my result so far after I will add some simple gradients to the top and the bottom shape

I will create a new shape with Pen Tool. I will place the shape on top of the document. I will add the same layer style I have used for the other shape.

In the middle of the layout I will create a shape with Rounded Rectangle Tool

The layer style I have used for this shape are:

On top I will create another selection like in the following image. The easy way is to load the selection for the whole shape, and then you can subtract from selection.

I will create a new layer ( press on CTRL+SHIFT+ALT+N ) and then add a gradient. The color I have used for the gradient are: #c1c1c1 on top and #dadada in the bottom
I will deselect ( press on CTRL+D ) and then I will create another shape with a white color. You can notice how easy is to align the layout if you have the Guides active.

For this layer I have used a simple layer style

You can notice a light shadow at the top of the shape. I have used the same technique as above.

On the bottom of the layout I will create another shapes with Rectangle Tool. Please click on the following image to see the full size wordpress theme.

On the sidebar I will add some icons

With Line Tool I will create two lines with different colors

I will add under this social bookmarking area a few spots for banners, and under the spots I will add some text.

Now we will create the elements for our posts. For start I will use Rectangle Tool to create a shape where we will place the post image

Then I will add some text

Under first post I will add some lines

I will create another 2 posts using the same techniques as above.

With Rounded Rectangle Tool I will create a button and I will place it above the social bookmarking icons

For this shape I will add the following layer styles

This is my result so far

Make sure you have this layer selected, and then press on CTRL+J ( duplicate layer )
Select both layers in your layer palette and press on CTRL+E ( merge )
With Rectangular Marquee Tool I will care a selection like in the following image

I will hit the delete key on my keyboard, and then I will press on CTRL+D to deselect. This is my result so far

On top of the layout I will add another button , and inside it I will create some text buttons

I will add a text logo , and some text on the bottom of the layout and my wordpress theme is ready. Please click on the following image to see the full size layout

I have included also the Wordpress theme for this tutorial. If you want to see how it is made you need to register for a VIP account.

You will be able to download:

• Wordpress Theme – Preview live demo
• PSD Layout
• Help file

If you want to use this wordpress theme for your blog you can use if without problems, but please keep the links from the footer.

Want to download the Wordpress theme + PSD file ? Join our VIP membership