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

If you enjoyed this post, get free updates by email or RSS.

Posted Under: Freebies, Tutorial

Tagged:

  • Bookmark on Delicous
  • Share on Reddit
  • Share on Technorati
  • Share on Facebook
  • Share on Stumble Upon
  • Share on Stumble Upon

50 Responses to “How to Create a Stunning Grunge Portfolio”

  1. Ryan says:

    Nice tutorial, will be helpful to a lot of people. For anyone serious about photoshop check this out (USA only) http://bit.ly/psoffer

  2. Wow, the skills are really impressive. Thanks for the cool tut.
    web design agency´s last blog : Google Caffeine and the New Ranking Factors

  3. Deborah says:

    Thanks! Great tutorial. Now how do I learn to bring this into Dreamweaver?

  4. kerja keras says:

    great tutorials, thanks for share to us.

  5. Great tutorial !
    Really useful. Thank you. :)

  6. Roberto says:

    Very good tutorial. Thanks!

  7. Kawsar Ali says:

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

  8. surreal says:

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

  9. Kawsar Ali says:

    @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

  10. looks very nice, I like this theme. thanks for the tut..

    joyologo design shop 2.0’s last blog post..wordpress cms iCompany themes

  11. CMS Themes says:

    Great tutorial.
    I just followed a link from BuySellAds twitter account :)

    CMS Themes’s last blog post..Summernight

  12. Brad C says:

    Nice tutorial, thanks for sharing your process.

    Brad C’s last blog post..The Brads – Double Margin

  13. surreal says:

    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?

  14. wink says:

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

  15. This is interesting techniques. Thanks for sharing the step by step procedure.

  16. Kimcool says:

    wow..cool.brushes is good.

Trackbacks/Pingbacks

  1. 30 adet photoshop webtasarım alıştırması | Photoshop
  2. 30+ Photoshop Tutorials Creating Web Designs Layouts « VECTOR Tutorial
  3. Photoshop Tutorials For Creating Impressive Web Layouts | Cosmos Blog
  4. 30+ Easy To Follow Photoshop Layout Design Tutorials | Cosmos Blog
  5. 40 free Photoshop Weblayout Tutorials Downloads | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
  6. 60 Exclusive Photoshop Tutorials to make you a master of Website Layout Design | Joshua Krull
  7. Geek Sucks » Blog Archive » 60 Exclusive Photoshop Tutorials to make you a master of Website Layout Design
  8. pixey.de » 40+ free Photoshop Weblayout Tutorials+Downloads » Layout, Photoshop, PSD, template, Tutorial, Web, Web 2.0, Webdesign
  9. More Than 30 Photoshop Template Tutorials (Easy Design Tutorials) | Best of Blogger
  10. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | X Design Blog
  11. Stilul grunge în web design | connectpixels | blog
  12. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites « Web And Graphics Design Tutorials
  13. 飞鱼的声纳 » Blog Archive » 30个简单易学的Photoshop网页布局设计教程 - 关注时间管理、wordpress主题设计、文章写作和资料整理
  14. Махало Медия (Интернет решения) - уеб сайт ди
  15. 30个Photoshop布局设计教程 « SonicHtml工作室- PSD转HTML / XHTML,CSS / W3C验证 / 多浏览器支持 / WordPress模板 / Joomla模板
  16. 30+ Easy To Follow Photoshop Layout Design Tutorials
  17. 50+ Best Photoshop Web Design Tutorials | Make Money Group
  18. 50+ Best Photoshop Web Design Tutorials | Themeflash
  19. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Blog
  20. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | KolayOnline
  21. Daily Digest for June 4th | The Real Mike Wong
  22. The Good, The Bad and The Ugly
  23. 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May | Programming Blog
  24. 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May | Programming Blog
  25. 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May @ SmashingApps
  26. Create a Stunning Grunge Portfolio | Design Shack
  27. The Design O'Blog
  28. Twitted by birdsall
  29. Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
  30. How to Create a Stunning Grunge Portfolio | Design Newz
  31. Graphic Design Links and Tutorials
  32. You are now listed on FAQPAL
  33. vot.eti.me
  34. zabox.net

Leave a Reply

Premium webmaster graphics - Brushes, Vectors, Icons, PSD layouts
Hosted By
SecureSignup.net