March 2, 2011 posted by Maan

How to create an elegant wordpress PSD theme

How to create an elegant wordpress PSD theme

Hello. In this tutorial i will show you how to create an elegant WordPress PSD theme. You can use this web template also for consulting agency templates, services websites, marketing website templates, business website templates, finance website templates. The design is very clean and can be modified very easy into a great template.

This is our final design. Please click on the following image to see better how it looks our WordPress PSD theme.

291 590x582

For start you need to create a new document. As always i recommend you to start with a blank document with sizes over 1100 pixels width. With Rectangle Tool create a big blue shape in top of your layout.


Then with Rounded rectangle Tool add another shape but this time use a darker blue.


Rasterize this shape. To rasterize a layer you need to right click on this layer inside your layer palette, and choose Rasterize shape. Then with Rectangular Marquee Tool make a selection like in the following image.


Hit the delete key on your keyboard until you leave only the top part of the dark blue shape. Do not forget to press on CTRL+D to deselect.

41 590x582

With Rounded rectangular Tool, create another white shape.


And then do another shape but a little smaller.


I will add a nice image with some sparks. here you can add your own images, or you can create a nice slide show.

71 590x582

On the left and right side i will create some small shapes with the same dark blue color.


Under the slideshow i will create a smooth shadow. You can create this shadow with brush tool.

91 590x259

The next step is to add a button in the hoover state. First create a rectangle with Rectangle Tool.


Bellow you will find all the layer styles i have used for this button.

111 590x466 121 131 590x466

Create a new layer ( press on CMD+SHIFT+ALT+N ) and then with brush tool create a small drawing. Make sure you use a brush with a smooth edge.


Then you can lower the opacity for this shape, and then you can go to Filter > Blur > Gaussian blur.


On top of this button please create a thin line ( created with Line Tool )


I will move to the bottom of the layout where i will create a shape.


Here are the layer styles i have used to create this shape

181 590x466 191 590x466

On the right side i will do the same. i will create there also a new shape.

201 590x573

With horizontal type tool i will create some text, and i will add some vector icons which you can find them in our vector icon pack. Download vector icons


I will add more text inside the shapes.

221 590x244

Also under the slides how i will create more text with horizontal type tool

231 590x174

On the right side i will create some circles. Here you can navigate through your slides


Bellow you can find the layer styles used for the small circles

251 590x466 26 590x466 27 590x466

And the last step is to add on the header of our wordpress theme some text buttons, and our logo with Ultimate Designer Toolkit

28 590x140

This is my final layout. I hope you like it. If you create a website based on this layout please leave a reply. i will be happy to see the outcome.

292 590x582

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

comments powered by Disqus