How to Design a Band Website Layout in Photoshop

Nov 19 2009 by Shannon Noack | 29 Comments

How to Design a Band Website Layout in Photoshop

In this tutorial, you’ll learn step-by-step how to design an awesome band website that any rock and roller would be proud to call their own. The theme is grungy and worn-and-torn and we’ll use a handful of freebies along the way.

Final Result

Clicking on the image below to see a full-scale version of the band website we’ll be creating.

Final Result

Create the Photoshop document

1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.

Create the Photoshop document

2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Create the Photoshop document

Working on the rough background

3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. To do this, set your Foreground color to #C4C2AF in the Tools Panel. Then, with the Background layer selected in the Layers Panel, choose Select > All and then Edit > Fill, which will open up the Fill dialog box. Make sure that the value under Use option is set Foreground Color, and then press OK.

4 Now we’ll add a texture and start to build up some layers in the background. Find a cool rock-like texture. For this tutorial, I used the SR_Rough_Texture_13 that’s part of the Free High Resolution Rough Texture pack. Download it, open it in Photoshop, and drag it into your canvas; it should automatically create a new layer on top of the Background layer.

Working on the rough background

Working on the rough background

This image isn’t quite wide enough to fill the background space (I like a full image background to be 1600 pixels wide and this one doesn’t quite cut it). So we’re going to create some new layers. Then we’re going to make a layer mask and fade the sides of the image in order to get a nice texture that doesn’t have an ugly/jarring edge.

5 To make the layer mask, you’ll need to select the whole image, which you can do by choosing the image’s layer in the Layers Panel and then going to Select > All.

6 Then click the Add layer mask icon towards the bottom of the Layers Panel. This won’t change a whole lot yet but we’ll brush away the edges to make it nice and smooth. But first, change the layer’s Blend Mode in the Layers Panel to Overlay.

layer panel.

Your work should look like this:

Rock

