Jewel

Design a Band Website Layout in Photoshop

In Web Portfolio on March 8, 2010 at 10:20 am

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

Advertisements
  1. […] Part 1: How to Design a Band Website Layout in Photoshop […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: