HV-Designs.co.uk

October 9th, 2007 in Photoshop Tutorials by Richard Carpenter

Dj/Music Layout Tutorial

• Share

Create a new document 850×600, 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.

CLICK HERE TO SEE THE RESULT SO FAR.

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 (see link below).

CLICK HERE TO SEE THE RESULT SO FAR.

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, ive just made something really simple.

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

CLICK HERE TO SEE THE RESULT SO FAR.

Now lets create our naviagtion, 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 prevously made by our dj decks. Select all your buttons in the layer window (multiple selctions done by hold CTRL) and goto “edit > transform > distort”, distort the buttons so the perspective is somewhat the same as the decks.

CLICK HERE TO SEE THE RESULT SO FAR.

Select the polygonnal 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, ive also added abit of copyright information at the bottom left.

CLICK HERE TO SEE THE RESULT SO FAR.

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 eles. Heres how mine looks.

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

Thats it really all finished, im sorry if the tutorial is hard to follow and i havent explained steps in alot of detail.

• Share