A portfolio for web designers is their web identity. It reflects their personality and style most of the time. There are many ways to create a portfolio. In this post you will find a detailed method on how create a grunge style mock up on Photoshop .

First, Lets see what we are creating.

Here are things you will need download:

1. Curly Brush
2. Torn Edges
3. Paper Texture
4. Background Texture
5. Social Icons

1. Start with blank 960 PSD. Change the canvas size to 1440 x 1220. The reason we are changing it so we can use a big texture for background.

2. Create a new layer called bgfill and Fill it with “#aa926a”

3. Open the texture. Copy and and place the texture like this

4. Create a new layer called gradient. Select the gradient tool and use the Linear Gradient from “Foreground to Transparent”. Darg from the top to bottom holding SHIFT in you Keyboard.

5. Which should give you the following result

6. Now we also need have texture to fill color for the side. The reason behind doing this if user in on a big screen (1600+resoulation) the website won’t look weird, it will blend with the background. Use the Rectangular Marquee Tool select the a narrow area on the right side and fill with with gradient.

7. This should give you following result .

8. Now we are going to put the paper texture in the middle of the page. Remember to keep some head room. Here how it looks with the the rulers. Use the grid to align the the page.

9. We need add some drop shadow for reaistic feel of the page. Here are the settings

10. Here how the outcome should look like

11. After the page is done we are going to add a divider with the downloaded brush.

12. We need to add something in the head area so it does not look empty. We are going to use floral brush.

14. We are going to use blending properties abd go to Pattery Overlay. The pattern is called Grayscale patterns. If it is not loaded, load it using the arrow next to the patterns. Here are the settings.

15. You should have something like this

16. Using Rectangular Marquee Create 4 menu items with four different random colors. Keep the menu layer behind paper layer. In case you are wondering the font Georgia, Italic.

17. We need add the content for the slider.

18. Create two arrows using the photoshop shapes. Using any grunge bursh erase the shape a little so it looks washed out.

And the apply the Bevel and Emboss setting.

19. We are going to add two more content dividers . Use the same set of brush like top and erase if anything goes beyond the page.

20. Now just add the icons and text. Keep the icons opacity to 50%.

The text font is Skecth Rockwell are letterpressed. Here is the setting.

21. Add necessary text on the side and copyright information and You should have the final page.

In case, some one wonders here is how a single page with text and content would look like.

Download Grunge Portfolio PSD