MP3 Player Interface

This tutorial should be fun, creating your own mp3 player! This tutorial could probably be used for anyone wanting to make a start on skinning, or maybe you just want to make an interface using an mp3 player style. Anyway, this is a slightly longer tutorial but I'm sure I'll get you there in the end!Start by creating a new document, I created mine as 720x540 with a background of White and a background of Black.

First of all we need to get the shape of our mp3 player, so to start with we'll use something simple; our Rounded Rectangle Tool. Set the radius of the tool to 6 then draw yourself a nice sized rectangle on your screen. This is how big mine is:

Now we have our rectangle we can start properly, add a gradient overlay with the following settings:

*NOTE* The gradient I have used is not a default gradient, you will have to make it yourself with the following settings:

So now we have set the gradient, we need to set the following settings as well:

Now you should have something that looks like this:

Now we have the layout of the mp3 player we need to start adding it's features, so first we'll start by creating a screen for it.

Select your rounded rectangle tool again but this time set the radius to 4 and make yourself a nice sized screen, this is how mine looks:

Set the following settings to it:

Again, this is a custom gradient, here is the colors I used:

Now add the rest of the settings:

Done this? Cool! - so you should have something like this:

Now we're going to add a shine to the screen, so CTRL+Click the shape so it's highlighted and create a new layer above the shape and name it shine.

Now go to Select>Modify>Contract and set the contract to 2 Pixels.

Your screen should look like this:

Grab your gradient tool and set the Foreground to Transparent gradient and make a gradient within the dotted line and you should end up with something like this:

Now press CTRL+D to deselect the layer.

For those who have read my Shine tutorial you should know how to do this already - Anyway, use your Circular Marquee Tool and make a circle on your interface like this:

Now press delete, and you should end up with something like this:

This is starting to look good right?

Now then, for the images for the screen of your mp3 player, these things can be tricky if you don't know what you're doing, so there's a font I found which does them for you - you will need to download the font which can be found here

Once you have installed the fonts, you can start adding stuff to your screen, here's what I ended up with:

I only added a couple, I didn't want to over do the screen, you can add what you want though!

now we have our screen completed we can start on some buttons, create a new shape using your Rounded Rectangle Tool and make the shape about this size:

Add the following settings:

Again the gradient is custom, I used the same gradient as before but I made the blue slightly darker.

Now we have your button, we need to add another shine, CTRL+Click the layer to highlight it, create a new layer above it then Select>Modify>Contract and again by 2 pixels, just like we did for the screen. We're using the exact same technique as before, for those who have done the glass shine tutorial, this bit should be a doddle!

Again do the same as we did before and use the Circular Marquee Tool to cut out the bottom of the shine - you should now have something like this:

Duplicate the layers so you have 3 buttons like I have below:

We're nearly done! Ok now we need to add some button signs, I chose to have play, pause and stop - you can add more buttons it's entirely up to you.

Here's how mine is looking after I added some icons:

Now to add some finishing touches, highlight your original shape and create a new layer above it, then contract it by 2 Pixels

It should look like this:

This time you need to do a gradient going up, like this:

Now press CTRL+D to deselect and bingo, you've got a nice mp3 player interface!

Here's another one I made using the same technique,