How to Create a Grunge Portfolio Layout – Tutorial



Join us right now!

Our Members get unlimited access to download everything




How to Create a Grunge Portfolio Layout – Tutorial

Sometimes you will need a simple website where you can showcase your portfolio. This is the most important thing when you work as a designer. In this tutorial i will show you a very simple way to create your own grunge portfolio layout. If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page.

To begin, I recommend you to create a new document with the following size: 1100 x 1200 pixels. For background i have used the following color #b7b7b7. The simple way to add a background to your empty document is to use Paint Bucket Tool. Set your foreground color to #b7b7b7, and then with Paint Bucket Tool selected click on time on your document.

Make sure you have this layer selected, and then go to Filter > Noise > Add Noise. Use the following settings or something similar.

Your empty document will now look like a gritty background.

Create a new layer, and then with Brush Tool create a white spot in the middle of your portfolio layout.

Change the opacity to 20 %, and the Blending mode to Overlay.

Now we will add a navigation menu. For more great navigation menus please visit : PSD Navigation Menus

Select Rectangle Tool, and draw a shape similar with mine. Using one gradient from 27.000 Photoshop Gradients you can add a very nice color combination to this navigation bar.

Next step is to use Pen Tool, to create a shape like in the following image. Our navigation menu will look like a scarf.

With Horizontal type tool i will add some “minus ” signs like in the following image.

Then i will add some text menus.

On the right side of the navigation i will create a search box.

I have used the following layer styles.

I will add a simple button with a magnifier glass icon, and the navigation menu is complete.

Under the navigation bar i will add some text, and under the text i will add a dark shape with Ellipse Tool. This dark shape will be used to create a simple shadow.

Make sure you have the layer with the dark shape selected, and then go to Filter > Blur > Gaussian Blur. Add a blur value around 20-30.

With Rectangle Tool i will add some shapes. here you can add some random photos with your own designs.

This is the layer style i have used for my previous shape.

I will add some text, shapes and lines like in the following image.

As you can see i have created another shapes and place them like in the following image. Please click on the following image to see better my result.

Under your portfolio items i will create 4 shapes with Rounded Rectangle Tool. I will create a page navigation area.

With horizontal type tool i will add some numbers in each box.

Under the portfolio area i will create two lines with Line Tool. make sure you hold the Shift key when you draw the lines. This time make sure you set the line width to 1 px.

Change the Line tool width to 6 pixels and draw a similar line. For this line add the following layer styles

I have used a simple pixel pattern. If you don’t like this result, you have another 815 Photoshop Pixel Patterns to choose from.

This is my result so far.

I will fill also the footer with some text on the left side, and with a simple contact form on the right side.

This is my final result. I hope you will fill all the empty spots from bellow with the best portfolio items.

To download this PSD layered Layout you need to be a member.

More Resources in Tutorials

How does Ultimate Designer Toolkit work?
Next »