7 Click on the mask of your rock layer (not the thumbnail of your layer). Get the Brush Tool (B) from the Tools Panel and choose a nice large soft brush tip, like Soft Round 300. Make sure your foreground color is set to black (#000000) and set the Opacity and Flow to 50%. Brush away the edges until you can’t see a hard line anymore. Then enlarge the image using Image > Image Size to about 128% so it fills more of the space, and move it to the left side of the canvas.

Masking

Here’s where we’re at now:

After Masking

8 Now find another cool background texture, something like Grunge Extreme 08 from the Six Revisions Grunge Extreme set in the Freebies section. Download it, open it in Photoshop, and drag it to your workspace.

Grunge Extreme 08

Grunge Extreme 08

9 We’ll do the same thing with this texture as we did with the last one. Create a layer mask, and this time, change the layer’s blending mode to Screen. Then brush away the edges with a large soft brush (Soft Round 300 works here as well) with the Brush Tool (B) to make them smooth. Finally, move this texture a bit off the right side of the canvas.

10 Now, we need something just a touch bolder than, this so duplicate the layer (Layer > Duplicate Layer).

Here’s what we have now:

Grunge Extreme 08

11 We need one more texture for the background, a rusty metal texture with a grid, something like Grunge Extreme 06 from the Grunge Extreme set. Download it, open it in Photoshop, and drag it into your canvas.

Grid Texture

12 Resize it to take up about 310 pixels in height (you can use the Free Transform Tool).

13 Now duplicate the layer so that they line up next to each other and flip it horizontally using Edit > Transform > Flip Horizontal so they repeat nicely.

Grunge Extreme 08

14 Then, repeat the first one to make the grid go all the way across the document.

Grid texture

15 Now we’ll link all three layers. Select all three layers in the Layers Panel, right-click, and then choose Merge Linked.

16 Then change the blending mode to Overlay. Here’s where we’re at now:

Grid texture

Adding some header stuff

17 Where would a band be without their logo at the very top? We need a fun and funky font for this, so I chose Tiza from Dafont. I made it a dark warm gray color and changed the layer blending mode to Multiply.

Adding some header stuff

18 We also need a navigation in the header area. Add some links to the upper right hand side using the Horizontal Text Tool (T), just about even with the logo on the left. I chose to use Arial so that it looks similar on all browsers, bolded and in all caps. I made it a dark warm gray color to match the logo.

Adding some header stuff

19 I also like to determine hover actions for the main navigation in my mockups. This one will extend from the top of the page to below the navigation links. Create this by making a box using the Rectangular Marquee Tool (M) and filling it with white (#FFFFFF) via Edit > Fill (Shift + F5). Next, set the Opacity of the layer to 28% so that we can see the text link below it.

Adding some header stuff

Moving on to the content area

20 Create a rectangle using the Rectangular Marquee Tool (M) that’s 960 pixels wide by about 750 pixels tall, and fill it with a warm gray color that is a bit lighter than the logo. I used #9A9686.

Moving on to the content area

21 Create a layer mask by clicking on the Add layer mask icon, just as we did with the textures in the background and choose a large soft round brush. Again, make sure your color is set to black (#000000) but this time set your Opacity and Flow to 100%. Click on the mask of the layer and brush away the bottom of the content box unevenly. It should look something like this:

Moving on to the content area

22 Now we need a bit of grunge for the top. Find a nice grungy brush, or download the Rough Edges Photoshop brush set from Brusheezy. I used rich horizontal from this pack and brushed away the top of the layer mask until I was satisfied with the look. Change the layer blending mode to Multiply and you should have something like this:

Moving on to the content area

Let’s add some content

23 Most musicians like to see their photo up top, so we’ll set them up with a rotating banner filled with some sweet band pictures. To simulate the banner in our mockup, create a 908 pixel wide box using the Rectangular Marquee Tool (M) and fill it with a similar color to the logo, I used #49453A.

Let's add some content

24 We’re going to need some texture in here to match the rest of the site, so bring the second texture (Grunge Extreme 08) we used on here back up and drag it into your workspace again, above the flash banner box you just created. Then select your banner box by holding down Ctrl (or Cmd) and clicking on the layer thumbnail.

25 With the box selected, click on the texture in the Layers Panel and hit the Add layer mask icon at the bottom of the Layers Panel. You should have something like this:

Let's add some content

26 That’s a bit too loud for me, so I changed the layer blending mode to Multiply and I now have a nice box to build on.

Let's add some content

27 Now we need to add our musician’s photo to the flash banner, and I pushed it over to the right side to make room for text on the left. I downloaded a cool rocker dude from sxc.hu, a great free stock photography site.

Let's add some content

28 He needs some shadow behind him, if you double-click on the layer, the Layer Style dialog box pops up.

Let's add some content

29 Turn on outer glow, changing the Glow Color to black (#000000).

30 Next, change the Blend Mode of the layer to Multiply. I think this gives a much more subtle and realistic looking shadow than the Drop Shadow in Photoshop does.

31 Add some text on the left side, giving users multiple links and places to go on the site. I used Tiza again for the headline. I do want the body text here to match what I’ll be adding later, so I used a standard font for the links, in the same size that the body text will be.

Let's add some content

32 We’re going to add three columns below the banner to give the users some content to read and show off the most important parts of the site. We’ll start with the Latest Videos on the left, establishing the header styles for the rest of the site. I chose Arial for the text, and the headers will be all uppercase and bold. I added an opaque white triangle using the Polygon Tool with the Sides option set at 3 for a play button on the video, and some text links below where more videos can be accessed.

Let's add some content

33 Blog posts will be in the middle column, calling in three recent blog posts with a headline that links to the full article.

Let's add some content

34 6 social media icons are in the far right column, giving fans other avenues of contacting and connecting with the band members. The icons used are from the A Life in Pixels set here on Six Revisions.

Let's add some content

And finally, the footer

35 A simple footer is all that’s needed here. I added a thick light gray line, #C4C2AF, across the full 960-pixel content area, as well as copyright info and a contact link.

Let's add some content

We’re all done!

Final Result

Thanks for following the full tutorial. I hope that you learned some tips and tricks that you can use in Photoshop and that you had fun following the creation of a band website in Photoshop. Let me know what you think in the comments area below.

Download the source file

If you’d like to grab the Photoshop file (PSD) used in the tutorial, get it from the link below.

Share your work on Flickr!

If you want to show us your work, be sure to post it on the Six Revisions Flickr group.

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

29 Comments

Brad C

November 19th, 2009

Ya know, Six Revisions would make a pretty cool band name. (and a nice tutorial Shannon)

Marc Shake

November 19th, 2009

That is so cool. I am a dj (and passionate blogger) and so I need a funny and informative design. I’m just so/so in photoshop ;)

paul

November 19th, 2009

thanks Shannon,

there are some very useful techniques here, and I like how you used different textures to achieve this style!
It got me all inspired

Paul

clippingimages

November 19th, 2009

Awesome tutorial post . Very well explained. Thanks for sharing this nice post. :)

Shannon

November 19th, 2009

Thanks guys! I had a lot of fun designing the layout and writing the post, glad you enjoyed it. @Brad C: Six Revisions does make a good band name ;)

WPConcept

November 20th, 2009

Very clean design. Thanks for sharing this.

fanhua

November 20th, 2009

Good tutorial,come and see my works.:-) [Link]

