Jan 18th

Light and Colorful Grunge Portfolio Layout in Photoshop

Matthew Heidenreich in Tutorials with 9 comments

In this tutorial you will learn how to create a light and colorful grungy portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Lets get Started

1. This first thing we want to do is create a new document with the dimensions of 1020×1045.

2. For our background, I used “Texture 1.jpg” from this texture pack. Go ahead move it around on the document in a way that you feel looks good.

3. Our logo is the first step. I created a text logo using the font Myriad Pro. Lay your text out in a similar way to the following.

4. I added these blending options to my logos layer to add a little bit of extra detail.

5. For our navigation in our header, we want to add some simple text links using Helvetica with the color #36393B. I then used the Distortion Icon Set for the icons next to each link. Place your links in a similar way as the following. Keep this icon pack handy, as we will be using it again in this template.

6. Time to move onto our featured area. Using your Rounded Rectangle with a radius of about 10px, make a rectangle similar to the following:

7. Set this layers Blend Mode to Multiply, and then insert the following blending options onto its layer:

8. To make the area behind our soon to be thumbnail more dynamic, I used these Starburst brushes. With your foreground set to #FFFFFF, brush in a similar way to the following, and then lower your layers opacity to about 20%. We want to mask out the excess “burst” that comes out of our featured area, so CTRL+CLICK your Rounded Rectangle Layer to select it, and then choose the Add Layer Mask Icon in your layers pallet on your Start burst layer.

9. Take a screenshot of your favorite design and then place it on the document in a similar way to the following:

10. Insert the following blending options onto your thumbnails layer:

11. Using your Rounded Rectangle Tool with a Radius of 10px, go ahead and make some Rectangles similar to the following and lower their opacity to about 70%. Then place some text describing the image, with a title on one, and then the link on the other like I have below. The icon used is from the Distortion Icon pack used before, but is desaturated in this instance.

12. Now it’s time to make our arrows for our slider box for the thumbnails on the right side of our featured area. Using your Elliptical Marquee Tool, make a circle similar to the following and fill it with #FFFFFF

13. Insert the following blending options onto its layer

14. Next we want to make our arrow. Using your Rounded Rectangle Tool with a radius of about 3px, make a small rectangle. Angle it how you want your arrow, and then copy your Rounded Rectangles layer and then flip it horizontally (Edit>Transform>Flip Horizontally). Merge these two layers together, and you’ll want something that looks like this

15. Repeat those steps to create a down arrow, and then add some thumbnails with the same thumbnail settings as your large one, and you’ll have something that looks like this for your featured box.

16. Almost finished! Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.

17. Lower this layers opacity to around 40%, and then we want to duplicate it. On the duplicated layer, make suer your opacity is 100%, and then change the Blend Mode to Soft Light. After adding some “inspiring” text, you’ll have something that looks like this

18. Time for our content area. Using your Rectangle Marquee tool, make a square and fill it with #FFFFFF. Then using your Polygonal Lasso Tool, we want to make some angles to make it as if the box is cut. Make a selection and then go to Edit>Clear. Add a title for your content area, and then use an icon from your Distortion Icon Pack from before and you’ll have something that looks like this

19. Lower the opacity of your content box to around 69%, and then add some text. For the headings, I used the color #B1493E.

20. All that is left now is to repeat the process for the right side of your content area, and to add some Social Media Icons. For the footer I used the same steps as you followed for the quote box back in step 16. Your final result will look something like this:

We offer expert testking JN0-541 tutorials and testking PMI-002 study guide for designers and developers. Sign up for professional testking RH202 web designing course to become expert.

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts9 Comments

Saad January 19th, 2010 at 8:17 pm

Hey Mathew – awesome design

Reply
T.V. January 20th, 2010 at 3:42 am

Really Nice Result!!!!! Truely like it!;D

Reply
Avangelist January 20th, 2010 at 11:30 am

Do you find getting such large background images to tile easy?

Textures are great to use, but to be able to get them to effectively work across screen sizes is quite a challenge.

Reply
- Matthew Heidenreich January 20th, 2010 at 11:59 am
  
  You make a great point. What i usually will do is go through with the clone stamp and get rid of some of the more ‘unique’ sections to make it flow better when it’s titled if i’m going to code the design.
meltean May 20th, 2010 at 2:33 pm

Awsome tutorial and outcome. Keep it up!

Reply
Texture plus May 30th, 2010 at 1:11 am

Thanks for this great tutorial!

Reply
darren August 9th, 2010 at 3:41 pm

hi
great look, do you know of any galleries which function in a banner manner at the top, the section which would flick through your portfolio designs.

thanks

Reply
Mark Petherbridge September 27th, 2010 at 4:47 am

Cheers for this, very nice

@mgpwr

Reply
South Realty April 4th, 2011 at 1:47 am

Excellent commentary. Last week I was tipped off about this site and wanted to let you know that I have been gratified, going through your site. I shall be signing up to your blog?s feed and will wait for your next post.

Reply