Learn How To Design Splendid Dark Grunge Portfolio

Final Image Preview

Stocks Used:

• Main image
• Grunge texture
• Grunge brush set

Step 1 – Creating a new file

Open Photoshop and make a fresh file and for this click on file > new. Name the document grunge style portfolio, 1000px width and 1000px height. Keep the background “Transparent” and then click Ok.

Step 2 – Background

Layer > New > Layer. Now, we’ll utilize the black grunge texture from the texture set mentioned above.

I think it should be darker. So, let’s create a fresh layer and select our“Paint Bucket Tool”. Make sure our foreground color is #000000 and fill the new layer. Then reduce the opacity to 75%.

Step 3 – Designing the strips

Now select the “Rectangle Tool” and create a little rectangle on the top. And fill it with #404040.

Now, I think we should add some gradient to our small rectangle, for this click on Layer > Layer Style > Gradient Overlay. We’ll select the gradient with many color stops.

Then we’ll add pattern. For this click on Layer > Layer style > Pattern overlay, with 1% scale and keep the opacity 35%.

Now let’s add some satin to it as well, for this click on Layer > Layer Style > Satin. And add satin with #de6003, with distance 10% and size 10%.

Step 3 – Designing the strips

Now, we’ll simply duplicate the strip layer. For this right click on the layer and select Duplicate layer. Or you can get the same result by pressingctrl/CMD + j. Create two duplicate layers.

Step 5 – Page menu

We’ll now start with our menu bar. So for this select “Rectangle Tool”and create a small rectangle. Then fill it with #faf6c6.

Now, click on Edit > Free transform, then click on the “switch between the free transform and warp mode”.

Now drag the handles to pull the rectangle to the left side.

Step 6 – Add the Grunge

Now, we’ll use the grunge brushes we have mentioned above. Now click on the Eraser Tool and select one grunge brush. Now use this on the edges of our rectangle to get that grungy look.

Step 7 – Add Pages

For this select the Text Tool and add the pages. With color #7b2e00 for home and #737266 for the rest of the pages.

Step 8 – Create the Feature Box

Now select the “Rectangle Tool” and create a rectangle in the middle. Fill it with #000000. Then reduce the opacity to 75%.

Step 9 – background of the feature box

Now create another rectangle and this time fill it with #141414.

Step 10 – Add Grunge

Once again click on the Eraser Tool and select a Grunge brush. Use to on the edges of our rectangle.

Step 11 – Add the feature image

Now add the image in the middle. Then add some outer glow to the image, for this click on Layer > Layer Style > Outer Glow. Make sure your outer glow is #311b11.

Step 12 – Add Feature Text

Now once again we’ll select our Rectangle Tool and create a small rectangle with #3e3e3e. Then reduce the Opacity to 60%. Now let’s add some text. For this click on Text Tool and add text. The color of the headingshould be #faf6c6 and rest of the text should be #000000.

Step 13 – Info boxes

We’ll create a small rectangle box. Click on Rectangle Tool and create a rectangle. Fill it with #4c4b4b. Then reduce the Opacity to 60%.

Now again click on the Eraser Tool and select the grunge brush and use it on the edges of the rectangle.

Now create another small rectangle and fill it with #671101 and then reduce the Opacity to 50%.

Now repeat the same process and create three boxes. Then add text usingText Tool. Make sure heading color is#faf6c6 and rest of the text is#000000.

For the buttons click onEllipse Tool and create a small circle. Fill it with#000000. Then create a small arrow using pen tool and fill it with #6c2b0b. Then simply repeat the process to get three buttons.

Step 14 – Footer details

Now again select theRectangle Tool and create a rectangle. Fill it with#682808 . Then reduce theopacity to 40%. And use the grunge brush on the edges.

Now select the Text Tool and add text. Now we’ll create the bullets usingHard round brush. Using colors#682808, #000000 and #ffffff.

Now repeat the same process to add move text. Then add the social iconson the left side.

Now add the copyright text using on the left and navigation options on the right using ourText Tool. Then select theLine Tool and create small lines between the navigation options. Keeping the color #682808.

Step 15 – Finishing Touches

Now let’s add some finishing touches. First we’ll add our logo on the upper right corner. And I’ll add a patch on our main menu. For this click onRectangle Tool and create a small rectangle. Fill it with #faf6c6. Then use the grunge brush on the edges and lastly, reduce the opacity to 70%.

And now we are through. I hope you guys enjoyed the tutorial and learned something new and interesting. Do try this out and share your results. I’ll be creating more interesting layout tutorials in the future so stay tune. You can also download the original PSD of this tutorial. Now let’s have a look at ourfinal result:

Final Result: Dark Grunge Portfolio