Buy now

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.

110

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

24

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.

31

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.

51

And then do another shape but a little smaller.

61

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.

81

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.

101

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.

141

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

151

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

162

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

171

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

211

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

241

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

Already a member ?Download Now !


6 Comments to How to create an elegant wordpress PSD theme

  1. i love this. detailed and to the point.

  2. jpj

    New at this once i build this how do I convert it to a wp site.

  3. What a great tutorial. Thanks for putting this out there!

  4. This is an excellent tutorial! Thank you.

  5. that’s very nice, but you should clarify about Hoover and slide show, if you can.

    Note: How to create a mouse over button in layout, if some one create mouse over button. will it work or not? leee me know.

    But your tasks is very nice.

    thankx
    wwwdon

  6. Looking neat!
    I might create something like that for my future blog, but with a red vibe instead of the blue one

    Thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Latest Tweets