Mar 4th

Clean Textured Wordpress Style Layout in Photoshop

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 EX0-101 design guide, you can create unique designs for your web page. Download the 70-649 tutorials and 642-832 demos to learn different tricks and tips used in web designing.

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

  • Imon March 4th, 2010 at 1:11 am

    Absolutely loving this tutorial, the header came out really nice! great job Matt

  • Chris Horton March 4th, 2010 at 10:25 am

    Hi, nice tutorial, I particularly like the style of the pagination. May use something similar on my site.

    Chris

  • Dodi Rahmaninoff March 4th, 2010 at 10:51 am

    Cool design, really like it ;-) , thanks for sharing.

  • Saad March 4th, 2010 at 10:39 pm

    Honestly This is Such a Boring Tutorial there nothing to learn.

  • Tirath March 5th, 2010 at 9:15 am

    Awesome tutorial with nice web layout
    You are genus Matthew Heidenreich
    Your all tutorials are valuable for us
    I learn so much form your Great tutorials
    Keep them to come
    Keep up good work man
    God bless you Genus :-)

  • clippingimages June 8th, 2010 at 1:08 am

    cool design:) like it……

  • Clipping Path India June 26th, 2010 at 3:33 am

    Awesome design.Really its a clean and clear design.Thanks for sharing with us.

  • Rokaiya Yeasmin Munni August 16th, 2010 at 4:44 am

    Great photoshop tips,,,

  • Deepetch February 17th, 2011 at 6:53 am

    Wonderful tutorial and design. Hope will use for thing in our blog site.

  • Sharon W July 2nd, 2011 at 11:03 am

    Nice tutorial, thanks for sharing.

  • InnothGah July 7th, 2011 at 12:02 am

    buy best registry cleaner suprisely

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 2:20 am

    Nice collections and mindblowing images…
    Picture is talking more than the caption on the title.

  • Web Designer February 23rd, 2012 at 5:24 am

    Awesome web design tutorial! Thanks.

  • Maria April 17th, 2012 at 2:13 pm

    Amazing tutorial! Great visual aid and user friendly to boot. Thanks for sharing.

  • Evisiospilatt December 1st, 2012 at 4:20 am

    More and more people prefer to play hockey for having a healthy body or just for fun No matter what your summer activities includeAuthentic Red Robert Griffin III Jersey
    customizing your own apparel and accessories is a fun way to make your summer more memorable
    Ryan Kerrigan Jersey
    Almost all hockey twigs tend to be created from real wood; nonethelessWomens Robert Griffin III Jersey
    additional products will also be usedFor those that are among the individuals that are wondering on how to buy wholesale football jerseys from ChinaSean Taylor Jersey
    then the information that is provided below is just for you
    John Riggins Womens Jersey
    You will be noticed and get accompanying with your admired aggregation as well IndeedWomens Pink Robert Griffin III Jersey
    it is an exciting opportunity
    Great Efforts You Pay In Coaching Football-1Behind the success of an exciting football gameWomens Sean Taylor Jersey
    there exist many efforts people paying such as the great work done by the professional players and coaches For you not to destroy the essence of the materialWomens Robert Griffin III Jersey
    1 of the most frequent guidelines in laundering this type of cloth is always to by no means hand-wash them; additionalAuthentic John Riggins Jersey
    in dryingWomens Pink Robert Griffin III Jersey
    always use a hanger to steer clear of it from wrinkling on the latterWomens Robert Griffin III Jersey
    shrinking to an undesired size and decolorizing from put on and tear
    Such a cocktail is usually dished up within a turned cup placed for a tiny eating plan HoweverPink John Riggins Jersey
    this experience will definitely not as good as the convenience of online shoppingJohn Riggins Limited Jersey
    because when you shop onlinePink John Riggins Jersey
    you do not handle long lines to get your projectAuthentic Robert Griffin III Jersey
    you do not waste money on bus fare or fuel to your local store

  • Ashraf December 11th, 2012 at 11:03 am

    Great tutorials. thanks

  • Clipping Path March 7th, 2013 at 12:22 am

    cool tutorial really nice one, great design

  • Nitai Roy March 27th, 2013 at 5:10 pm

    How it is helpful I can not say the way but It helps me a lot. Thats all I can say.

  • clipping path services May 13th, 2013 at 2:21 am

    Excellent, great layout tutorial. So nice tutorial. It is helpful for beginners. Thanks for sharing.

  • clipping path services May 13th, 2013 at 2:23 am

    Excellent, great and mind blowing layout tutorial. So nice tutorial. It is helpful for beginners. Thanks for sharing.

  • halloween party games August 12th, 2013 at 1:05 pm

    But the main attraction who came to the WWF was NWA Champion Dan Severn. With a highly acclaimed background in freestyle wrestling, MMA,

  • Meer Anis January 1st, 2014 at 5:49 am

    Absolutely a nice sharing for me. My most preferable CMS is wordpress.

  • Clipping Path March 13th, 2014 at 3:28 am

    Your blog is so beautiful and natural all are like your blog everyone appreciate your blog. Whenever We will see your blog every time we get something new about your blog This is the very informative content. I am very appreciate to your site who provide us this informative resource thank for sharing us this information.

Leave Your Response