It has been over a year since I last wrote a Photoshop tutorial but now I’ll try to write a few per month, to help people with my own tutorials, not just roundups. Today we will learn how to make a premium WordPress looking layout. This is a detailed tutorial with a final result that doesn’t look superficial, but instead, well made and which respects some design standards which you may have read about on Noupe or Smashing Magazine. Enjoy the Photoshop tutorial.

Get guaranteed success in 350-001 exams with most excellent 70-680 practice questions and 640-802 video demos.

The final result (click for fullview):


1. In the first step open a new 1200 x 1770px PSD and fill it with the color #444444. The second color in the pallete should be clear white (#ffffff). Now go to Filter – Noise – Add Noise and select an amount of 17% – Uniform – Monochromatic. It will look a little edgy so right click on the layer in the layer palette and select blending options. In here set the Color overlay to #444444 70% opacity. Remember this so I won’t say it on each step: Everytime we’re doing something, make a new layer for it.

2. Now it’s time we get on with the header. First stop, the menu. CTRL + Shift + N to make a new layer. Take the rectangular marquee tool and make a 70px high rectangle sitewide which you will later fill it with white. Deselect by pressing CTRL + D. This is the place for the buttons. It will now look like this:

3. To make things easier with the menu, we’re not going to use the Rectangle Tool. Instead we’re going to use the rounded rectangle tool and select a radius of 5px (in the upper bar). Now simply draw a button not to big, not to small, just perfect considering the fact that its width will correspond to its text’s width and that it should have a margin of 3-5px up and down in the white bar. After that click blending options and select the following:

4. Now add text inside of it. I used Helvetica 12px Bold #FFF and I centered it. The button will now look like this:

5. Do the same thing for the other buttons and let’s do a dropdown menu too. Take the Rectangular Marquee Tool (M) and draw a rectangle which should have the width of the biggest menu link in it plus a few pixels left and right margin. Make it only 100px high Now fill it with #b30b08 and don’t deselect it yet. Go to Select – Modify – Smooth and use 5px. Now go to Layer – Layer Mask – Reveal Selection. Add two text links in it and separate them with a 2px line like this:

6. Ok. Good till now. We have to make a big header to put the logo in. Below the menu bar make a site wide rectangle having 200px height aprox and fill it with #1b1b1b. It should now look like this:

7. Now let’s add a little style to this. Use color #2c2c2c and gradient tool and select radial gradient tool. The second icon, Like this:

8. Now just draw “bubbles” of gradients in the grey space. They will be a little bit lighter than the header’s background. You can observe that the gradients go outside the header. Don’t panic. Select the gradients layer in the layer palette and hold CTRL and click on the grey background layer. It will make a selection. Now use Selection tool and right click on the selection in you screen and make a layer via cut. You’ll only need the new layer, which doesn’t go outside the header’s limits. Delete the layer which goes outside. To see which one it is, chech or uncheck the “eye” in front of the layer in the layer palette. Now let’s make a small adjustment to this header and add a 1px line on top of it and one on its bottom. You don’t necessary have to use these colors for the 1px lines. It is actually recommended to make them more subtle.

9. Now we’re adding a logo for our WordPress theme design. I used the font BorisBlackBoxx at 40pt with a gradient from #960505 to #d20f0a and a 6px #FFF outside stroke, but this is just for the tutorial. You can put your own logo here.

10. Work done with the header. Select all the layers in the layer palette except the noisy background by clicking the first, holding the shift key pressed then clicking on the last. Now use CTRL + G to make a group. It’s better to be organized. Name it “header”. Now let’s concentrate on the other part of the layout. I didn’t mention this so far but we’re making this layout respecting some of the standards of the 960.gs. This is important because the content of the WordPress theme will have 960px width. First we have to make it. Use the Rectangular marquee tool and make a 960px wide rectangle, fill it with white and go to Select – Modify – Smooth 5px.

11. We’ll divide the content in two, left and right. It’s better to make two groups from now like we’ve learned in the previous step. You can do them by either making a new layer (CRL + SHIFT + N) and then CTRL + G or by using the little icons in the layer palette. Make a new layer 75px wide and let’s say 300px high and apply the same noisy technique used for the background in step 1 but this time with lighter colors. Delete the extra material that goes outside the white box.

12. Add two 1px lines with the following colors in the grain area’s right like this:

