Design a Grungy Web Layout (Part 1)
In this two-part Photoshop tutorial we’ll be designing a nice, simple grungy website design. For this tutorial I’m going to assume you have moderate knowledge of Photoshop, considering I don’t explain every single part in exact detail.
Click above image for full view.
Resources Used
Stock photos:
Patterns:
Brushes:
1. The Background
Start by creating a new document in Photoshop. We’ll be making our website design in this document. I used a size of 760 x 760 pixels.
Now fill the background with a light yellow-brown color. I used #d7ceaf. Next, create a new layer then fill the canvas with the 16×16 Scan Line.
Note: When you filled your canvas with the pattern, you’ll notice they came out black, so press ctrl+I to invert them. After filling your canvas with the scanlines, change the layer mode to Overlay and lower the opacity to around 40-50%.
Merge your two background layers together so you’ve only got one layer. Now apply Filter > Noise > Add Noise with the following settings:
Now, lastly for the background, grab the Background Texture and apply it over the background.
Change the layer mode for this layer to Overlay and lower the opacity to around 25-40%, depending on what looks best.
Looking alright now.
2. Header Design
Onto the header. Create a new layer then make a large selection near the top of the document (this is the selection for your header). Note that my selection was around 700 x 200 pixels in size. Fill the selection with solid white.
Click above image for full view.
Apply this Outer Glow to your banner layer. Select the main banner layer again (ctrl+click layer thumb) then contract the selection by about 4 pixels (Select > Modify > Contract).
On a new layer, fill this selection with a nice, vibrant Radial Gradient. The colors that I used for my gradient were #f5d57c and #a32c1e.
Go back to the white border layer of the banner. If you know about layer masks, add a layer mask to your border layer then add some grunge brushing with some of the brushes I’ve provided with this tutorial.
If you don’t know about layer masks, just get the eraser tool, select a grunge brush then erase some of the corners of the white banner.
Next, apply the following layer styles to the gradient banner layer:
Click above image for full view.
Get the Green Abstract Lights stock photo, drag it over the banner, resize it then crop it to the banner’s size.
With a large, soft eraser erase away some of the corners, then blend it in by changing the layer mode to either Overlay or Soft Light, then lower the opacity if you think it needs it.
With some of the grunge brushes I’ve given you to download, in the corners of the gradient banner do some grunge brushing. If the grunge brushing looks a bit dull you can change the layer mode to Soft Light or Overlay.
(left)
(right)
Get out the cool speaker stock photo and drag it onto the canvas. Resize it so it just fits over the headers border.
Use the Polygonal Lasso Tool to make a selection around the entire speaker then delete the outsides. You don’t have to keep the shadow, I edited mine later on anyway.
I added in a little bit of a different shadow with a brush, then I resized the speaker slightly.
Lastly for the header graphic I added in the text. I used the font Standard 07_53, sizes 24pt and 32pt, No Anti-Aliasing.
Lastly I applied the following layer styles to the text layer:
And at last, we’re finished for this step!
3. Navigation Buttons
Start by creating a group underneath the header group/layers, then make a new layer inside of the group. Now make a selection partially underneath the header for your first button. My selection was 36 x 60 pixels in size.
Fill this selection with a dark brownish gradient. My gradient colors were #6d5e39 and #51462a.
After drawing your gradient apply the following layer styles:
Now you’ve done all that, either add a layer mask and do some grunge brushing on the bottom of this button, or just use the eraser tool to erase away some of the bottom. This is how mine turned out:
Next thing to do is add in some text. First I added in the text ‘01′ in the middle of this button. Font details:
- Tahoma
- 12pt
- Bold
- Anti-Aliasing: None
- Color: #ffffff
Lower the fill opacity for this text layer to about 40-55%, then apply the following layer styles:
And now my text looks like this:
Now the button is finished, let’s add in the actual link text. First, add in some more text to the right of the button. I used all the same details as the last text except the color #ba5e38.
I applied the following layer styles to this text layer:
And your text should look like this:
Duplicate all the button layers, move them along to the right, edit the text, repeat.
We’re finished for this part of the tutorial. Thanks for reading, I hope you enjoyed it! For learning purposes only you can download the PSD file from here.
You must be logged in to post a comment.
17 responses
Nice quality, love this.
How is it you apply these scan lines?
1) Save the scanline image as a gif file to your harddrive.
2) Open the image, selection everyone (CTRL+A) then in the Photoshop menus go to (Edit > Define Pattern) then with the paint bucket tool, change the mode to pattern at the top of Photoshop, choose the pattern and click the canvas.
Hope that helps.
very nice
when I’m ready I will send you my creations
very nice tutorial! i like it alot
Very good design
nice tutorial
i love this tutorial i also did part two and it came out very well.your tutorials explain every step and for someone who is not yet an expert w/ cs2 u make things so much better by including all the pieces u need
super………
I am from india….
tamilnadu
i love this tutorial….
thanks…?!
This is really helpful, but if you were actually making a website and wanted the buttons to work and needed it all in HTML, how would you go about doing that? How would you make the buttons and the text shown in the adobe file work?
Sorry, I’m just a bit confused.
Reply on my email?
thanks
x
this is tight i just wanna know where you got the speaker from and if there are any other ones ive been looking for some good speaker stock images.
nice tutorial! very clean and stylish! love it!!!
How do you fill your canvas with the scanlines? thanks
What font would go well with this on a web page…??
hi there, this tutorial is fantastic, im using it to help with my graded unit (HND computing software development) so i have a basic knowledge of dreamweaver/photoshop, i was just wondering if transfering a photoshop file is fairly str8 forward or can cause difficulties, from photoshop to dreamweaver? any help would be much apreciated, lecturer thinks im a bell end so id like to show him im an internet warrior
reply via email if u have the time dood 
cheers!
Well Andrew it’s fairly straight forward.I assume that you have knowledge of slicing a web layout in photoshop.If not you can always google for it.Go to save for web and choose html and images and you will get an images folder with all the sliced images seperated.All you then have to do is go to dreamweaver and manage a new site.In the root folder you choose put the images folder and your html layout in it.Open the html layout and replace the icons with the right images.All you have to do then is add code ( php , mysql whatever ) And your done :).Hope i helped.
It says at the bottom of your page not to reproduce your materials without consent. I do not have a copy of photoshop, but I would like to apply some of your ideas. Therefore I would like to know if it is a violation of your policy for me to use the intermediary images in this tutorial directly (not hotlinked, of course, but simply as they appear in this post) rather than have to replicate them myself going through all the steps. I’d like to use this grunge layout for my new label’s website, spruke.net. Please email to let me know.