Hello
This is the Tutorial number 49 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.
Today we will make a MP3 player. or you can use it as a mp3 myspace player of course after you will transform into a flash player

Open a new document in photoshop with a black background #333333
The size of the document can be 500X500 pixels
Create a new layer ( press Ctrl+SHIFT+ALT+N )
Grab the Elliptical Marquee Tool and make a selection

Select Rectangular Marquee Tool ( press on Subtract from selection ) and delete the top and the bottom selection from this circle

Select Paint Bucket Tool and fill this selection with White then add the following layer styles


Duplicate the layer and resize it with a few pixels
Then add the following layer styles



Then Select one more time Elliptical Marquee Tool and draw another selection

Create a new layer ( Press CTRL+SHIFT+ALT+N ) And fill one more time the selection with white with the Paint Bucket Tool
Press CTRL+D to deselect

Add the same layer styles as above


Then duplicate this oval shape and make it a little smaller
basically you will repeat the steps from above but for this time we will use
another shapes

We will add some player buttons
This buttons are very simple and you can do this alone . Just use rectangle Tool and Polygon tool and i am sure you can create some basic mp3 player buttons

Create another selection like in the next image

Create a new layer ( press CTRL+SHIFT+ALT+N )
And after that With The Paint Bucket Tool Fill the selection with White
The go to Filter > Render > Difference Clouds

Now go to Filter > Sketch > Chrome
Set the detail to 7 and smoothness also to 7 and press OK
Change the Layer blending mode to Overlay

Now we will add some other details. For example i will add a shape under player controls, then i will add the following layer styles



This is my result

Now add some text

Then Create a Spectrum Analyzer . this is very simple job. Grab Rectangle Tool and make a small rectangle and after that duplicate this rectangle and place it like in the following image

Make another selection

Create a new layer ( press CTRL+SHIFT+ALT+N )
Then Fill the selection with the following pattern
( more about patterns you can find here : http://www.talk-mania.com/showthread.php?t=37 )

Then change the opacity for this layer with pattern to 20 %

We will create a Equalizer
This is also very simple. Choose Line tool ( set the weight to 3 pixels )
and make some line like in the next image
Add the following layer styles for this lines




this is my result

With rounded rectangle tool i will create some other buttons for equalizer

This is my final result

I hope you will like this tutorial. To be honest i don't like it to much, but i am very tiered and i don't want to start another tutorial
Labels: Custom web design, Web Design And Maintenance, web site design