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.
Here are things you will need download:
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
waaaw nice really i ilove it :P nice design keep it up
nice grunge tutorial, thanks for sharing with us.
Nice tutorial, will be helpful to a lot of people. For anyone serious about photoshop check this out (USA only) http://bit.ly/psoffer
Wow, the skills are really impressive. Thanks for the cool tut.
web design agency´s last blog : Google Caffeine and the New Ranking Factors
Thanks! Great tutorial. Now how do I learn to bring this into Dreamweaver?
great tutorials, thanks for share to us.
Great tutorial !
Really useful. Thank you. :)
Very good tutorial. Thanks!
@surreal: Sure, It is going to be a CSS and HTML page. Sure! contact if any questions.
@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.
@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
looks very nice, I like this theme. thanks for the tut..
joyologo design shop 2.0’s last blog post..wordpress cms iCompany themes
Great tutorial.
I just followed a link from BuySellAds twitter account :)
CMS Themes’s last blog post..Summernight
Nice tutorial, thanks for sharing your process.
Brad C’s last blog post..The Brads – Double Margin
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?
This is what you call stunning? Sorry but it isn’t all that… Good tutorial tho.
This is interesting techniques. Thanks for sharing the step by step procedure.
wow..cool.brushes is good.