Grunge Band Site Layout 12
Learn how to design a grunge band site layout with nice text effects and a clean, attractive background full of brushes.
1. Create a new document (800*500).
2. Fill the background with #bdb082 using the paint bucket tool.
3. Now adjust the bleding options of your background layer (layer – layer style – blending options) and add a stripe pattern.
4. Create a new layer and select a big rectangle in the middle of your background with the rectangular marquee tool and fill the selection with #cec4a1 using the paint bucket tool. We are going to add some blending options again so go ahead and adjust your new layer (layer – layer style – blending options).
5. Now it’s time to create another layer (the menu, which should be placed under the previous layer) and use your rectangular marquee tool to select a rectangle and fill it with #cec4a1 using the paint bucket tool. Also adjust the blending options of this ‘menu’layer and use the settings from the previously created layer so you end up with something like this.
6. The next step is to add some nice text in this #a56032 color to display the name of your band/site/anything you want! So we use the horizontal type tool and type something (I used a font called Staccato222 BT but I’m not sure if you will be able to find it on the internet). Then we want to make it a bit more attractive so we adjust the blending options of this text layer.
7. Now the time has come to add some text to the menu (for example: Home | Pictures | Gigs | Merchandise | Guestbook | Contact)… Ofcourse we are going to add some nice blending options to the text again (layer – layer style – blending options)!
8. We have the basics of our website, but ofcourse we’re not happy with this because it looks boring, that’s why we are going to do a little brushing work! Create a new layer (layer – new layer) and place it above the background layer. Select your brush tool and change your foreground color to #9c4315 and start brushing on your new layer with one of these swirl brushes and these grunge brushes.
9. I know the last step is a little confusing because you have to try for yourself what looks the best but after you’re finished it’s worth it!











Hi Mary, you should just click on the images to view them in a higher resolution! The images you see in the tutorials are just thumbnails…
Any way to make the images larger? Looks like a great tuturial, but I can’t see for sure!
Dear sir, your site is perfect.
Hello, you should find yourself a stripe pattern on deviantart… Go to http://browse.deviantart.com/resources/applications/patterns/
I don’t have a stripe pattern? It would be better if you placed a link for the pattern you used…
Or you just do it on your own… Not that difficult, click here…
Btw your site is awesome. The tuts are all great. I followed some of them but always came out with a different result than you. Keep up the work and thanks!
Hello, very nice site!
Hi, how do you turn this into a webpage?
To slice this layout and turn it into a webpage, follow on of these tutorials!
Excellent site, do keep up the good work.
Pretty nice site, I want to see much more on it
!
Thanks for the tutorial! I’m curious, when you click on each thumbnails for the jpg, how do you get it to display the way it is? Opening over the page and showing the image, is that through flash?