Design a creative wordpress theme
In this tutorial I will show you how you can create a creative wordpress theme in Photoshop. The layout can be done in less than an hour if you have the right tools on hand. The most important things on this layout are the details. Adding more details will change drastically your layout.
Register to download this layered PSD file
I always receive by mail the same question. How long does it take me to create such a tutorial. To be honest a PSD file like this maybe 30-50 minutes.
To write the tutorial it takes me more because I am not a native English speaker.
I need around 2-3 hours ( to make screen shots, explain you all the things )
When I create a tutorial I am using the same tools our VIP members will have access. I am using always the same set of gradients, layer styles, vectors, icons and for me it is very easy to create the PSD layout in a few minutes.
I also recommend you to follow 5 tutorials of mine , and i am sure you will be able to create the 6th one alone without help.
If you are a VIP member please follow my tutorials, and let me know how fast you can complete a tutorial.
Before you will start this tutorial you will need to download the following items:
We will create a background for this wordpress layout.
Open the background pattern, and go to Edit > Define Pattern. Choose a name for this pattern and click OK. You can now close this document because we don’t need it anymore.
Open Photoshop, and create a new document (press on CTRL+N to start a new document). I will use the settings from above because a lot of people use premade Photoshop grid layouts.
Select Paint Bucket Tool, and on the top of your screen be sure you select the pattern we just created a few seconds ago.
Click one time inside the layout. Your entire document will be filled with this nice wood texture. When you transform the layout into a CSS? xhtml layout you can use the background image from above. It will fill your entire browser without a problem.
Click on the following image to see the background image
Select Rectangle Tool, and create a shape on the top of the wordpress theme
The color I have used for the header is black.
I will create another layer on top of this layer (press CTRL+SHIFT+ALT+N)
With Brush Tool, I will create a single point on the left side of the header. In this place I will add the logo.
I will change the opacity value to 30 % for this layer
I will select Line Tool, and I will set the line weight to 1 pixel
I will change the foreground color to white, and then I will make a horizontal line on the bottom of the header. I will change the opacity value for this layer to 20 %
Right above the header of our wordpress theme I will create another shape with Rectangle Tool.
I will add the following layer styles
This is my result
I will select Rounded Rectangle Tool, and I will create a shape on the middle of this template
For this layer I will add the following layer styles
I will right click on the layer in my layer palette, and I will choose Rasterize Layer
I will select Rectangular Marquee Tool, and I will make a selection on the right side of this shape.
Be sure you have the big shape selected in your layer palette, then click on CTRL+J. This shortcut will create a new layer via cut. This means a new layer will be available over the original shape.
I will press on CTRL+D to deselect, then I will add the following layer style for this shape
This is my result
With the same technique I will cut other shapes from this sidebar. I will not explain one more time because are very easy steps, and I am sure you will not have problems.
I will select Line Tool, and I will create some thin lines
For the vertical line I will add the following layer style
This is my result
I will add some images and some text in this area. I will use one set if icons you can download from here: Download vector icons
On the left side I will add alone some text, and another icons from the same vector icon set. Click on the image to see the full size layout.
Now I will move to the top of the layout. I will create a nice are where you can feature your latest post, or your services… I will use Rounded Rectangle Tool, and I will create a black shape with an opacity value of 80 %. Click on the image to see the full size wordpress theme.
Rasterize the shape again, by right clicking on the layer, inside your layer palette.
Duplicate this layer (press on CTRL+J) and then with Rectangular Marquee Tool, make a selection .
Be sure you have the layer selected in your layer palette, then hit the Delete key from your keyboard. Press on CTRL+D to deselect. The remaining shape we will use to create a navigation bar
Select the navigation bar and add the following layer styles
This is my result
I will cut another layer from the previous one with the same technique. I will show you the remaining layer with another color
For this layer I will add the following layer styles
I will select Pen Tool, and I will create an arrow on the slideshow
If you want to save a lot of time you can apply for a VIP membership, and you can download one of the following sets with layer styles: Download Layer styles
We have a few thousand layer styles ready for you.
If you don’t have a VIP account already then use the following layer styles.
I will write down some text over these buttons, and this is my result.
I will create 2 thin lines with Line Tool. The top one will be Grey and the bottom one will be Black
I will select both lines n my layer palette, then I will pres on CTRL+E (this will merge the layers into a single one). I will grab Eraser Tool, and with a smooth round brush I will delete the extremities of this line.
I will add more text on this layout, and this is my final result.
If you want to download this PSD file please apply for a VIP account. For a Small fee you can download all the resources from our blog.
WordPress theme or a page design?
Whata about the slicing&coding part?
It is only the Design in Photoshop
Hey, I like this one, it’s similar to that communication layout you made but it flows smoother, and the things that weren’t quite right in the communication layout were fixed in this one,
. Great job, I like this one, 
.
Hi,
Great tutorial, but what about slicing it up and using it as a Wordpress template? Could you make a tutorial about it? Or just giving a good link to learn slicing it up and using it as a Wordpress template?
Thankx,
Glenn
Soon we will create also a tutorial on how to transform a PSD to a wordpress theme
Oh, that’s great to hear. Thanks.
Fantastic design and nice tutorial! I have rated this blog as one of the Top 100 blogs on my site:
http://kpobuddy.wordpress.com/2009/07/22/top-class-100-blogs-for-website-designers-and-web-developers/
Thank you very much
thank you! That looks like a great resource
clean and nice theme thanks for the tut..
Just a quick question: would you put a link here to the tutorial on how to transform a psd to a wordpress theme?
Thanks,
Glenn
I am tring right now to find a way to transform a PSd file into a wordpress them. i am working with some programmers to see if i can build automatically a wordpress theme
Wow! That’s great. I really like it and I hope you’ll create more tutorials like this one
Keep up the good work
goddamnit!! Freaking detailed tutorial! This is awesome, good job man!
Thanks, nice design
Nice tutorial, really good work
i like the color, its nice.
There should be a tutorial on How To Code this theme… It would be amazing…
@Ankit Bathija
At the moment he’s looking together with some programmers to transform a psd file to a wordpress theme automatically.
Yes it is true. I am waiting to have all my programmers back from the holiday then i will try to create a software to turn the PSD files into Wordpress themes
nine teaching
Hey
What a great tutorial thanks so much!!!
Here is my attempt http://www.every-occasional-videos.co.uk/new/test.jpg
What do you think?
From My previous post, I’m not that experienced at slicing this kind of stuff as well as coding it, and as I’m really eager to use this as a design, can you help me out? And teach me?
PLEASE???
Thanks
Hi Martin.
If you want to transform this layout into a CSS / XHTML layout then you have to apply for a VIP account, and read the following tutorial:
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
Your design is very good so far. after you will fill it it will be much better. Keep up the good work Martin
hello, what text font did you use?
it’s Aargh, i think, isn’t it?
http://www.dafont.com/font.php?file=aaargh&page=1&nb_ppp_old=10&text=Latest+Blog+Posts&nb_ppp=10&psize=l&classt=alpha
finally, i know which one did you use. its myriad pro. i tried it ago, but regular Myriad Pro. but right is Bold Condensed Italic:-)))
Yes Myriad pro is the font i am using almost on all tutorials
good i like this one
Fantastic design and a great tutorial. Is this available for WordPress? Thanks for the guide!
Hi Daniel. This layout is available only for Photoshop
That’s cool stuff and very well designed, i like this website work is very creative and professional.
Is it have source code for wordpress theme?
I created a new wordpress site and I don’t have a good design yet. But I hope your tutorial will help me a bit, but it looks complicated for a beginner like me.