Dj/Music Layout

Create a new document 850x600, color the background #131414. Select the round rectangle tool and draw out a big rectangle leaving about 10-20 pixels either side, about 2-4 pixels from the top and about 6-8 pixels from the bottom. Color the rectangle #121415.

Now your going to need a picture of some dj decks, i found this one on google images. Once you have your decks place them at the bottom left of your rectangle and add this layer style.

Now select the type tool and just type some full stops (… ….) to make a divider, place this just above the corner of the decks.

Repeat the above steps and by rotating them make the desired effect.

Click to enlarge

Lets start making the header, select the type tool and type out your dj name, and place at the top, also put in your logo, I've just made something really simple.

Lets also create a music player so our tracks can be listened to live online, i done this by using the rectangle tool, and shapes from adobe's custom shapes library, now obviously for you beginners this function would have to be coded properly to work like using a flash player or something. This is purely an example only.

Click to enlarge

Now lets create our navigation, select the rounded rectangle tool and draw out a small rectangle.

Make a selection like this.

Hit the delete key.

Now add these layer styles.

You should be left with this.

Now we have created our button, duplicate it as many times as needed and place next to our divider that we previously made by our dj decks. Select all your buttons in the layer window (multiple selections done by hold Ctrl) and goto "edit > transform > distort", distort the buttons so the perspective is somewhat the same as the decks.

Click to enlarge

Select the polygonal lasso tool and draw out your content boxes. (holding shift key makes you draw perfect straight lines).

Add a stroke to your content boxes.

Now label your content boxes and navigation, I've also added a bit of copyright information at the bottom left.

Click to enlarge

Now this is optional and requires some "tech brushes" which can be found at deviant-art or search google. Select your brush tool and just randomly brush your tech brushes over the layout, all on one layer be sure to place the layer above your mainbox layer and background layer but underneath everything else. Here's how mine looks.

Looks a bit messy, but if you lower the opacity to about 5%-10% just makes the background a bit more appealing.

That's it really all finished, I'm sorry if the tutorial is hard to follow and i haven't explained steps in a lot of detail.

Click to enlarge