May 5th

Create a Textured Paper Photoblog Layout in Photoshop

Create a Textured Paper Photoblog Layout in Photoshop

In this tutorial you will learn how to create a textured paper photo blog 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

Tutorial Resources

Lets Get Started

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

2. If your background layer isn’t already white, go ahead and use your Paint Bucket Tool to fill it with #FFFFFF. Chances are most of you can skip this step.

3. Next we want to make the grid paper texture on our background. To achieve this effect, we want to make a pattern. In order to do this we need to create a new document that is 31×31.

4. Create a new blank layer and use your Single Column Marquee Tool to make a selection similar to the following and fill it with #D4EAF7. Delete your white background layer, and you’ll have something that looks like this:

5. Duplicate your layer and then rotate it so you have a “cross-hair” design on your document:

6. Now use your Rectangle Marquee Tool to make a selection of your entire document. Then navigate to Edit>Define Pattern. In the dialogue box that appears name it grid and then return to your template document.

7. Create a new layer above your background layer and name it “Grid”. Next go to your Tools Palette an find your Pattern Stamp Tool (S). Using a large brush go to your Pattern Picker and find your Grid Pattern. Then proceed to brush the entire document with it. You’ll have something that looks similar to the following:

8. We want to add a little more detail to our grid, so to do so we will add a slight drop shadow using our blending options. Right click your Grid Layer and choose blending options from the drop down menu.

9. For our header we want to start off by using our Rectangle Marquee Tool (M) to create a shape similar to the following with a fill of #232323.

10. Next select your layer and hit Command+G on your keyboard to place it in a new group. Name this group header. We then want to add a layer mask to our group by choosing the layer mask icon from the layers palette.

11. Locate your Brush Tool (B) and select one of the default splatter brushes (14px, or 24px) from the brush palette. Then go to your Brush settings and insert the following:

12. Select your Mask from your grouping and proceed to paint with black along the bottom of your headers background to give it a similar effect to the following:

13. On your mask layer again, go ahead and make a selection similar to the following and fill it with #000000. We need to do this so in our next step our paper texture gets masked.

14. Grab your paper texture from the resource list above, and place it on your document above your black header background layer. The texture we are using isn’t wide enough, so we want to duplicate our layer (Command+J) to fill the extra space. Don’t worry if there is a seem, we won’t be seeing that soon!

15. Select both of your paper textures layers and merge them together. All that is left is to change the blend mode to Multiply and you’ll have something that looks like this:

16. For our logo I used the font Sketch Rockwell (listed above). The first color is #FFFFFF, and the second blue color is #7EC5EE. For our navigation I used Helvetica with white text. Then added a simple #4C8FB6 colored Rounded Rectangle with a radius of 10px. That is it for our header, what do you think?

17. Next we are going to move onto our featured photo area. To keep things organized lets go ahead and make a new grouping (Command+G) without anything in it and name it “Featured”.

18. Similar to how we created our header in Step 9, we will use our Rectangle Marquee Tool (M) similar to the following and fill it with #232323.

19. Create a mask on your Rectangles layer by choosing the Mask Icon in the layers palette. Using the same method we used to fray the edge of our header in Steps 11 and 12, achieve a similar look to the following:

20. On a new layer, use your Rectangle Marquee (M) to create something similar to the following and fill it with #FFFFFF. This will serve as a border for your image.

21. To provide users with an option to flip through featured images, we need arrows. Using your Elliptical Marquee (M) make a circle similar in size to the following and fill it with #232323.

22. For our arrow we want to use our Rectangle Marquee Tool (M) to create a small #FFFFFF box. Then select the top right corner of the box and delete it. You’ll be left with something that looks like this:

23. All that is left is to rotate it and resize it to how you see fit. I did the same for the right side, and then added an image and my featured box looks something like the following:

24. For the content area we will be doing almost the exact same thing we did for the featured area. You should be able to get to this point from following Step 18.

