Clean and Creative WordPress Style Theme in Photoshop

In this tutorial you will learn how to create a clean and creative WordPress style layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Lets get started

1. First thing we want to do is create a new document with the dimensions of 1020×1300.

2. Using your Paint Bucket Tool fill your background layer with #FEFAD3. Now duplicate your background layer. On your duplicated layer, we want to add some noise to it. Go to Filter>Noise>Add Noise and insert something around 12%. Lower your layers opacity to around 58%, and you’ll have something that looks like this for your background.

3. It’s now time to get started with our header. Using your Rectangle Marquee Tool (or Rectangle Tool), make a selection similar to the following and fill it with #1F2E31.

4. We then want to go ahead and load these patterns into Photoshop. Once you have them loaded, right click the layer you just created in the layers palette, and choose Blending Options from the drop down menu and insert the following:

5. Lets go ahead and add a search field to the left side of the navigation area at the top. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #1F2E31.

6. Then we want to add the following blending options to that layer:

7. Now add some text to represent that it is a search field, and then add a search icon. The icon i used was from the Iconic Icon Pack.

8. Using a font similar to Myriad Pro, go ahead and place some links on the right side of your navigation bar in a similar way to the following. For our active ‘Home” link we used the color #C7544E, and our non-active links are white. The icons used are from the Mono Icon Set here.

9. Next we want to add our logo to the template. I created a simple text logo using Helvetica. For the “DS” part of the logo, we put the “D” and the “S” on their own layers. To make it look as if the “D” is only being overlapped by the bottom of the S, we need to make the following selection:

10. With your “D” text layer selected, choose the Add Layer Mask Icon from your layers Palette.

11. Now it’s time for our Categories bar which will be placed horizontally under our logo. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #444645.

12. Insert the following blending options onto its layers:

13. Now add some text to represent your categories across your category bar and it will look something like this:

14. Let’s go ahead an work on how our posts will be displayed. Using your Rectangle Marquee Tool, make a Rectangle Similar to the following and fill it with #FFFFFF. Then place a thumbnail image and text in a similar format as the following:

15. Using your Rectangle Marquee Tool again, make a selection like this and fill it with #000000.

16. Insert the following blending options onto its layer:

17. The last step for the post preview box is to add our social buttons, comments..etc. The comments icon used is from the Mono Icon Set you downloaded in a previous step. The social media icons can be downloaded from psdtuts. Add a 1px wide #D3D3D3 divider between each section of your bar and your post preview will look like this:

18. I then just repeated that process a few times to fill up the left side of my document.

19. For our pagination, I wanted to go with something simple. Make a white rectangle similar to the following, and then place your text for your page numbers in a similar fashion. I used #484848 for the link colors, and then #7E7E7E on the “Page 1 of 25″.

20. Now it is time to move onto the sidebar. We want to make sure and have all the following layers under all our layers except our background layers. To make the background of our sidebar, we want to use our Rectangle Marquee Tool yet again and fill a selection similar to the following with #C7544E. Make sure your selection goes to the bottom of your document (refer to final image preview).

21. We want to add a jagged ripped effect on the top of our newly created box. Zoom in real close and pull out your polygonal lasso tool and make a selection similar to the following:

22. Then choose EDIT>CLEAR. Keep moving your selection to the right until you have your rough edges. Your final result will look like this:

23. I think the category bar blends in to much with the background of our sidebar, so lets go ahead and make a selection similar to the following and fill it with #EAE9E9.

24. Insert the following blending options onto its layer.

25. All that is left for the sidebar is to add some content. This part is pretty straight forward. For the headings I used the font “Georgia” with the color #FCF9DD, and the icons came from the Mono Icon set we downloaded previously. For the red dashes under our section titles, I used the color 9C3B36.

26. The last step is to add our footer. Repeat the same process we used in steps 3 and 4 to create the background to our footer. Then all I did was copy our logo and add some copyright text. On the left side I just added a little recent tweets bird that was used from a .

27. When it’s all said and done, it will look something like this:

Enjoy! And don’t hesitate to comment and ask questions (as that’ll encrourage us to post more).

 

 

This was written by Matthew Heidenreich

Leave a Reply

Your email address will not be published. Required fields are marked *