In this intermediate Photoshop tutorial, Im going to be teaching you how to make a really wicked, grungy-style band website template. Personally, this is one of my favorite designs/tutorials ever, so I really hope you enjoy it.
(click above image for full size)
1. Designing an Awesome Band Website Template
Obviously, the first thing we should do is create a new document. For this tutorial Im using quite a small size of 760 x 760 pixels, you might want to use something bigger. Next thing to do is fill the background with a fairly dark color, I used a gray-brown. (#47433a)
2. Add Texture to Background
To add some texture to the background you can apple some filters or slap a grungy stock photo over the top and change the layer modes. I started off by applying the Noise filter with a low setting. (Filter > Noise > Noise, amount: 0.9)
Now we need to add in some nice and subtle details to the background. Firstly, add some grunge-brushing to the background. You can find some really awesome grunge brushes on DeviantART, courtesy of ~KeReN-R. Now youve got your brushes installed, pick a random one and use it a few times on the background. Change the layer mode for your grunge-brushing layer to either Soft Light or Overlay and maybe lower the opacity (something like 20-50%).
Start off with some soft grunge brushing:
Make a little more (remember to use different brushes):
Brush in different places on the background:
Remember to use low opacities, or change layer modes to either Overlay or Soft Light to get a good, blended effect:
You should be left with a nice grungy background something like this:
3. Finishing off the Background Add a few more Details
Now for the background I added a stamp brush that I made real quick. Ive actually written a tutorial on a similar effect before, you can find it over here: Branding Iron Effect Tutorial.
After I made the stamp I lowered the opacity to about 30% and changed the layer mode to Soft Light (this blends it with the background).
Lastly for the background, I merged all of the layers together (Layer > Flatten Image) then I applied the Lighting Effects Filter. (Filter > Render > Lighting Effects)
And now you should have a pretty cool background like this:
4. Designing the Content Section (a must!)
Every website needs a content section, so lets make ours. Simply start by creating a rectangular box in the middle of the document. Fill your rectangle or selection with a lighter brown color than what youve used in the background. The color I used here was #716a5d. I then lowered the fill for my content section layer to 40% and applied the following layer styles:
- Outer Glow
- Inner Glow
You should have something like this:
Add a layer mask to your content section (Layer > Layer Mask > Reveal All) and using a random grunge brush from the brush pack, brush a little in the layer mask using black as your color. This will remove parts of your layer, but its not like using the eraser, youll be able to edit it later on if you want to.
5. Designing a Basic Text Logo
Now its time to give the template some life, lets add text! Start by adding your main logo text Band Name in the top left. For the font Ive used a cool, grungy font called 4990810, and for the font size I used 48pt. This is a free font, so please feel free to download it from here: download 4990810 from DaFont. The color I used for my logo text was #c9c4b8, and to finish off I added these two layer style effects:
- Drop Shadow
- Gradient Overlay
And now I have this:
Not looking too bad, is it? 
Now you can add the unnecessary but probable copyright text underneath the content area. I simply used Tahoma, 11pt, #5c584e. Dont fret though, Tahoma comes with Windows! Another good candidate for this text is Arial, which also comes with Windows.
Now, what else is a must for a website? Navigation of course! Time to add in our navigation text/buttons.
The font Ive used here is called Cornet, but since Im not sure its a commercial font or not, you might want to go to a free font website and look for a calligraphy-style font. After I wrote out my navigation text (News, Tours, Discography, Biography, Gallery,) I applied the following layer styles to the text layers:
- Drop Shadow
- Gradient Overlay
Ive made the fill opacity for each text layer vary so it adds more detail, just a nice touch. Whatever! 
Lastly, I added a random underline to each of the navigation items using the line tool. (its on the same icon as the shape tools somewhere) Just remember, these lines can be far from perfect! I finished off with the underlines by copying the layer styles from the text layers over to the underline layers. Just try and be creative in anyways possible.
6. Add in some Content
Were doing pretty well so far, keep up the good work. You can see what Ive got so far here: Band Website Design.
So, lets add some dummy content. Head over to YotoPhoto and search for band or something like that and get some cool, random stock photos. Drag them over to your canvas and resize them.
In the above image Ive resized my images then cropped them to 140 x 100 pixels, I then added two borders, a 4px light border on the inside, and a 2px dark border to the outside. I finished off by adding some filler text to the right of the images. All I used here was basic ol Tahoma, 11pt/12pt, and light/dark brown colors.
Also, for a nice small touch, I added a few light grungy buttons under the filler text. All you have to do to make these is make a white rectangle, change the layer opacity to something very low then erase away the edges.
7. Were Finished! Congratulations.
So, now were finished. A nice final touch, in my opinion, would be to add some photos in the top left then blend them in a little bit. (blend them in for example by using the eraser tool, then changing the layer modes/opacities)
Thanks very much for reading guys (and girls, of course!) I hope you enjoyed this tutorial! (one of my favorite to date)
Design an Awesome Band Website Template | - Photoshop Star
Hello, Thank you for this excellent tutorial!! It really is outstanding. The only part I have a question on is the Music stamp with star. I noticed theres a
Design An Awesome Band Website Template Photoshop Star 2013
Reversal photoshop psd website template. reversal is a great design for website of creative corporate, company profile, personal portfolio and more..
How to Design a Band Website Layout in Photoshop
How to Design a Band Website Layout in Photoshop. how to design an awesome band website that any rock and have the html code for this template
Design an Awesome Band Website Template - Page 3 - Urdu ...
Design an Awesome Band Website Template Photoshop Choose Your Color : Logo
Awesome Showcase Of Logo Design Tutorials And Templates ...
Design awesome band website template | - photoshop star, 30 awesome layouts photoshop, If design project involves creating website layout scratch,
Design an Awesome Band Website Template - Urdu Planet ...
Design an Awesome Band Website Template > IT Planet > Free IT Courses > Photoshop » Design an Awesome Band Website bint-e-masroor, blue star
50 Beautiful Music Related Photoshop TutorialsPhotoshop ...
24.Design an Awesome Band Website Template 25.Guitar Hero Photoshop Tutorial 26.Blend Photos With Apply Image In Photoshop About Photoshop Website
Web Design Tutorial: 30 Awesome Layouts In Photoshop ...
of the very best in web design tutorials. These Photoshop tutorials will arm Design a Band Website Layout in Photoshop. Design a simple, modern web template.
Photoshop Website Templates | allpsd.net
Creating web template photoshop Design awesome band website template | - photoshop star, In intermediate photoshop tutorial,
Web Design - Website Design Tutorials, Articles and Free Stuff
web design showcases, software reviews, website templates and free design web templates! Plus a giveaway of an awesome Photoshop and that
Travelling is my life
ConversionConversion EmoticonEmoticon