25. The difference here is that we need to add a place for an image title. To do this we want to use our Rectangle Marquee Tool (M) again and create something that looks like the following with a fill of #232323.

26. Lower your layers opacity to about 81%, and then proceed to add the following blending options onto your layer:

27. Add some white text for a title and your content area will look something like this after repeating the process a few times.

28. The footer is exactly the same as the header, except flipped. Drag your Header Folder (or grouping) onto the new layer icon in the layers palette to duplicate your group. With your copied grouping selected, go to Edit>Transform>Flip Vertical. Then move it down to the bottom of your document.

29. Delete all the layers in the footer except for your background and your texture layer. You’ll be left with something similar to this:

30. All that is left is to add our logo to the footer, and then add our navigational items. I used the color #7FBBDD for my links this time, and then #FFFFFF for the copyright text. When it’s all said and done your template will look something like this:

Sign up for professional testking 642-359 training to learn web designing basics and get thousands of testking 642-983 photoshop tutorials and testking HP2-T16 design resources for practice.

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

  • viktor May 6th, 2010 at 3:37 pm

    awesome man, just awesome

  • melek May 8th, 2010 at 4:44 am

    great, thanks for tips;)

  • clippingimages May 14th, 2010 at 11:36 pm

    nice:) thanks for sharing……..

  • Tutorial Lounge May 19th, 2010 at 2:27 am

    amazing techniques you sharing in this beautiful tutorial.

  • Bruce May 22nd, 2010 at 1:55 am

    amazing techniques you sharing in this beautiful tutorial.

  • Amy June 5th, 2010 at 7:06 am

    amazing techniques you sharing in this beautiful tutorial.

  • Som June 5th, 2010 at 5:53 pm

    Nice tutorial indeed — Add more stuff like this –I think people will be very helpful if they get this type of tutorial –thnx

  • K├Ânig Ludwig June 11th, 2010 at 3:21 pm

    Very helpful tutorial man! I like it very much when you wrote some details for creating a website layout by using Photoshop.
    Also I’m a developer with focus on php, python, ruby and ajax apps, I used to create some layouts sometimes. And this tutorial gives me a lot of tips and so many details I need so much.

    Thank you very much and keep on writing please!
    I’m still waiting for your next tut using Adobe PS or FW!

  • Mariyana Dhaliwal June 14th, 2010 at 3:58 am

    Rarely useful tips. There are very few websites on the internet like yours. Congratulations and thanks for your time!

  • leylek423 July 13th, 2010 at 2:57 pm

    thanks a lot

  • bazinia July 31st, 2010 at 10:42 pm


  • WP Themes August 10th, 2010 at 10:34 am

    Nice brief and this post helped me alot in my college assignement. Say thank you you on your information.

  • gknqznfjia August 13th, 2010 at 3:20 am

    kJfhIK qqbgbrjlnhct, [url=]hmywhcyllcbt[/url], [link=]dsymemrltjwd[/link],

  • Atlanta Web Design Company November 3rd, 2010 at 2:35 am

    i really found this tutorial very good.

  • onur November 17th, 2010 at 9:51 am

    amazing techniques you sharing in this beautiful tutorial.thank…

  • J. Hendrix March 23rd, 2011 at 9:09 am

    Awesome.. thanks!

  • Terrance April 9th, 2011 at 5:23 pm

    A penny saved is a penny got [earned].

  • Clay Kraemer August 8th, 2011 at 10:20 am

    Fantastic goods from you, man. I have understand your stuff previous to and you are just too excellent. I really like what you’ve acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I cant wait to read much more from you. This is really a tremendous site.

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:42 am

    Thats really cool Tutorial thanks for sharing, get for noobies learning website design.

  • n December 5th, 2013 at 1:45 pm

    Hello I want to create a website but is not a photo portfolio I just want to use shape of top and bottom of your desing can I ?

Leave Your Response