Clean Textured WordPress Style Layout in Photoshop

In this tutorial you will learn how to create a textured and clean 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.

Resource List

Lets get started…

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

2. Now we want to change our background up a bit. Using your Paint Bucket Tool (G), fill your background layer with #DAD5C2. We then want to open up the Paper Crumble Texture from our resource list at the top. Drag and drop it onto your template document, and then duplicate the texture as much as you have to too fill up your document. Change your Textures layers blending mode to Multiply and then lower the opacity to around 15%.

3. Starting from the top and moving down, lets begin with our header. Using your Rectangle Marquee Tool, make a Rectangle similar to the following and fill it with #000000.

4. We then want to insert the following blending options onto our layer by right clicking our layer and choosing blending options from the drop down menu.

5. Again, we want to use our Crumbled Paper Texture from our resource list to place on top of the headers background to give it texture. Change the blend mode to Multiply and then lower the opacity to about 28%. It will look something like the following.

6. Using your Rounded Rectangle with a radius of 10px, make a rectangle similar to the following:

7. Then you can go ahead and place a thumbnail for an article inside your rounded rectangle. Using your Rounded Rectangle Tool again, make a tab similar to the following and make sure it’s under the rectangle you made previously in the layers palette.

8. Now insert the following blending options onto its layer:

9. I used the font “Chunk” for my featured text, and then added an icon from the Mono Icon Pack with the following drop shadow applied to both items:

10. For the empty space on the right of our featured box, it would be a perfect space for an advertisement. So using the same method we used for the featured box, add another Rounded Rectangle similar to the following:

11. We want to make sure the visitors know that it’s a sponsored ad listing, so lets go ahead and add a label. To do so use your Rounded Rectangle Tool with a radius of 3px, and make a rectangle similar to the following and lower it’s opacity to 30%. Then add some text with the color #3E6DC5 and lower its opacity to 30% as well.

12. Using the same method we used to create the “Sponsor” tab, we then want to add some number tabs for our featured box. Leave the opacity at 100% for your active tab. It will look something like this:

13. Now for the navigation that will house our categories. Using your Rounded Rectangle Tool with a radius of 10px, make something that looks like this. Make sure it’s behind all your layers except for your headers background layers:

14. Insert the following blending options onto its layer:

15. Add some text to your navigation and your header is nearly complete!

16. For our  logo I used the font “Chunk” and added the following blending options to my text layer:

17. Then I added a little search box to the right side. Nothing special was done to create it. The icon is from the Mono Icon Pack. When your header is finished, it will look like this:

18. Time to move onto how our posts will be displayed. Using your Rectangle Marquee Tool, create a selection similar to the following and fill it with #FFFFFF.

19. Add the following blending options to your new rectangles layer:

20. The next step is laying out our post. For our post title I used the color #DF593B. For our description text we will use the color #323232. For our tags, date, and divs I used a light grey #9B9B9B. And finally for the continue reading text I used the color #4477CE. All the icons used are from the Mono Icon set.

21. Then repeat this process to make a couple other post boxes. For the pagination, we will use the exact same method we used for the pagination on the featured content box back in steps 12, and 13. When it’s all said and done you will want it to look like this:

22. We are almost finished! Time for the sidebar. Using your Rounded Rectangle Tool with a radius of 10px, and a foreground of #3B3A36, make a rectangle that looks like this going all the way down to the bottom of your posts:

23. It’s a little dull right now, so are going to want to go to our resource list and chose our Homemade Paper texture. Resize it to fit over your Rounded Rectangle and repeat the texture. Change the blend mode to Multiply and you’ll have something that looks like this by now:

24. The texture is a little too dark, so we want to lower the opacity to about 30%, and we need to get rid of the extra texture hanging off the top and bottom. To do so CTRL+CLICK your rounded rectangle layer to select it. Then with your texture layer selected in the layers palette choose the layer mask icon from the tools palette. Your sidebar will look something like the following:

25. Now add the following blending option to your Rounded Rectangles Layer:

26. All that is left for the sidebar is to add some content. For the orange on the subscribe text, I used the color #F78952. All the titles use the font Georgia set to white, and the links are #D6D1BF. All icons came from the Mono Icon Set that we have been using throughout the tutorial.

27. The last step is to add the footer. All you need to do is follow the same steps we used for creating the sidebar to complete these steps. The only thing that is different is that we will be using these blending options on our rectangle:

28. When it’s all said and done, your template should look something like the following:

Using demos to learn different tricks and tips used in web designing.

 

 

This was written by Matthew Heidenreich

One thought on “Clean Textured WordPress Style Layout in Photoshop

Leave a Reply

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