First thing first I’m not a graphic designer but I have a keen interest in graphics and I have done some basic courses too. So I thought why not make a simple wordpress layout in photoshop, and I guess if everybody likes it I’ll probably code it to make it a working template.

This tutorial is highly recommended for the beginners and learning the basics of photoshop, advanced users may have already understood the process by just seeing it. I’ll keep the tutorial short and give you full control over the creation. The following picture is what we’ll try to create.

Click For Large Size

Planning

First thing is planning. Before you jump into working on a layout it is highly advisable to plan out the basics such as locations of different elements in the template. As you can see in the template, I’ve positioned the sidebar on left and the content on right. The header has 3 elements the top header the middle header and the lower header containing the static pages. (figure 1)

Header

Create a New Photoshop File of 1000*990px, please note i have taken 1000 instead of 1024 which is the actual screen resolution because in actual world their will be the scroll bar on the right which will take up approximately 24 px
We’ll first work on header. Create 3 rectangles as shown in figure 2 using Rectangle Tool For your benefit I have provided a download link for the layer styles I have created and used in the template. Load the layer styles and apply Rectangle 1 style to rectangle 1, rectangle 2 style to rectangle 2 and rectangle 3 style to rectangle 3. Simple. (Figure 3)

Figure 2

Figure 3

We’ll now try to add a logo search bar and social networking icons. I have created a style and named it logo type your text in any font (I used Futura Md BT) and apply logo layer style. Now draw a rectangle on the upper right edge on rectangle 1 and apply the style named Search. For the social icons I have used the free icons from fasticon which can be found here : Icon Archive. I have resized them using transform tool and added them side by side. The search icon inside the search box is from famfamfam silk icons. Now using Myriad font I wrote a “Search Site” inside the box in light grey colour. And also the menu items on rectangle 3 are written using Myriad and spaced accordingly. The colour used is light green (eff5b9) Figure 4

Figure 4

Body

Now we’ll move on to the sidebar. Draw a rectangle using rounded rectangle tool on left and taking radius 10px. And apply the style named “body”. Similarly draw a rectangle on right and apply the same style. Figure 5

Figure 5

Now we’ll tweak the sidebar, draw 2 squares 125*125 px for adv add then in top of sidebar. Give them light grey 1px stroke (e7ecb8). Also write the texts for heading I have used (436c00) For subcatagories I have used (565656). And for highlight I have drawn a rectangle and put it below the text, colour (eff5b9). Sidebar is ready, you can further tweak it as per your needs. Figure 6

Figure 6

Now the post things is not tough but tricky, 1^st i draw a white rectangle with light green border. Then I wrote the headings with 32pt Myriad font. I drew anather box of light green for the details and wrote the details with deepgreen. Then using light grey colour I typed the summary text. Then using rounded rectangle tool I have drawn a rectangle and put it on back of the white rectangle for the readmore and comment thing, and added the text. Its hard to explain here better download the PSD and check it. Figure 7

Figure 7

Footer

Last thing is very easy, you have to draw a rounded rectangle for footer give it a dark green colour and add texts. Your template is ready !!

Download

Please download the GREENARY.RAR file for the layer styles and complete PSD needed for the template. Hope you enjoyed the basic tutorial. Thanks !!

The sparkling vps hosting is going to overlook the traditional dedicated server web hosting.