Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Rock Band Layout - Music Layout

Rock Band Layout - Music Layout

victor_ Web Layout Aug 13, 2009

As usual I will start with a new document with the following sizes 760x770 pixels.

For the background color I will choose white, then create another layer right above the background layer, and fill it with black

With Brush Tool I will add some great brushes

image 1

You can download a great set of Grunge border brushes from Free Photoshop Brushes.

I will choose a orange color #f26826, and with the Brush Tool, I will add the brush like in the following image.

image 2

Now we have to rotate the brush. the easy way is to flip the brush. After I will change the brush angle, I will choose another color #09b0f0.

image 3

You can repeat the steps from above, as many times as you want. be sure you place some nice grunge border brushes like in the following image:

image 4

I will select the layer right above the background layer, and with Eraser Tool:

image 5

I will delete the margins with the following brush.

image 6

and with this brush selected I will start deleting the margins of the black layer.

image 7

and this is my result so far:

image 8

With the same grunge brush I have deleted the other parts of the layout:

image 9

Now I will create some buttons with Rectangel Tool:

image 10

and I will create a small rectangle with the following layer styles:

Drop Shadow

image 11

Inner Shadow

image 12

Bevel and Emboss

image 13

Color Overlay

image 14


image 15

At the end you will have something like this:

image 16

I will grab Eraser Tool and I will load the following brush Orange vector brush.

image 17

After you select this brush, please press on the " [ " until you have a small brush and when you are happy with the size of the brush, you can delete some random parts of your button ( please note that you need to rasterize the shape first - you can do that by right clicking on the layer with button , and from the menu you can choose "rasterize shape".

image 18

With this layer selected, press on Ctrl+J a few times ( this shortcut will duplicate the layer).

image 19

I will download another set of brushes Dirty gray brushes and I will load this brush in photoshop.

After that I will create a new layer ( press Ctrl+Shift+Alt+N ), and with the following brush:

image 20

I will add some grunge drawings under my buttons ( I have used the following color #5b5b5b ).

image 21

From the same set of brushes, I have selected another brush, and I have used also another color #6b0d10.

image 22

Here is my result:

image 23

Now I will add a stock image from my personal collection.

image 24

I will duplicate this layer a few times, then I will change the scale of the image, and I will place it like in the following image:

image 25

With brush tool, I will add another details on the left side of the layout:

image 26

Now I will add another image from my stock collection. I will use a microphone.

image 27

With Horizontal Type Tool

image 28

I will add some text:

image 29

Now from the same great set of brushes, I will choose the following brush.

image 30

And I will create a new layer, and with brush tool, I will add the drawings like in the following image:

image 31

And voila. This is my final result. I hope you like it, and I will wait for you tomorrow for a new tutorial:

Rock Band Layout - Music Layout

subscribe to newsletter