Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

How to Create a Stunning Grunge Portfolio

Posted May 25, 2009 & filed under Freebies, Tutorial

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
Download Grunge Portfolio PSD

More about Kawsar Ali

About the author

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

Related posts:
  • Get Website/Portfolio Featured Contest
  • Digg the Design: Portfolio that says “Look at me”
  • How to Create 3 Types of Patterns Using Pixelmator
  • How to Create a Simple, Dark Yet Stylish Portfolio Design
  • 10 Image Free Sexy CSS Menu and How to Create One

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech