Skin Player Tutorial

Create a 440x270 px file.

Fill in your canvas with # 080809.

Create the background for your player skin.

Grab the Rounded Rectangle Tool with a 3 px radius, and set the foreground color to # 2a2f32.

Draw a rectangle as shown below and apply a 1 px # 43484d Stroke filter.

Create buttons:

The background will be created using the Rounded Rectangle Tool.

Step no.1 : Please create the 3 shapes marked in the following picture as Shape 1,2,3.

The color is not important.

Step no. 2: Select one by one all portions pointed by arrows (1px width each) and hit delete.

Step no.3: Apply the following Blending Options (right click on layer’s thumbnail - > Blending Options):

Create the icon buttons for Play, Pause, Forward, etc..  using the Pen Tool and apply the following Blending Options.

Obs.: “Open” ,”Shuffle” and “Toggle” are entirely black, so the blending options shown before, no longer apply.

Step 2. The timeline.

At this step we will create the timeline shown below:

Create the object pointed out by the arrow below:

Using the Marquee Tool, create the rectangle, fill it in with #272727, and apply a 1px #717171 stroke.

The blue part of it will be created first with the Marquee Tool, same as above; color is not important.

Apply the following filters:

The small button on the timeline pointed out by the arrow (see below) was created using the same technique as with the background for the main buttons:

Step 3. The volume bar.

Draw the volume bar in the same way you drew the other buttons so far.

The volume line is same with the timeline, only different colors..

Use for the gradient bar the blending options described below, and the gently erase 1 height px surface every 7 pixels (in my case).

The gradient bar I am writing about is pointed out by 3 red arrows below:

Step 4. The “display”

Create the shape using for example the Pen Tool, fill in the shape with #080809, and apply a 1 px #565c62 Stroke.

Set the text color to #0097c2, grab the Text Tool and write down the name of the song.

Create these following rectangles using the rectangle tool. Apply a greish gradient and a darker gray for a 1 px Stroke. 

Add the number of minutes you song has.Create the reflections using same technique as shown here !

 Aaannd Voila!:) The result below -----

Check out my Twitter and my Facebook to stay connected.
Cheers!