13. Now it’s time to make a date rectangle. Using the rounded rectangle tool make a perfect rounded square (sounds silly, I know) by holding the shift key when dragging. right click on the layer – blending options and use the following: Inner Shadow – black (#000000), angle 132 degrees, 40% opacity, 2px distance, 0px choke, 2px size; Inner glow – 75% opacity, color #747474, 0% choke and 35px size; Stroke 1px outside #FFFFFF. Add a little text inside of it and center it.

14. Now add some social icons. I used these from webtoolkit4.me

15. Let’s work on the post now. Using the type tool (T) write the title (Helvetica 25pt), not too short, though. Beneath it, We’ll add the category from which the post is. For that we’re going to write “category name” (12pt). Around it we’ll make a rectangle with the Rectangular Marquee Tool as before and place it beneath the “category name” layer in the layer palette. For it use the following blending options: Outer glow – 100% opacity, color #136485; Gradient overlay from #258fcd to #2787b7; Stroke 1px #35aeec Outside.

16. We’re going to do a #b9b9b9 1px line that stretches like in the screenshot. This will be the separator for the posts. It’s not niceable now, but you will see its importance later.

17. Add an image below the title and some text. Below these we’re goint to make a “read more” button. Create the text “read more” and around it/behind it, as for the category make a rectangle but with these blending options:

18. Duplicate the group named “left” and place it below the previous by draggind it with Move Tool (V). I duplicated it twice so that I’ll have enough posts to go as far as the sidebar on which we’ll be working in the next steps. Now you’ll see the importance of that 1px separator that we’ve made on top of the post.

19. Now we’re moving in the group named “right” which is actually the sidebar. To separate it from the posts we’re going to make a small horizontal gradient. Don’t make the gradient too big. We just want it to be subtle.

20. Add a Search the site title with the following blending options: Inner Shadow – #000000, opacity 75%, angle 132 degrees, distance 1px, size 1px; color overlay #858585. This will give it the letterpress effect. In front of the title put a search icon. I used one from the Function icon set. http://wefunction.com/2008/07/function-free-icon-set/ Below the title make a rectangle with the rectangular marquee tool, fill it with white and add the following blending options: Inner glow – 75% opacity, color #e2e2e2, 13px size; Color overlay #f4f4f4; Stroke 1px #FFFFFF. Insert a text in this box like “Enter keywords here” but don’t use black for this one, try a more grey aproach. :) On this box’s right side make another rectangle which will be the button. Use for it the same blending options that you used for the “read more” button. To do this easier right click on the read more button (in the layer palette) and select copy style. Then select the search button, right click it and paste style. Voila! Now add a text inside it like “go” or “search”. To end the instructions with this sidebar widget make two 1px lines like we did before with the colors #ffffff and #b9b9b9.

21. Now we’re making almost the same thing for the subscribe widget. We’re not putting any icon in front of the text. Instead, we’re putting three icons after it.

22. It’s time to make a sponsors area too. A normal title, with no icon and 6 125×125 images.

23. Ok. Let’s get back to the serious stuff. We’ll make a “categories” section. We’ll make the title the same as for the search but we’re going to change the icon. I want these categories to be on two columns. Let’s start with the first line of the list. I used a Helvetica 10pt bold text. We’ll make a bullet in front of it. How? Draw a small rectangle and use the following blending options: Outer glow – 100% opacity, color #771315, spread 100%, size 2px; Gradient Overlay from #960505 to #d20f0a; Stroke 1px outside #cc0e0b. In the middle of this bullet draw on a new layer an arrow with the pencil tool. Make a text layer (T) and type a name for your category – Helvetica 10pt Bold #929292. I used Group the layers into one tiny folder like we’ve learned before layers selection and then CTRL + G) and duplicate the group a few times and place it on two columns as I’ve said. Don’t forget to make the two 1px separators at the end of the widget (you can actually duplicate the separator from another widget, you don’t have to draw it again and again. It will now look like this:

24. For the “Featured articles” widget we’re going to do almost the same thing as for the categories except the fact that the list will be on a single column and the text size is 12px.

25. We’re almost done. It is time to make pagination for our theme. By now, you should be able to make the pagination just by looking at the following picture… and of course with a few mentions. For the text 1,3,4 etc the text color will be the same as for the text on the design. The “first” and “last” button have the same layer style as the “category name” button. Copy layer style and paste layer style like you’ve done before. The active page button (number 2) is a single rectangle filled with the color #268dc6. The separators are 1px vertical lines using the same gray color as the text. Don’t forget to group the layers.

26. As for the footer, it’s a text layer center using the color white. The so called links are bolded.

The final result (click for fullview):