Design a web 2.0 wordpress theme

Hello my friends. Today we will continue to create another nice web 2.0 wordpress theme. Designing wordpress themes is very easy because they does not require so many details like a game layout, or a restaurant layout for example. In this tutorial we will use the Graphstock framework.

If you are starting a website, or simply want to research new web hosting options, make sure you go with the right service to insure you are getting a quality experience.

Step 1 – Download Graphstock framework

Please download the following empty psd layout : Download graphstock framework. Open this document inside Photoshop, and make sure you have the guides visible. In this tutorial i will not show you how i will align the layout, but for your own good is better to keep the guides visible all the time.. I will create two shapes and a line. The shapes are made with Rectangle Tool, and the line of course with Line Tool

Step 2 – Create placeholder for slide show

With Rounded Rectangle tool ( set the radius to 6 pixels ) create the following shape. here we will add a nice slideshow, and on the left side some introductory text.

Bellow you will find the layer styles used to create this simple rounded shape.

Step 3 – Add lights over your slide show area

Next step is to load the selection. The easy way is to hold down the CTRL key, and with your mouse click on the Vector Mask Thumbnail ( you can find this icon in your layer palette )

Create a new layer on top of all layers, and with Brush Tool draw a white area like in the following image. It is very easy to choose a big smooth round brush, and with white color you can click only a single time inside the selection.

Then from the top of your layer palette, change the blending mode to Overlay. Press on CTRL+D to deselect, and your result should be the same like mine.

Step 4 – Create the body of your layout

On the bottom of the layout i will create a similar shape with the previous one.

For this shape i will use the following layer styles.

Register for a premium account if you want to download over 11.000 Photoshop gradients

In the end you will have the following nice line on the bottom of your layout.

Step 5 – Create the newsletter subscription area

I will create another shape with rounded rectangle tool. Here we will place a newsletter subscribtion area in the next steps.

The same i will use the trick with a new layer above the previous one, and your subscription bar will look like mine.

Step 6 – Add a simple logo and some buttons on your wordpress theme

I will add some text on my header, and also a nice round button. The round button is created with Rounded Rectangle Tool, but this time you need to change the radius value to 20 pixels.

Step 7 – Write a nice introductory text

Right under the logo, on the orange shape i will write some text with Horizontal type tool , and with Rounded rectangle Tool i will create two buttons

Below you will find the layer styles used to create the button

Step 8 – Create the slide show area

On the right side i will create placeholder for a slideshow. You can use jQuery or MooTols to animate this slideshow

Here are the layers styles used to create all the new elements from above

Step 9 – Add text on your layout

Under the header is placed the subscription bar. As you can see it has a very important part in your design. I will use another shapes to create the subscription form, and also i will add some text

Under the subscription bar i will write down some text

Between the two blocks of text i will add a 1 pixel line.

Step 10 – Use our premium resources to enhance your layout

If you area premium user then you can use the following vector icons: 81 vector icons

Step 11 – Create a simple footer

After i will create a simple shape in the footer my web 2.0 wordpress layout will be ready. here is my final result

Premium User ?

If you are a premium user you can use the following button to download this PSD layout. If not you can register gere for a new account: Join Graphstock Premium Program

If you are a Premium member download the PSD file from here

Or you can download from buysellgraphics.com