Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In this tutorial, we will design a sleek and clean MP3 player interface. The process involves a lot of manual drawing and lots of layer styles. Let’s get started!
The following assets were used during the production of this tutorial.
Step 1: Background
Let’s start by creating a background for our mp3 player. Draw a radial gradient from white to gray.
Darken the gradient by adding Adjustment Layer Hue/Saturation. Reduce the Lightness setting.
Create a new layer and fill it with white. Make sure you have white and black as foreground and background by pressing D. Click Filter > Noise > Add Noise. Set Distribution to Uniform and select Monochromatic.
Change the blending mode of the layer to Multiply.
Duplicate layer by pressing Command/Ctrl + J. Invert layer by pressing Ctrl + I. Move layer 1 px left and 1 px down by activating tool move then press left arrow then down arrow. Change blend mode to Screen.
Put both noise layers into a group folder and reduce its Opacity to 50%.
Step 7: MP3 Basic Shape
Create a rounded rectangle on the canvas. Use #3b484f as its color. Add following layer styles.
Step 8: Screen
Draw a smaller rounded rectangle. Add following layer styles.
Step 9: Album Info
Add a small rounded rectangle. We'll use it as a container for album cover. Add following layer styles.
Paste a picture on top of the rounded rectangle. Hit Command/Ctrl + Alt + G to convert it to clipping mask and put it inside the rounded rectangle.
Add artist info, album's name, and its year underneath the album cover.
From the option bar, you need to select the best Anti-aliasing methods to prevent blurry appearance. I can't say which one is better because it's different for each font type and size. You need to experiment with each setting. As you can see below, in this case None works best.
Step 13: Equalizer
Draw a rounded rectangle. Add following layer styles.
Create new layer. Paint white using using a soft brush (Hardness: 0%) with low Opacity (10-15%). This will add a subtle light source under the equalizer.
Select line tool and set its weight to 1 px.
Draw a white line inside the equalizer. Activate zoom tool and click few times to zoom in to maximum view. We need to make sure that the line is not blurry. As you can see below, there is blurry spot on both ends of the line.
There are two ways to fix this blurriness. First we need to round up the size. Second is fixing its placement.
Hit Command/Ctrl + T to transform the line. Right click Width (W) box and select pixels. Do the same to Height (H) box.
We need to round up the size. In this case we will need to change 11,97 px to 12 px.
Next, let's fix its position. Select line shape with tool Path. Hit arrow key to fix its position. Do this until we have no blurry spot.
Duplicate and transform the line by pressing Command/Ctrl + Alt + T. Move it upward 3 px..
Repeat the duplication and transformation process by pressing Command/Ctrl + Shift + Alt + T.
Select all lines, duplicate it and place it to the right. Remember to keep it sharp. Make sure the position is perfect to avoid blurry spot.
Repeat this process until we have some columns of 1 px height lines.
Delete some of the lines until we get a natural shape of equalizer. Add following layer styles. Set Fill to 0%.
Step 25: Song Info
Add artist name, song title, and total track time on top of the equalizer. I'm using font type LCD Phone here. The Anti-aliased Method used here is None.
Below, you can see the result with each Anti-aliased method.
Add more text for more info on top of the LCD. Use Pencil tool to draw a small black 1 px line separating each text. Erase both ends of these lines.
Hit Command/Ctrl + 1. Let's step back and see the result we have so far in 100% view. This is important to make there's no blurry spots in our design.
Step 29: Main Buttons
Draw a small rounded rectangle for the button.
Again, we need to check its size and position to avoid blurry spots. Hit Command/Ctrl + T and make sure to round up its size.
Make sure to check its position, we don't want to see blurry edges.
Add following layer styles.
Draw a black triangle on top of the button. Add Drop Shadow with following settings.
Repeat the process to create more buttons.
Create button background made from two overlapping rounded rectangle. Add following layer styles.
Let's step back again and take a look at the design in 100% view. We need to make sure that there is no blurry spots.
Step 37: Total Time Track
Create a long rounded rectangle. Add this following layer styles.
Duplicate layer shape we have just created and add these layer styles.
Add layer mask. Select half of the shape and fill it with black.
Currently, layer styles are applied to the layer mask and they are adding a rounded shape on right end of the shape. To remove this, activate Layer Mask Hides Effects from layer style dialog box.
You can see the difference below. The effect from layer style is now hidden by the layer mask.
Create bigger rounded rectangle behind the time indicator for its background. Add this layer style.
Create new layer on top of the time indicator background. Paint some highlight and shadow. You can see the progress I made below.
Step 43: Right Window - Playlist
Create a rounded rectangle and place it on right side behind the main shape. Add following layer styles.
Create new layer on top of the rounded rectangle shape. Paint some highlight and shadows.
Create some triangles and place them on right side of the shape. Add following layer style.
Use pencil tool to draw two 1 px line, black and white. Set its opacity to 10%.
Add layer mask and paint some parts of the line with black. Below you can see the mask used here.
Draw a rounded rectangle and add following layer styles. Set Fill layer to 0%.
Add song titles. Set one of the songs to bold to indicate it as an active song.
Add Drop Shadow to give it inset effect.
Draw a rounded rectangle. Add following layer styles and set its Fill layer to 0%.
Create a plus sign made from two overlapping line shape. Set Fill to 0% and add these layer styles.
Repeat the process to create other buttons.
Step 54: Left Window - Player Settings
Duplicate playlist basic shape. Hit Command/Ctrl + T, right click and choose Flip Horizontal. Move it to left side.
Draw a thin rounded rectangle and add these layer styles.
Create a small rounded rectangle for the slider. Add following layer styles.
These layer styles is still not enough to get a convincing 3D appearance. Using pencil tool, we need to add some 1 px line detail on the slider. See picture below for reference.
Let's step back and see the result in 100% view.
Paint some black stripes behind the slider.
Let's add label "VOLUME" for the slider. The font used is Digital-7. Add Drop Shadow.
Create another slider by duplicating previous slider and change its label.
Now let's focus on creating balance slider since this is a bit different. Add more space between the slider and its label. Delete stripes behind the slider. Use pencil to draw alternating 1 px black and white line. Set the layer's Opacity to 10%.
Add plus (+) and minus (-) character on both ends and add Drop Shadow.
Hit Command/Ctrl + 1 to see the result at 100% view.
Step 65: Highlight
Our design is simply too clean and unnatural. To fix this let's add some highlights. Draw a white 1 px line using pencil tool. Delete both ends.
Repeat this process to create another highlights.
Step 67: Shadow
Hold Command/Ctrl and click basic shape, playlist shape, and player settings shape to create a new selection based on the mp3 player's shape. Press down arrow a few times to nudge the selection down.
Create new layer underneath all other layers. Fill selection with black. Presst Command/Ctrl +Shift + I to deselect. Soften the shadow by adding Gaussian Blur filter.
Step 69: Reflection
Let's add reflection onto the surface of the mp3 player. Copy screen path (1). Click Adjustment Layer icon and select Solid Color. You can use any color here. Create another path covering top part of the screen and set it to Intersect (2). Change Opacity to 2% and Fill to 0%.
Now we'll create another reflection on outter side of the main window. Create new path covering top part of the main window (1). Click Adjustment Layer icon and select Solid Color. Subtract it with screen shape path (2). Intersect it with main window shape path (3).
Set Opacity to 23% and Fill to 0%. Add following layer styles.
Below, you can see the difference with and without reflection.
Next we will add reflection on left and right window. Copy left and right window path, set their mode to Add (1). Click Adjustment layer icon and select Solid Color. Subtract path with the main window path (2). Create new path covering top part of the interface and set it to Intersect (3).
Set Opacity to 10% and Fill 0%.
Below, you can the difference with and without reflection. Very subtle but it gives more depth onto the shape.
Step 76: Interface with Closed Playlist and Settings
Put all shapes and layer that create the mp3 player into a group folder. Duplicate the group and move the left and right window until they are closed.
Step 77: Sharpening
We have tried to sharpen every pixel on the interface, we still need to sharpen it again. Create new layer on top of all layer. Hit Command/Ctrl + Shift + Alt + E to merge all visible layers. Now, we have exact duplicate of the image in one single layer.
Click Filter > Sharpen > Unsharp Mask. This filter will sharpen all the pixels on the layer.