Mar 29th

Create a Chalkboard Style Wordpress Layout in Photoshop

Matthew Heidenreich in Tutorials with 30 comments

Create a Chalkboard Style Wordpress Layout in Photoshop

In this tutorial you will learn how to create a unique and original WordPress style layout that looks like a chalkboard. 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.

Try Online Color Printing at PsPrint

Final Result

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

Resource List

Lets get started…

1. The first thing we want to do is create a new document with the dimensions of 1020×1160.

2. This theme will be using a dark background, so use your Paint Bucket Tool (G) to fill your background layer with #1C1C1C.

3. Create a new layer above your background layer and name it “Background Texture”. Then fill it with #1C1C1C. We then want to add some noise to our layer. Navigate to Filter>Noise>Add Noise and insert the following:

After inserting these settings, lower your Background Texture layer to 30%.

4. Time to start with our header, which will be pretty simple and straight-forward. For our text logo, I used the font Eraser (in resource list above) with a foreground of #FFFFFF. Behind our text layer we want to give a faded chalk feel. Using your Brush Tool (B), open up the artistic default brushes and locate the Chalk Brush set.

5. With a #000000 foreground, brush something similar to the following on its own layer and lower the opacity to about 20%.

6. For our horizontal navigation, I used the font Chalkboard. Your active link should be #272727, and your non-active links should be #FFFFFF. Behind your “active” link, we want to use a #FFFFFF Chalk Brush in a similar way to the following:

7. Setting up the content area will be the trickiest part. Using your Rectangle Marquee Tool (M) make a rectangle similar to the following and fill it with #2E5A39. Name this layer “Green Back”.

8. Next we want to duplicate our “Green Back” Layer, so with it select it hit Command+J on your keyboard. Rename your duplicated layer to “Noise”, and insert the Noise settings we used in Step 3. Change your Blend Mode to Lighten, and then lower the opacity to 40%.

9. We now want to move back to our “Green Back” layer and insert the following blending options onto its layer:

10. You will have something that looks similar to the following:

11. The frame for our “Chalkboard” is next. To do this use your Rectangle Marquee Tool (M) and make a selection similar to the following. Make it span the whole side of your chalkboard back, and then fill it with #323232.

12. We now want to add some texture to our layer. To do this go to Filter>Render>Fibers. Insert 11 for the variance, and 28 for the Strength.

13. Obviously we don’t want our border to be white. So we want to open up on Hue/Saturation (Command+U) panel and insert something similar to the following to give it a brownish tint. Your settings may be a little different than mine.

14. Our border looks a little flat, so insert the following blending options onto your borders layer:

15. You will have something that looks like this:

16. Repeat these steps for the other sides of your chalkboard, and you’ll have something that looks like the following. Note, make sure your side border layers are above the top and bottom layers.

17. That’s it for the frame! To display our categories, we want to add some text in the following fashion. For our active link “Graphics”, I used the color #EEE2D5. For our non-active links we will use #D8C0A8.

18. Behind our active link we now want to add a Rounded Rectangle with a radius of 3px, and a foreground of #000000.

19. Change the fill of your Rounded Rectangle to 50%, and then change the blend mode to Soft Light. Now insert the following blending options onto your layer:

20. It will look something like this once its complete:

21. We now want to work on the left side of our content area. We want to make a little title for our posts that says “Latest Articles”. I used the font Georgia. I then used the same technique to create the faded chalk as I did on the logo back in Step 4. Instead we will use white, and once you have something you like, lower your chalks layer opacity to about 7%.

22. Our posts aren’t going to be listed like a normal WordPress blog, but with a image and a title overlaid onto it. Place your post image with the size of 240×240 onto your document and then insert the following blending options onto your images layer:

23. The rest is all about using your Rectangle Marquee Tool to create the shapes needed, while lowering the opacity to the proper percentage. The comment icon is from the Mono Icon Pack listed above. Use the settings below to set up your post:

24. Once you do this a few times, you will have something that looks like this:

25. With your Rectangle Marquee Tool (M), make a rectangle that looks like the following and fill it with #FFFFFF.

26. Then we want to go to FIlter>Blur>Motion Blur. Set the angle to -90 and insert something around 120px until you get something that looks like the following:

27. Now lower your layers opacity to 50%, and change the blend mode to Soft Light. Next, create a new layer and using your Rectangle Marquee Tool yet again, create a rectangle similar to the following and fill it with #000000.

28. Change the blend mode to Soft light, and then lower the opacity to somewhere around 30%.

29. For the title areas of our sidebar, we want to use the same effect we used for our “Latest Articles”. Instead of using Georgia as the font, we will use our Eraser font that we used for our logo. Go ahead and make it look something like the following:

30. For our search field we will do the same thing. To create the input box, all I did was use one of the Chalk Brushes we have been using and dragged it across with a white foreground. The font color for the text inside is #515151.

31. The last thing to do for our sidebar is to add our social media icons and some chalk to the bottom of our board. The icons can be found in the resource list above. You will need to add a white color overlay in your blending options to each icon. For the chalk at the bottom, just use your Chalk Brush Tool again. You will have something that looks like the following:

32. The last step for our template to be complete is to add a footer. Make sure you create all these layers under everything but your two background layers. Using your Rectangle Marquee Tool, make a rectangle that looks like the following and fill it with #000000. Make sure it goes all the way to the top of your content area so you have a little of it showing at the top:

33. Lower the opacity of this layer to 18%, and then add some text in the following manner.

34. Your final result will look something like the following:

Join test king to learn professional web designing and become expert using latest testking NS0-163 tutorials and other testking 70-663 resources related to photoshop.

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 Thoughts30 Comments

Leave Your Response