MP3 Player Interface

In this tutorial, we will learn to create a nice looking mp3 player interface. Each step is explained in details, so that even beginner can learn how to design these kind of custome designs :)

Create this shape with Rectangle tool.

Click on add to shape area and add 4 circles with the help of ellipse tool at all four corners.

Apply these layer styles :-

After applying above layer styles, select this portion with marquee tool and press delete.

Create another layer and fill the selection with gradient tool selecting dark gray as foreground to black as background.

Duplicate the base layer and apply these layer styles in it. Keep the drop shadow, bevel&emboss and stroke settings same as the original base layer : -

Image after applying above layer styles :-

Draw a circle as shown :-

Apply these layer styles :-

Image after applying above layer styles :-

Duplicate and place this layer as shown :-

Draw a black color line by using rectangle tool.

Apply these layer styles: -

Line, after applying above layer styles :-

Draw some black color 1 pixel wide lines as shown. After drawing the lines with line tool, group and merge all lines.

Press control+j to duplicate the line layer and place it below as shown:-

.

Change the color of lines by right clicking on its layer name, select color overlay and select middle gray as overlay color.

Group and merge lines and shape layer and place it to the other side :-

Now, we will draw buttons. For that select ellipse to draw this shape:-

Apply these layer styles in it: -

Duplicate the button, place them as shown :-

Add the button shapes like play, pause, stop etc by typing with Webding font. Apply these layer styles in text layer :-

After adding buttons, type title, singer name and albu to have more realistic feeling of a mp3 player. Enjoy by listning to your favorate music :)