Web Designing Photoshop Tutorial:How to design a trendy wordpress theme

Tue Sep 13th 2011
In this tutorial i will show you how to create a trendy wordpress theme. The design is very simple, and in this tutorial you will have presented ...

In this tutorial i will show you how to create a trendy wordpress theme. The design is very simple, and in this tutorial you will have presented only the first page. As you know already wordpress allows you to create also CMS websites. In this tutorial you will learn how to create the first page for your CMS wordpress theme. For start create a new blank document, and then with Rectangle Tool create a simple shape on the top of your wordpress layout.

110

Then with Rounded Rectangle Tool create a shape. This shape will be used to create a  slideshow.

210 590x736

Bellow you can find the layer styles used for the previous shape.

312

410

510

610

Please make sure you save this Layer style, because you might use it later. Over the slide show shape create another shape like in the following image.

710

For my previous layer i will use the following layer styles.

88

92

102

On the left side i will add another shape.

112

Bellow you can find also the layer styles for this shape

122

132

142

With Ellipse Tool i will create a dark shape like in the following image. This dark shape will be used to create a smooth shadow.

152

After you create the dark shape please go to Filter > Blur > Gaussian Blur, and choose a random value for the blur settings. Then delete the bottom part of the shape until you have the following result. Please remember this technique because we will use it later in the footer of the layout.

162

The same i will create a new shape right under the slide show, and then i will add the same blur effect.

172 590x121

This time i will select Eraser tool with a smooth round brush, and i will delete exactly in the middle of the previous layer. You will have a very nice looking shadow under this shape.

182

On the footer of the layout i will create a simple shape.

192

Then i will add the following layer styles.

202

203

212

222

On the top of the wordpress theme i will create  a text logo, and under the shape with logo i will draw on  a new layer with a white brush. Make sure you set the blending mode to Overlay, and you can set also the opacity value around 50%.

232

Right under this logo i will create two lines.

242

Then i will make a selection with rectangular marquee tool, and one a new layer i will fill it with a stripe pattern. make sure you delete the bottom part of this layer with eraser tool.

252

I will add a simple horizontal menu.

262

And on the right side i will add with rectangle Tool some form, buttons, and a search box. There are very easy steps, and i am sure you don’t need them explained more.

272

On the footer of the layout i will add some text, and a newsletter subscription form. You can subscribe to our newsletter too if you like. You will receive some very good resources, and free tips, and tricks.

282 590x144

On your footer you can add the same shadow you have learned already. I have used this technique right under the big slideshow.

292

Now i will add some text, a simple triangle, and some horizontal lines on the slideshow.

302

Then i will fill it with some colorful images.

313 590x218

On the body of the layout i will add some text, and icons. Please click on the following image to see the result better.

322 590x296

This is my final result. I hope you like this wordpress theme layout

332 590x736

Share
Share to Yours:
Related Sites
More on related sites:
Copyright © 2010 onetuts.com - All rights reserved.