Create a Stylish Audio Player in Photoshop

Want to create amazing interfaces in Photoshop, one of the best way is to practice by creating electronic devices. Now a days everyone has some kind of MP3 device to play music. In this tutorial i will teach you how to create a Stylish Audio Player interface in Photoshop to play audio files for your Flash projects.

Step 1

Create a new document (600 x400px) and create a background in which we can apply a dark radial gradient from BCCE62 to 3B521E with 150% scale.

Note: You can use colors of your own choice.

Step 2

With the rounded rectangle tool (set a 20 pixels radius) create the main box for the device using a shape layer.

 

Step 3

Double click on the this white box layer, its color editor will open up. Select a light grey color #E1E0E0 that will allow us to add some glow to the surface. 

Step 4

Now Create guides around the device. To do this click the convergence angle of both rulers. By dragging the mouse you will be able to visualize the dotted lines that precisely determine where the cursor is placed. This will allow us to create an equidistant bevel around the device perimeter.

Note: If you are unable to see any rulers, Goto to View > Rulers or Press Ctrl+R

Step 5

Create a Duplicate of New Layer by hitting Ctrl+J and scale it Down. Now that we have a new shape layer for the bevel, we need to take the fill of this layer to zero, as we just want to see a bevel on the surface.

Step 6

Now Right Click on Inner Layer and Select Blending Option. Now apply a 1 pixel stroke to the Inside position using a darker color than the device front. In this step we will create a line that represents the joint gap between the body and the front of the player.

Step 7

Now apply an Inner Glow with 2 pixel line using the values below.

Step 8

Now add a gradient to give the idea of convexity to the device’s front.

Step 9

Now add a line that will work as an extrusion to give the illusion of a 3D object. Add a 3 pixel grey (C9C9C9) stroke in the outside position.

Step 10

Now add Bevel & Emboss for light to the upper area of this line. Now the object seems to have an extrusion towards back that receives light from above and becomes darker at the base.

Step 11

Add a soft, small inner shadow to this layer to highlight even more the player’s front.

Step 12

Now, by duplicating and editing the front’s bevel layer, we generate more bevels that will represent the different control buttons of the device.

Step 13

To make the mask hide the object and its layer style, click the option “Layer Mask Hides Effects” on the styles window. If we do not choose this option, the mask will only hide the object but will show the effect outside the mask and we want to keep that hidden.

Step 14

First we use the drop shadow to create a bottom bevel where the light coming from above will hit. Use the values shown on the picture to configure the style to make it sharp and clear and not dark and blurry.

Step 15

We have now finished the front of our Audio player. Now we will need to add some icons to the buttons and text inside the display.

Download Font 1
Download Font 2
Download Font 3

 

Step 16

Paint the shadow of the player in a new layer using a 2 pixels softened circular selection (see upper value menu of the tool).

Step 17

Finally, let’s add a slim wire that will give more realism to the player. To do this, draw a curved shape layer using the pen tool.
 Take it to 0% opacity and add a stroke with the same grey tone of the player’s surface.
Separate the stroke from the shape layer that we created, as we need to add some shading to this wire. Right click on the fx icon next to the layer and choose Create Layer.

Conclusion

Our Audio Player is now ready to be exported as a transparent PNG and coded in Flash to be used on websites.

You can Download PSD Version Here.