Design an Awesome Band Website Template

In this intermediate Photoshop tutorial, I’m 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 I’m 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)

noise settings

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 you’ve 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:

Dark Grunge Brushing 1

Make a little more (remember to use different brushes):

Dark Background Grunge Brushing

Brush in different places on the background:

Dark Grunge Brushing 2

Remember to use low opacities, or change layer modes to either Overlay or Soft Light to get a good, blended effect:

Grunge Brushing Effect

You should be left with a nice grungy background something like this:

Grunge Brushes added to Background

3. Finishing off the Background – Add a few more Details

Now for the background I added a stamp brush that I made real quick. I’ve actually written a tutorial on a similar effect before, you can find it over here: Branding Iron Effect Tutorial.

grunge stamp

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)

lighting effects settings

And now you should have a pretty cool background like this:

Lighting Effects Applied to Background

4. Designing the Content Section (a must!)

Every website needs a content section, so let’s 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 you’ve 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:

  1. Outer Glow
  2. Inner Glow

You should have something like this:

after applying layer styles

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 it’s not like using the eraser, you’ll be able to edit it later on if you want to.

layer mask grunge brushing

5. Designing a Basic Text Logo

Now it’s time to give the template some life, let’s add text! Start by adding your main logo text ‘Band Name’ in the top left. For the font I’ve 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:

  1. Drop Shadow
  2. Gradient Overlay

And now I have this:

music band text

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. Don’t fret though, Tahoma comes with Windows! Another good candidate for this text is Arial, which also comes with Windows.

copyright text

Now, what else is a must for a website? Navigation of course! Time to add in our navigation text/buttons.

The font I’ve used here is called Cornet, but since I’m not sure it’s 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:

  1. Drop Shadow
  2. Gradient Overlay

I’ve made the fill opacity for each text layer vary so it adds more detail, just a nice touch. Whatever! ๐Ÿ˜›

text finished

Lastly, I added a random underline to each of the navigation items using the line tool. (it’s 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.

text underlines

6. Add in some Content

We’re doing pretty well so far, keep up the good work. You can see what I’ve got so far here: Band Website Design.

So, let’s 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 I’ve 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.

filler text

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.

grungey buttons

7. We’re Finished! Congratulations.

So, now we’re 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)


38 thoughts on “Design an Awesome Band Website Template

  1. XeroTrinity says:

    Love Dir en Grey!
    Oh ya… Great lookin template also, nice tutorial.

  2. dubD says:

    That is one heck’of’a nice tutorial. I love the end result. Keep up good work. Hope to see more tutorials from you. ; )

  3. Killerbee says:

    Wow, thats a realy cool tut ๐Ÿ˜€

  4. Zach says:

    lookings good on gt

  5. kolot182 says:

    nice tutorial! like it so much! tnx!

  6. MrBigGuns says:

    Love the template but I still don’t know how you did the Stamp?

  7. Talon says:

    Very good tutorial!

  8. cutie137 says:

    how do you code this layout?

  9. Jody Cleveland says:


    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 there’s a layer in the psd file for it, but it’s darker than the final version of it up above. So, I’m wondering what needs to be done to get that to match the final version of it above. (I want to change the word music to something else) You’ve got a link to the tutorial, but it goes to a web page that’s down. Does this part of the tutorial exist elsewhere?

    Thanks again for a great tutorial!!

  10. thd says:

    how do you code this layout? i can’t figure out how to get it into html, the links especially.

  11. ZET says:

    @ thd

    the easiest way to do it would be to use an image map, and use the co-ordinates/pixel numbers of the links e.g. news, tours etc. For example:

  12. ZET says:

    img src=”bands.gif” usemap=”#green” border=”0″
    map name=”green”
    area shape=”polygon” coords=”19,44,45,11,87,37,82,76,49,98″ href=””
    area shape=”rect” coords=”128,132,241,179″ href=””
    area shape=”circle” coords=”68,211,35″ href=””

    did not know how to put correct syntax in e.g. “” as post comment will not allow this.

  13. xyyrus says:

    Hey..a relly gr8 tutorial…but i cant figure out how to make that stamp cuz the link provided goes to a site which is out-of-order. So please can u send a link where this tutorial is available?

  14. Disco says:

    i tried this tutorial with great results thnx

  15. Quir says:

    Code the website?
    Just slice it with the slice tool in photoschop ( the pen ),
    then hit file -> safe for the web and use images & html
    Then you have it sliced & in a html file

  16. at says:

    Nice tutorial! Thanks for sharing.

  17. iftakhar rasheed awab says:

    good job mate by the way check my work it on free server but it aint free dudes.check it up you wont be disoppointed by me.Keep up the good work.Thanks

  18. Brage says:

    Damn good Tutorial, man!
    Really useful

  19. nyan says:

    That great Tutorial
    Very useful

  20. bogy says:


  21. Jeff says:

    Nice work Eli

  22. nicky says:

    hey…gr8 work….after downloading the grunge brushes …i couldnt seem too find were they are in photoshop…could you help

  23. Ozonew4mWebmaster says:

    Hi.. cool blog.. I was wondering if you would consider allowing me to add your blog feed to my news section on my webmaster website . I realise that not all of your posts are strictly webmaster related but ive written a script to only show posts containing certain keywords so theres no need to worry. Anyway, like i said.. cool blog.. some interesting stuff.. thanks

  24. trixum says:

    gud and thxz 4 shring

  25. Makayla Edwards says:

    Well done!

  26. Nevaeh Pinto says:

    Great work!

  27. French Guy says:

    Wow… really interesting Tutorial.
    Good Job, Thx.

  28. billys says:

    fantastic!!didnt know it was that simple to create nice looking backgrounds for websites!million tnx!

  29. raed says:

    like it so much!

  30. Abhorson says:

    Great overall, though the top navigation, as a scripted font, is a little awkward.

    @XeroTrinity… Merry, not Dir en Grey. Oh wow…

  31. Carlos Gouveia says:

    Use slices dude! Slice the whole thing and the File -> Save for web

  32. media says:

    Good work! Thank’s

  33. Tebrikler, Hepsi gรƒยผzel…
    Thank you, good all…

  34. leandro says:

    very cool website ideas thanxs

  35. neil says:

    brilliant tutorial – clearly very skilled and a lovely website design for a site

  36. Iscoandco says:

    Thank you!
    : )

  37. kenichifc says:

    thanks for tutorial. Love it, simple and effective ๐Ÿ˜€

Comments are closed.

Pin It on Pinterest

Share This
Sign up for our Newsletter

Signup today for free and receive all new free tutorials published at Photoshop Star.