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.
Clicking on the image below to see a full-scale version of the band website we’ll be creating.
Create the Photoshop document
1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.
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.
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.
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.
Your work should look like this:
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.
Here’s where we’re at now:
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.
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:
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.
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.
14 Then, repeat the first one to make the grid go all the way across the document.
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:
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.
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.
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.
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.
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:
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:
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.
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:
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.
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.
28 He needs some shadow behind him, if you double-click on the layer, the Layer Style dialog box pops up.
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.
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.
33 Blog posts will be in the middle column, calling in three recent blog posts with a headline that links to the full article.
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.
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.
We’re all done!
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.
- band-website-design.zip (ZIP, 12.7MB)
Share your work on Flickr!
If you want to show us your work, be sure to post it on the Six Revisions Flickr group.