Create a Sleek and Stylish MP3 Player in Photoshop

One of the best ways to learn how to create amazing interfaces it to practice by creating electronic devices in Photoshop. These days just about everyone has some kind of MP3 device to play music. In this tutorial we will demonstrate how to create a sleek, stylish, and simple MP3 interface in Photoshop to play audio files for your Flash projects.

Step 1

The first step is to create a background in which we can apply a dark radial gradient. Paint the layer in any color and add a layer style with the gradient shown below.

Step 2

With the rounded rectangle tool (set a 20 pixels radius) create the main element of the device using a shape layer (clicking the first option of the upper menu).

Step 3

Double click on the vector of this layer, its color editor will open up. We will select a light grey color #E1E0E0 that will allow us to add some glow to the surface. Every time you want to create white objects you will have to add a bit of grey color so you can light them up or add some glow to make these resources quite visible.

Step 4

Now we will create a bevel around the device. To do this we will need to create some reference guides using Photoshop’s rulers. 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.

Step 5

Now that we have a new shape layer for the bevel, we need to take the opacity of this layer to zero, as we just want to see a 2 pixel bevel on the surface.

Step 6

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

Apply an Inner Glow with a 2 pixel line using the values below.

Step 8

Add a soft gradient to give the idea of convexity to the device’s front.

Step 9

Now we will take care of the player’s edge. To do this, add a line that will work as an extrusion to give the illusion of a 3D object. Add a 2 pixel grey stroke in the outside position.

Step 10

Using the Bevel & Emboss style we add 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

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

Now edit the shape layer to create the main Play/Pause button of our player. Let’s duplicate the first bevel and take the borders inside to make a circular object. Then enlarge it 10% as we only need the horizontal bevels.

Step 14

Apply a soft 3 pixel mask to the shape we created in step 13 as shown below.

Step 15

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 16

This same mask will also be useful for the other bevels; we can take it from the layer we masked before. By clicking the right button of the mouse over the mask icon inside the layer, we choose “Subtract Layer Mask from Selection”. This will create an identical selection to the previous one.

Step 17

With this selection we repeat the mask selection conversion step.

Step 18

We already have the separation bevels of our main button set. Now we need to create a shape layer for the player’s display: a black acrylic screen where the name of the song and the time will be shown.

Step 19

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 20

Now we need to create a radial gradient. Take both black and white colors to as near the center as possible from each other so there is not so much softness between both colors. Location of black 49%, location of white 50%.

Step 21

Unclick the option Align with Layer. If we do not do this, the gradient will only be from the center of the object to the edges and we want this gradient to be much bigger and wider.

Step 22

After producing your glossy effect, finish this style with a couple bevels similar to the ones we created for the button step. Use a black 1 pixel stroke with the stroke aligned to the inside. Use an Inner Glow, 2 px in size with the blending mode set to screen.

Step 23

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

Step 24

Now let’s simulate the text scroller on our display. Using a pixelated font we need to add the interpreter name and the song name that will be played. You can use this free font. Remember to remove the aliasing in the Character window in the upper menu of the text tool to keep the text looking sharp.

Step 25

With another bitmap font we create the chronometer that indicates the time passed. This font is also free and you can get it here.

Step 26

Now use a font that has the usual icons and symbols of an audio or video player. You can use this one. Once it is installed use it to create the different buttons of the player, in this case, the Play/Pause control (you will have to create two states for the button when you develop this player, as the Play button becomes the Pause button when it is pressed and vice versa).

Step 27

For this symbol we use the same color as the one we picked for the front surface of the object. With the color selection tool we can paint the text.

Step 28

Now we can include various styles that make this symbol look like bas-relief. Use the corresponding values below for the inner shadow.

Step 29

Lighten up the bottom bevel using these values.

Step 30

Use a soft and small width gradient to the surface of the depression so it is not so boring.

Step 31

Let’s create the volume control. Draw a small knob button with a polished metal finish. Start with a circular shape layer.

Step 32

Use a drop shadow to create the illusion of a big extrusion.

Step 33

With a gradient in Angle mode and several grey and white stripes we can simulate the circular polish of this kind of button. Make sure that initial gray color on the left is the same as the final gray color on the right.

Step 34

Finally, add a stroke with a gradient fill. This will add the bevel on the perimeter. Follow the values on the picture carefully.

Step 35

We have now finished our volume control button but we also want to add a mute button. You can do this using layer styles.

Step 36

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 37

Hide the selection with Ctrl+H and use a 100 pixel brush with 10% of the paint flow, paint the shadow softly. This will make it more intense at the center of the object.

Step 38

Now let’s add a little glow on the player’s display edge. First, paint an intense bright area in the center of a rectangular selection that is 1 pixel high. And then, with the same brush but without any selection click several times to increase the intensity of the center.

Step 39

Create a rollover effect on the main button to make the front surface pop when the mouse passes over. We start by creating a circular shape behind the Pause icon.

Step 40

This depression effect can be done with: drop shadow to darken and soften the object’s edges, and a gradient to simulate that this depression has an upper area that is in shades, as the button was pressed down.

Step 41

We also hide this rollover with a mask as we did with the bevels of the main button set. Remember the option of hiding layer effects at the same time.

Step 42

Repeating the previous steps we mask the rollover.

Step 43

We will add two light effects to enhance the rollover. By painting with 2 colors (#00CCFF for the edge of the effect and white for its center) we create a lighted edge that we will mask. Duplicate the layer and reflect it vertically to make it look as if it lights up at the top and the bottom as the mouse passes over. This layer must be set to “Screen” to integrate the glows better.

Step 44

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.

Step 45

Take it to 0% opacity and add a stroke with the same grey tone of the player’s surface.

Step 46

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.

Step 47

This action separates the stroke in a new layer without destroying the shape formerly drawn. Use an inner shadow to give the idea of a cylindrical emboss to this line.

Conclusion

Our MP3 Player is now ready to be exported as a transparent PNG and coded in Flash to be used on websites. You can view the final image below or view a larger version here.