How to Create a Stunning Grunge Portfolio

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.

preview_small

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.
blank

2. Create a new layer called bgfill and Fill it with “#aa926a”
fill
3. Open the texture. Copy and and place the texture like this
texture
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.
gradient
5. Which should give you the following result
gradient_2
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.
side_gradient
7. This should give you following result .
side_gradient_2
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.
paper_texture
9. We need add some drop shadow for reaistic feel of the page. Here are the settings
drop_shadow
10. Here how the outcome should look like
page
11. After the page is done we are going to add a divider with the downloaded brush.
content_slider
12. We need to add something in the head area so it does not look empty. We are going to use floral brush.
header_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.
header_brush_setting
15. You should have something like this
header_brush_2
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.
menu
17. We need add the content for the slider.
slider1
18. Create two arrows using the photoshop shapes. Using any grunge bursh erase the shape a little so it looks washed out.
arrow
And the apply the Bevel and Emboss setting.
arrow_settings
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.
bottom_line
20. Now just add the icons and text. Keep the icons opacity to 50%.
sidebar
The text font is Skecth Rockwell are letterpressed. Here is the setting.
letterpress
21. Add necessary text on the side and copyright information and You should have the final page.
preview_small
In case, some one wonders here is how a single page with text and content would look like.
whole_page


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • disqus_WgvavhtDyJ

    Does that floral brush have a name? I’d love to get that exact brush!

  • http://twitter.com/NolinBPO Nolin BPO

    Wow! Great tutorial and a great help. :) Thanks.

  • the best lol

    hey good job with this tutorial. y un saludo a todos los de la clase del tercer periodo de web design de la escuela, miami spring high school. kisses.

  • http://www.antoineguedes.com Antoine Guédès

    Great tutorial !
    Really useful. Thank you. :)

  • Kawsar Ali

    @surreal: Sure, It is going to be a CSS and HTML page. Sure! contact if any questions.

  • surreal

    @Kawsar Ali:

    Thank you for your answer, I’m looking forward to the tutorial. Gonna be a html/css or a wordpress theme?

    And of course, I’ll make sure I contact you if I use it for any other purpose other then free. To be honest not really sure if I’m going to use it at all but better safe then sorry.

  • Kawsar Ali

    @surreal: Hi, I have another tutorial coming up, where I am making it into full function site. It will free for personal use. If for commercial contact me

  • surreal

    Wonderful template and a wonderful tutorial. Thank you.

    I do have a small question to ask…the files in the PSD as well as the layout itself, what are the restrictions when it comes to personal and commercial use?

    For example, turning this layout into a full functioning site and then making a profit out of it?

  • http://www.winkieflash.nl wink

    This is what you call stunning? Sorry but it isn’t all that… Good tutorial tho.