--
Published on Mon, Apr-11-2011 by Websoulz

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

Dark Grunge Portfolio

Stocks Used:

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.

Dark Grunge Portfolio

Step 2 – Background

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

Step 3 – Designing the strips

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

Step 9 – background of the feature box

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

Dark Grunge Portfolio

Step 10 – Add Grunge

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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.

Dark Grunge Portfolio

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

Dark Grunge Portfolio

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

Dark Grunge Portfolio

Download Psd file

Advertisement


11 Responses

  • savvinovan say:

    great tutorial! thanks

    1
  • website design ohio say:

    Very cool and hip look, really enjoyed this tutorial.
    Now I will have to try the technique.
    Thanks so much!

    2
  • clipping path say:

    You’ve done gr8 job! excellent blog! I always love to read your post..

    Thanks for sharing.

    3
  • Striker say:

    Nice result, very useful tut.Nice result, very useful tut.

    4

Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.



     Technology news | Wordpress templates | ThemeLabs | Review themes

Recommended Links



Wordpress review theme