SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout Music Layout

Music Layout

amitk Web Layout Feb 13, 2008

Open a new document in photoshop

Size 760 x 770 pixels
Color: #1e1e1e

Select Line Tool, Set the foreground color to a light gray #999999

Then set the Line weight to 5 pixels and create 2 lines on your layout

image 1

Then with the same tool create another line. this time set the weight to 1 pixel,

Set the foreground to white and place the line over the gray line.

image 2

Then With the same tool create another lines. this time set the weight to 50 pixels, and use a red color

image 3

Then for this red line apply the following layer styles

image 4

image 5

This is my result

image 6

Then select The Rectangle Tool and make a big rectangle under the top lines

image 7
Click to enlarge

Then add the following layer styles

image 8

image 9

image 10

This is my result

image 11
Click to enlarge

Now Create another document: ( we will create a pattern )

image 12

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

image 13

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

Now grab the rectangular Marquee Tool and make a selection like mine

image 14
Click to enlarge

Create a new layer ( press Ctrl+Shift+Alt+N )

Select paint Bucket Tool

Use the following settings

image 15

And press one time inside the selection.

Then add the following layer style

image 16

Press on Ctrl+D to deselect and this is my result

image 17

Now press on the " Add layer mask button " from the bottom of the layer palette

Select the Gradient Tool

Be sure you have the foreground color - white and the background color - black

Then draw a line like in the following image

image 18

Then add some stock images,

I will add one DVD .

In the same time i will add also some text on the red navigation bar

image 19
Click to enlarge

Now let's start adding more details on the body of the layout

Select the line Tool , Set the weight to 1 pixel and create one line

image 20
Click to enlarge

Then Press on : " Add layer mask button "

Select Gradient Tool

Use the following settings

image 21

And with the Gradient Tool draw a line from the middle of your line to the end of the line

You can see in the next image how to draw the line

image 22
Click to enlarge

Duplicate this line ( to duplicate the layer press on Ctrl+J )

Select the Move tool ( press V ), and press one time on the down arrow key

Then change the color of the line to a dark red #760000

image 23

Now select the Rounded Rectangle tool , Set the radius to 2 pixels , and start creating some shapes on your layout

image 24
Click to enlarge

Then add the following layer style for all your shapes

image 8

image 9

image 10

This is my result

image 28
Click to enlarge

Grab the Rectangular marquee Tool, And make the following selection

image 29

Create a new layer and fill the selection with the pattern we have created a few steps ago.

Do not forget to add also the same layer style as above, and also do not forget to add a layer mask

This are simple steps which we have already completed a few steps ago.

image 30
Click to enlarge

Now you can add also some text and some images

image 31
Click to enlarge

Then add more lines between your text. You can add some dots, or minus signs. You can create this dots or minus signs with the type tool

image 32
Click to enlarge

Now i think we are ready with the body of the layout. let's move one more time on the header.

Create a simple rectangle with Rounded rectangle tool

image 33
Click to enlarge

Now for this rectangle add the following layer styles

image 8

image 9

image 10

This is the result

image 37

In this rectangle you can create a media player, or you can add any text you want. I will add some simple custom shapes, because i want to create a flash player. All the buttons you will find in your default custom shapes

For the buttons i have used the following layer styles

image 8

image 9

image 10

And this is my result

image 41

I hope you like my final result.

Music Layout
Click to enlarge

   
subscribe to newsletter