Create a Wooden Grunge Portfolio Web Layout in Photoshop

Mar 20 2010 by Matthew Heidenreich | 23 Comments

Create a Wooden Grunge Portfolio Web Layout in Photoshop

In this beginner-level web design tutorial, I’ll show you how to construct a portfolio web layout that has a fixed wooden background with Photoshop. We’ll also use some brushes to accent the design.

Preview

You can see the final result below. Click on the image to see it in full scale.

Preview

Resources

Set Up the Photoshop Canvas

1 The first thing we want to do is create a new document with the dimensions of 1024px x 912px.

Set Up the Photoshop Canvas

Add the Background

2 For our background, we want to add a wooden texture.  I used this wooden grain texture from Texture Lovers for the purpose of this tutorial.  Resize the texture using Free Transform (Ctrl/Cmd + T) to fit the texture on our canvas.

Add the Background

Create the Header

3 Starting with our header on a new layer, we want to use our Rectangle Marquee Tool (M) to make a rectangle selection, filling it with black (#000000).

Create the Header

4 Using the Polygonal Lasso Tool (L), make a jagged and organic selection at the bottom of the header background to create a ridged edge.  Once you have made your selection, go to Edit > Clear.

Create the Header

5 Go ahead and lower the Opacity of that layer to 85% to let the wooden background show through a bit.

Create the Site Name/Logo

6 For our site name/logo, we can just go with a simple text logo.  I used the font Myriad Pro with the color #FFFFFF for the first half of the site name and the tagline, and a washed out green color for the second half of the site name (#93B19D). Position the site name at the top left corner of your canvas with the Move Tool (V).

Create the Site Name/Logo

Add Links to the Header

7 We are then going to add some links to the right side of our header using the Horizontal Type Tool (T). The "Home" link has a color of #D9D5BB, and the rest of the navigation links are a slightly different color (#DDCFAB).  Lay them out in a similar fashion to the following:

Add Links to the Header

Create the Active Navigation Link

8 Our "Home" link will serve as our mockup for the active link that indicates the current page the website user is on. We want to add an active effect to it, and for this tutorial, we are going to add a little brush stroke behind it.  To do that, we need to download the FlightOfGrey Stroke Brush Set brush set from deviantART and install it. Of course, feel free to use your own brushes or make your own brush. If you use the FlightOfGrey Stroke Brush Set, locate the brush tip that looks similar to the one below (only a few to chose from) and resize it to your liking.  I created a layer beneath the navigation links text layer and then used the Brush Tool (B) with a bluish color of #355D63 to create the active link (shown below).

Create the Active Navigation Link

Make the Intro Box Section

9 The intro box is the next step.  We want to use our Brush Tool (B) with the second brush in the FlightOfGrey Brush Set with the Master Diameter option set to something manageable for the background of our intro heading (about 300px). Make sure your foreground color is set to black (#000000).  You can trim off excess splatter that you don’t want by using the Lasso Tool (L) and going to Edit > Clear. It should look something like this:

Make the Intro Box Section

10 Now add a Color Overlay as a layer style on the intro box layer:

Make the Intro Box Section

11 Use a font like Helvetica to add your "Introduction" text using the Horizontal Type Tool (T) using an off-white color like #F1E6D8. You should come out with this:

Make the Intro Box Section

12 Time to use our Brush Tool (B) again.  Use the third brush in the FlightOfGrey Brush Set, making sure that your foreground color is set to #000000 and the brush’s Master Diameter option set to about 400px. On its own layer, create a brush stroke in the following manner for the introduction copy text:

Create the Featured Design Section

13 It’s a little lighter than we would like it to be, so duplicate your layer a couple times (Ctrl/Cmd + J) to darken it. Put in some mock-up text (I used some Lorem Ipsum for the purpose of this tutorial).

Create the Featured Design Section

Create the Featured Design Section

14 To the right side of our intro box will be a nice little spot for a featured design. I created a thumbnail image with a size around 420px x 165px and then added an Outer Glow and Stroke layer style to the thumbnail; you can use the following settings for the layer styles:

Create the Featured Design Section

Create the Featured Design Section

Add Social Media Icons

15 Next, it’s time to add our social media icons.  Using the same brush we used for the back of our introduction title. We want to add a black brush stroke similar to the following, using a bit larger brush than previously.

Add Social Media Icons

16 The next step is to add the Old Bottle Crowns Icon Set icons created by Jan Cavan from the Freebies section here on Six Revisions. You’ll end up with something like the following:

Add Social Media Icons

Make the Latest Projects Section

17 Next, make an area for your latest projects below the intro box section. Using your Rectangle Marquee Tool (M), make a rectangle similar to the following, and fill it with #000000. Lower its layer Opacity value to 85%.

Make the Latest Projects Section

18 Add an Outer Glow layer style to the layer:

Make the Latest Projects Section

19 Go ahead and arrange the contents of the box in a manner similar to the following image. Use a 220px by 160px thumbnail of your latest project. For the heading, the color is #C3E2E0, and the description text is white (#FFFFFF).

Make the Latest Projects Section

20 The thumbnail is a little dull and boring, so lets add an Inner Glow layer style and a Stroke layer style (use the settings shown below) to our latest project thumbnail’s layer to give it a nice border and a bit of an inner shadow.

Make the Latest Projects Section

Make the Latest Projects Section

21 Go ahead and make two more boxes by duplicating the layers of the first latest project box and then moving the duplicated layers to its right using the Move Tool (M). Here’s how mine ended up:

Make the Latest Projects Section

Finish Up with a Simple Footer

22 The last step is to add a copyright notice that serves as our simple text-based footer.  To make your text a little more visible on that wooden background, you can use your Dodge Tool (O) to lighten up the area. Here’s the final layout with the simple footer:

Preview

Related Content

About the Author

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 get in contact with Matthew by following him on Twitter: @Spicypepper.

23 Comments

cameyz

March 20th, 2010

Nice. I don’t like wooden website looks but this doesn’t disturb me :)
Nice work man more like this ;)

