Feb 4th

Clean and Creative WordPress Style Theme in Photoshop

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 previous tutorial of ours .

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

With our testking HP0-S23 training program, you will get complete knowledge of web designing and become expert using testking 1z0-043 dumps and testking 350-050 video tutorials.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts26 Comments

  • Omer Greenwald February 4th, 2010 at 9:34 pm

    Great tutorial and a beautiful theme! thanks.

  • jon February 5th, 2010 at 2:58 pm

    really nice work here. Well done and original!

  • Mars February 5th, 2010 at 10:36 pm

    this is a very fantastic theme design, would it be great to have a theme for wordpress

    • zeroone April 19th, 2011 at 3:26 am

      nice theme..

  • Axel February 6th, 2010 at 1:10 pm

    very good !!!!!!! Respect)

  • Alyssa February 6th, 2010 at 7:25 pm

    Great tutorial!! I love the style and the detail! (and the colors!)

    Only thing I’d like to know… okay so the tutorial creates a .PSD file. What next? How do I turn it into a working Wordpress live blog site? I’m not familiar with CSS or HTML, but is that what it would take is slicing the PSD up? Thanks!

    • Matthew Heidenreich February 6th, 2010 at 7:53 pm

      Yes Alyssa, that is what would have to happen. You would have to slice and code to into CSS and xHTML, and then put into WordPress.

  • Tirath February 6th, 2010 at 10:35 pm

    Excellent tutorial with Awesome theme
    Thanks so much for posting & sharing it
    Keep up good work
    God bless you :-)

  • Arshad February 7th, 2010 at 3:30 am

    I like the color combination.

    Thanks for your effort Matthew

  • SHEBI February 7th, 2010 at 10:47 am

    color combination is neet

  • Shubhojit February 7th, 2010 at 3:15 pm

    was very interesting to do, i could improvise a lot.
    thanks so much, was really useful

  • Matthew Heidenreich February 7th, 2010 at 3:26 pm

    thanks for all the comments guys/gals. Always appreciate feed back :)

  • دليل February 8th, 2010 at 7:31 pm

    Good
    Thank you

  • Kiske February 11th, 2010 at 1:25 am

    Thank you, good tutorial. I have made something similiar, and now trying to code it

  • Richie February 24th, 2010 at 1:09 am

    This theme is stunning.. awesome… i am going to use this psd for my blog.. can i? please.. I love this….

    Thanks a ton, Matt :D Your blog theme is very delightful to look at \m/

    • Matthew Heidenreich February 24th, 2010 at 9:47 am

      I’m glad you like it Richie. I don’t mind you using elements from it, but wouldn’t want it to be an exact copy of the design. Hope that works for you ;-) goodluck!

  • Northern Ireland Hotels March 16th, 2010 at 6:25 am

    Stunning template that will inspire a lot of people!

    Do you ever go on and develop these into live themes?

    • Matthew Heidenreich March 16th, 2010 at 10:18 am

      We have not done that yet, but we will be in the future.

  • Nauman Akhtar March 17th, 2010 at 11:56 am

    Its beautiful, Love it. Thanks for sharing

  • 222.77.187.134:8080 March 17th, 2010 at 4:33 pm

    I discovered your website the other day and after reading a few posts, thought I would say thanks for all the excellent content. Keep it coming! I will try to stop by here more often.

  • clippingimages June 8th, 2010 at 12:18 am

    Stunning template:) its really nice……..

  • webigma February 7th, 2011 at 5:33 am

    Nice web tutorials!
    very good, thanks

  • mobil bekas September 6th, 2011 at 1:26 am

    Great and Simple Design, and the tutorial is clear and easy to follow. Thanks!!

  • nonStopCars March 29th, 2012 at 3:19 am

    Thanks for tutorial, it is very useful for beginners like us.

  • andria April 1st, 2012 at 12:11 am

    not sure what to write. i’m a newbee.

  • دانلود February 26th, 2014 at 12:47 am

    Thank you, Matthew Heidenreich, John

Leave Your Response