Home Photoshop Web Layout Learn how to create a Grunge Portfolio Layout

Learn how to create a Grunge Portfolio Layout

Added: Jun 29, 2011 Level: Beginner Software: Photoshop

Final result:-

Step 1:-

First open your Photoshop and create a new file. Click on, File - New. Keep the width 1000px and height 1000px as well.

Step 2:-

Now open the "Wood Texture Set" mentioned above. And choose the one with darker shade. And paste it to our background.

Step 3:-

Then create a new layer, for that click on Layer - New - Layer. And fill it with # 000f13.

Now reduce the opacity to 65%.

Step 4:-

Now select "Rectangle Tool" and create a small rectangle on the upper left corner.

Step 5:-

Then click on Layer - Layer style - Gradient Overlay. And add some orange gradient to our rectangle.

Step 6:-

Once again select the "Rectangle Tool" And create a very small rectangle. Fill it with # 000f13. Then click on Edit - Free Transform. And make it slightly tilted.

Now click on layer - Layer Style - Stroke. Keep the setting save as below.

Click on "Bevel and Emboss".

Now add "Drop shadow" With blending mode changed to "Multiply".

Lastly, add some "Outer glow" with color # 727272.

Step 7:-

Now select "Line Tool" and create 2 small lines with color # adadad.

Then add some outer glow with color # c96002.

Now you need to create a new layer and then select "Hard Round brush" with 7 px size and color # 000000. Use it on the lower ends of our lines. Then add outer glow to these with color # ffffbe.

Step 8:-

Now add text to our button. Click on "Text Tool" and Add page name with color # ff8d27 and # 48b2cc.

Step 9:-

Now we need to repeat the same process and create some more buttons.

Step 10:-

Now click on "Rectangle Tool" and create a rectangle and fill it with # 000000, then create another rectangle in the middle and fill it with # 161d1f. Then reduce the opacity of the middle on to 60%. Now use the grunge set mentioned above on the edges.

Step 11:-

Now add the feature image and then click on Layer - Layer Style - Stroke. And add stroke with color # 515151.

Step 12:-

Select the "Text Tool" and add feature text using # d88437 for heading and # d9d9d8 for details.

Step 13:-

Now select the "Pen Tool" and create a small arrow, then fill it with # f89725. Now click on "Hard round Brush" and create rough arrows on the sides with color # 525353. Then reduce the opacity of these to 75%.

Step 14:-

Now select the "Rectangle Tool" and create a big rectangle and fill it with # f8951f, then reduce the opacity to 15%.

Step 15:-

Now click on "Rounded Rectangle Tool" and create a small rectangle with color # 3d3e3e. Then reduce the opacity to 75%.

Step 16:-

Simply, repeat the same process and create two more boxes.

Step 17:-

Once again select the "Rounded Rectangle Tool" And create a small rectangle. Now erase the edges roughly to give it a torn look. Then click on Layer - Layer style - Gradient Overlay.

Now Add "Stroke" and make sure you change the "Fill type" to "Gradient".

Step 18:-

Repeat the same method to create three of these, one on each of our box.

Step 19:-

Now add text using "Text Tool", headings with color # 70d4f3 and detail text with color # 00b1dc.

Step 20:-

Now add the arrows by duplicating the arrow layer. Simply right click on the layer and select "Duplicate layer".

Step 21:-

Now add some Grunge texture at the bottom.

Step 22:-

Once again select the Text using "Text Tool" with colors # d68337 and # e2e2e2. Now let's create some bullets for that use "Hard round Brush" with 20px size and color # 686868. Now reduce the size and change the color to # f78b1e and use it in the middle.