Create a clean elegant wordpress theme
->
In this tutorial I will show you a very simple way to create great looking layouts. Even if you use simple techniques you can create a wonderful wordpress themes.
You will need to register for a VIP account in order to download all PSD layouts including this one. Do not forget that you can download the other resources: Vector files, vector icons, photoshop brushes, photoshop layer styles, , gradents, etc. You have unlimited access for 49$.
Open a new document with the following size : width – 960 pixels and height – 1200 pixels.
I will select the background layer and I will add a simple gradient overlay with the following colors: #91a2b4 and #6a7f94
With Rounded Rectangle Tool I will create two shapes. One shape I will place it at the bottom with a white color. Here I will place the header of the wordpress theme, and the body of the website.
The second shape will be placed at the bottom. Here you can place some widgets, or any other details.
I will select the white shape layer and I will press on CTRL+J to duplicate the layer. After that I will right click on the layer and I will choose Rasterize layer
After the layer is rasterized I will go to Select > Load selection. Around the layer will be a selection. I will delete the bottom part of the selection. For this you need to select Rectangular Marquee Tool. Hold down the Alt key and make a selection on the bottom of the white shape. You will see that a minus sign will be visible when you hold down the Alt key. This symbol will allow you to subtract from any selection you have active on your layout.
Your next step is to go to Select > Modify > Contract. In the contract selection window use a value between 3 and 5 pixels.After you click Ok you will see that your selection is smaller than the original
Create a new layer ( press on CTRL+SHIFT+ALT+N ) and with Paint Bucket Tool fill the selection with a random color. After you fill the selection you can press on CTRL+D to deselect the selection. For this layer you will need to add the following layer styles.
This is my result so far
With the same technique as above I will cut another shape, and I will place it like in the following image
I have used the same layer styles as above but in the gradients area I have used another gradient
On the right side I will create another shape with Rectangle Tool
The layer styles are the same with the first ones I have used in this tutorial.I will select Pen Tool and I will make a black shape like in the following image.
I will go to Filter > blur > Gaussian blur and I will set the Radius value to 6.0. After that I will reduce the opacity for this layer to 40%. This is my result so far. You will see that I have a nice and smooth shadow.
In the black area I will place some text and another shape. And in the right side I will place a image.
I will zoom in my document to 400 % and with Pen Tool I will create a simple triangle. Be sure you place this shape right above the background layer
I will use Horizontal Type Tool, and I will add some text on my wordpress theme
On the right side I will create some places for advertising.
In the image from above you will see a line between the posts and the sidebar. The line was made with Line Tool. With the same tool I will create other lines between posts. This time I will rasterize the line layer and with Eraser Tool I will delete the right and the left part of the line. This is my result so far
I will place some text in the footer and another text on the bottom of the layout 9 for buttons ) and I think I am ready with this tutorial. It is a very simple tutorial with basic techniques, and I hope you will use these simple techniques to create complicated wordpress themes.
This is my result so far. Please click on the image to see the full size layout.
If you want to download this layered layout please apply for a VIP account. You will be able to download over 70.000 items together with this PSD layout.




































Very nice! I like the way you did the post info, date, etc.
Great tutorials you have.
great layout tutorial.
thank you very much
Nice Tut , However i saw the same idea used in site before
Lol nice. i like it
one thing – is it me only that thinks you always happen to use noise on most of your layouts and they look identical either way its still good keep up the good work
good stuff….havent seen this style done yet…keep it up
Elegant is the perfect word for this theme. And the tutorial it´s great.
thank for post
wow, amazing! I am inspired to try these out.
Thank you so much. Your all tutorials are brilliant.
You’re an excellent presenter.
You’re the best Grafpedia! I love your videos,
Your tutorials are excellent,
I have learnt so much in a short space of time.
Thanks and keep up the Good work.
Keep making more tuts from us
God Bless you
Oh i am sorry i wrote videos instead of tuts
Can I edit my comment on your web ??
“Create an elegant wordpress theme”
Why do so many articles, like this one, promise more than they deliver and go unfinished?
This article is not about creating a wordpress theme. It’s about creating a ‘mockup’ in photoshop.
Instead of ending here, how about making this a part one and working on a part two. In part two, you can take us through the steps of slicing this up and turning it into a working Wordpress theme.
Hi Jim
I can not create each tutorial into a wordpress theme. we have a tutorial on how to slice a layout, and a few days ago i have a tutorial where i have also the wordpress theme available
I am working from over one month to a full wordpress tutorial and i am not sure i will publish yet. when i write tutorials i want to be sure my members will understand very good how to create wordpress themes
Thanks
This look clipped image header is really impressive.
Great tut, thank you!
Awesome tutorial to learn. Very easy and well defined . thanks for sharing this nice post.
Nice outcome. Thanks.