BEBEN

March 20th, 2010

its a awesome…
thanks for trick

Bagus Rianto

March 20th, 2010

First!!
thanks for tutorial

Maxi

March 20th, 2010

WOW very nice tut .a good work

Marcell Purham

March 20th, 2010

Great tutorial! love the outcome

Imon

March 20th, 2010

Nice work matt!
this looks awesome!

stellacyan

March 21st, 2010

W-O-W.
I want the coding! Pretty please? :)

Good work!
Thanks,

Have a really happy day!

Tomas

March 21st, 2010

Great tutorial, I like the final result, thank you.

vietflex

March 21st, 2010

Nice work matt,
Thanks!

Matthew Heidenreich

March 21st, 2010

thanks for all the comments guys. Appreciate it!

Demir

March 22nd, 2010

this is really good work.

Montreal

March 22nd, 2010

Good step by step – Good to remember whenever a grunge background and site is needed!

Jordan Walker

March 22nd, 2010

Great tutorial on the inner workings of a wooden grunge website design.

bigjobsboard

March 22nd, 2010

Wow. This is really a great tutorial! tHANKS A LOT!

BD

March 24th, 2010

Can anybody help me out?

I’m a student that has been working with Photoshop for quite a while, but I have no idea what knowledge/tools I need to take a design concept like this and turn it into an actual website.

It would be really cool to see a step-by-step tutorial on what to do after the design file has been created.

But if you have any suggestions at all, please help. Do I need to know HTML, CSS, PHP, etc, etc???

hamid

March 25th, 2010

good job and useful

Chris

March 27th, 2010

Amazing!!!! Great design and tutorial. Thanks

Max Stanworth

March 28th, 2010

Thanks for mentioning texture lovers as a resource, great tutorial,

a sugestion maybe to scale the background texture down a little more so it resembles a life like size, the grain is too big in my eyes…neva the less good stuff.

yessi

April 4th, 2010

yes good idea your tranforms the mockup in html, css, or theme for wordpress tutorial, thx this for tutorial in photoshop

BTP

April 15th, 2010

Very clear tutorial sir.

Tess

June 30th, 2010

Really like the texture. Looks amazingly real. I love the end result :) Thanks for sharing your knowledge.

Sigit

August 12th, 2010

cool…
but where is the PSD file…??

Kenzie

April 27th, 2011

My only issue is that you say “make a jagged and organic edge selection” as part of developing the navigation header, when really you have put a pinked edge on there (and haven’t explained how to do it). You want the reader to make a jagged, unpolished edge where your edge is polished (and probably done via a fill or a modified dash on the edge). :\

Leave a Comment

Subscribe to the comments on this article.