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.
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:
- Create a Chalkboard Style Wordpress Layout in Photoshop
- Twitter Box User Interface Design in Photoshop
- Where to Find the Perfect Logo Inspiration
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Create a Theme Store Website Layout in Photoshop
- Beautiful Music Streaming Website Design in Photoshop
Leave Your Response