Hi-Tech MP3 Player Interface


Learn how to design your own MP3 Player in Photoshop.

Open a new file with 392×306 px, 72 dpi and pain it with the shown color here: 0B9EE3.

Hi-Tech MP3 Player Interface

Take the next instrument

Hi-Tech MP3 Player Interface

to draw an ellipse colored in 017CCA.

Hi-Tech MP3 Player Interface

Using the same instrument over the already created ellipse, draw one more figure colored in 189FD7.

Hi-Tech MP3 Player Interface

Draw one more element over the previous one, that would have the color – 22B5E1:

Hi-Tech MP3 Player Interface

Take the next tool

Hi-Tech MP3 Player Interface

to draw an element of the media player corps colored with F3B91D. Correct its angles with the instrument shown here

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Blending Options-Inner Glow

Hi-Tech MP3 Player Interface

Using the same instrument, represent the basic corps’s layer (make corrections on its shapes with the same instrument applied before for this kind of operations

Hi-Tech MP3 Player Interface

)

Hi-Tech MP3 Player Interface

Blending Options-Inner Glow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Blending Options-Stroke

Hi-Tech MP3 Player Interface

Select the next tool

Hi-Tech MP3 Player Interface

to represent the mount of the media player’s screen:

Hi-Tech MP3 Player Interface

Fill 0% on the layers
Blending Options-Inner Shadow

Hi-Tech MP3 Player Interface

Blending Options-Stroke

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Selecting the previous instrument represent now the panel reserved for the media player’s buttons.
The next instrument

Hi-Tech MP3 Player Interface

will help us to erase the unnecessary tops.
The other instrument

Hi-Tech MP3 Player Interface

will be useful in straightening the lowest corners:

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Blending Options-Pattern Overlay

Hi-Tech MP3 Player Interface

Blending Options-Stroke

Hi-Tech MP3 Player Interface

Make a copy of the new made layer and make use of the Free Transform selection to turn it around and narrow the copy vertically. Change the parameters too with those indicated below:

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Take the next tool

Hi-Tech MP3 Player Interface

and draw the screen of the media player to be:

Hi-Tech MP3 Player Interface

Blending Options-Inner Glow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Make a copy of the new represented layer and press the Alt button used with the next instrument

Hi-Tech MP3 Player Interface

simultaneously to cut out the inside zone:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Blending Options-Bevel and Emboss

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Take the next instrument

Hi-Tech MP3 Player Interface

and draw a flare on the media player’s screen:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Using the next tool

Hi-Tech MP3 Player Interface

represent several icons of white color, placed on the media player’s screen:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Using the next tool

Hi-Tech MP3 Player Interface

, draw a rectangle of white color. Then click on the Shift+Alt buttons simultaneously with the next tool

Hi-Tech MP3 Player Interface

and make a copy of the rectangle:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

This is going to be the spectrum analyzer:
Add on the picture the track timer and the names of the singer and the track’s one. Keep the demands from the tables shown below:

Hi-Tech MP3 Player Interface

(time)

Hi-Tech MP3 Player Interface

(name, singer, track)

Hi-Tech MP3 Player Interface

Represent now a deepness reserved for the media player’s button. Do it with the instrument shown here

Hi-Tech MP3 Player Interface

.

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Make a copy of the new made layer and make use of Free Transform option to make it smaller a little. Choose the parameters indicated in the next steps:

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Blending Options-Stroke

Hi-Tech MP3 Player Interface

For your convenience now, we should merge down in a group all the layers containing the button.
Make five copies of the new made group and insert a special effect on the last button’s layers:

Hi-Tech MP3 Player Interface

Blending Options-Outer Glow

Hi-Tech MP3 Player Interface

Selecting the next tool

Hi-Tech MP3 Player Interface

, it’s possible to draw the pause indicator on the button:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Fill 0% on the layers
Blending Options-Drop Shadow

Hi-Tech MP3 Player Interface

Blending Options-Inner Shadow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Selecting the last instrument, it’s possible to draw also the stop indicator:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Fill 0% on the layers
Blending Options-Drop Shadow

Hi-Tech MP3 Player Interface

Blending Options-Inner Shadow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Choose the instruments shown here

Hi-Tech MP3 Player Interface

,

Hi-Tech MP3 Player Interface

to represent the Eject indicator:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Fill 0% on the layers
Blending Options-Drop Shadow

Hi-Tech MP3 Player Interface

Blending Options-Inner Shadow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Using the same tool, we may create the indicator of play back:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Fill 0% on the layers
Blending Options-Drop Shadow

Hi-Tech MP3 Player Interface

Blending Options-Inner Shadow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Make a copy of the last made indicator on the media player’s button (turn around the triangle on 180 degrees, making use of the Free Transform option).

Hi-Tech MP3 Player Interface

Find a similar indicator and add the effects on it:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Fill 0% on the layers:
Blending Options-Drop Shadow

Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Take the next tool

Hi-Tech MP3 Player Interface

to represent an indicator of the play time – position. It should have the black color:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Make a copy of the new made layer and apply Free Transform selection to narrow it horizontally and introduce the next parameters:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

The next step includes creating the play indicator:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Blending Options-Gradient Overlay

Hi-Tech MP3 Player Interface

Gradient’s parameters:

Hi-Tech MP3 Player Interface

Blending Options-Stroke

Hi-Tech MP3 Player Interface

Take the following tool

Hi-Tech MP3 Player Interface

to draw a button of minimizing media player:

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Select the last instrument to draw the Stop button.

Hi-Tech MP3 Player Interface
Hi-Tech MP3 Player Interface

Finished!