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.
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
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