Tomas

November 20th, 2009

Great tutorial Shannon, thanks.

Webjohn01

November 24th, 2009

Hello Shannon!

I like your design and it was really impressive. I hope for follow up coding of this tutorial?

Keep up the good work.

More thanks!

Surbiton

November 25th, 2009

The final result looks fantastic. I can’t wait to try this out myself. Thank you for exlpaining in such great detail.

Dhane Diesil

November 25th, 2009

Sweet tutorial! I had a lot of fun doing it.

M. joshua cauller

December 4th, 2009

This is a solid tutorial. But it teaches you nothing about design.

It teaches users Photoshop comp techniques. We learned nothing about how to make good UI choices or what practical decisions went into the layout, thumbnail concepts, etc…

Shannon

December 8th, 2009

Webjohn01: The coding followup tutorial will be posted sometime in the near future! Glad you enjoyed this tutorial.

M. joshua cauller: Do keep in mind not everything can be covered in a tutorial like this (it gets pretty lengthy as is!), although we do aim to be as comprehensive as we can. The topic here covers designing in Photoshop and aims to teach Photoshop tips and tricks while creating a web design like one would in the real world for a client. Certain choices and design decisions are briefly touched upon here but weren’t discussed in detail as that wasn’t the point of this tutorial. Hope that helps!

Keep an eye out for the coding tutorial, it’s coming soon..

UrbiCZ

December 24th, 2009

This is amazing tutorial. Thank you. My result: http://i47.tinypic.com/2zssgbc.jpg

Ray Acosta

December 29th, 2009

Shannon that was Awsome!

Both parts even better. Thanks for your time and for sharing your tips and technics. I love to learn somenthing new everyday,

Thanks again.

Ben Stokes

January 16th, 2010

Hey Shannon . . .

Nice tutorial, it was a pleasure to read and you make it sound so simple ;)

Brilliant insperation for the likes of band websites.

Patrick Ritchie

January 26th, 2010

Would you be willing to do our band’s myspace page? Love your stuff.

John @ JargaPix

January 29th, 2010

Very cool stuff Shannon! I’m curious…is that a landing page for a Blog? Can it be used with WordPress and say a ProPhoto Blog Theme?

Thanks for taking the time to post a tutorial!

JA

Shannon

January 29th, 2010

@John – It could be a blog landing page and incorporated into WordPress if you’d like. I coded this design in another post: http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-band-website-created-in-photoshop/ and as you can see I didn’t set it up for WordPress, so you’d have to modify the code to make it fit there. I envisioned it as the homepage of a full site, with a blog included. Sounds like you have a project in mind.. good luck with it!

ivini

June 29th, 2010

Bealtifull, good job!!!

Sigit

August 12th, 2010

Hey Shannon . . .

its really Nice tutorial,

awesome… u make it so simple for me…

thanks

yury

August 15th, 2010

Hey Shannon, nice design. Keep it up.

NOYFB

January 9th, 2011

Thanks…helped a lot.

NOYFB

January 9th, 2011

Thanks for the inspiration…it was just what I was looking for.

Vad

September 13th, 2011

Shannon, thanks a lot! This tutorial + a bit of imagination do wonders together!

Janet

October 26th, 2011

Hi Shannon,
Great tutorial..I downloaded the psd for the bandwebsite, it opened as a psd but it only had a locked background layer..no other layers?
Is there any other way of opening it?

Thanks
Janet

Shannon

October 28th, 2011

@Janet – Glad you liked the tutorial! Sounds like you might have just grabbed the background file, try downloading this link: http://downloads.sixrevisions.com/band-website-design.zip. Hope that helps!

jay

November 1st, 2011

Shannon, hi! this is a very good tutorial,i was just wondering if you have the html code for this template? thanks…

Shannon

November 4th, 2011

@Jay – That is actually covered in another post: http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-band-website-created-in-photoshop. You should be able to find all the coding resources there!

Leave a Comment

Subscribe to the comments on this article.