Learn How To Design Splendid Dark Grunge Portfolio
Hi guys, in this tutorial, I’m going to show you to create a dark grunge style portfolio. We will be using a few simple techniques to get the desired effect. We will go through the process how with just few stocks create very professional designing layout. Of course our main stock will be grunge texture that will add grungy effect to template. As a result, we will get layered Psd file that can be easy coded to WordPress theme and lets you run your own unique portfolio blog. However, prior to the start, let’s see what we require for this layout.
You May Be Interested In The Following Posts
Final Image Preview
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 pressing ctrl/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 heading should 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 using Text 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 using Hard round brush. Using colors#682808, #000000 and #ffffff.
Now repeat the same process to add move text. Then add the social icons on 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 our final result:
Final Result: Dark Grunge Portfolio
Download Psd file