Download The PSD…
Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it. 
2. Next thing we need to go to our tools pallet and get out our rounded rectangle tool, and make a rectangle similar to the one shown below with a 5 px to 10px radius. This will serve as the overall background to our MP3 Player.
3. We want to add a slight gradient to that layer, so right click the layer you just created and choose blending options and insert the following:
4. Now, we want to use our rounded rectangle again and make a rectangle inside the background of your MP3 Player that looks like the image below:
5. Right click this layer and choose, Rasterize layer. Then go to your Marquee tool and make two selections like the one below. To make two selections at once, just hold the shift key while making the second selection:
6. Now just go to EDIT>CLEAR and then deselect. Your document should look something like this:
7. Now, we want to add a little bit of detail to this, so we are going to add a gradient to that layer. To do so, right click the layer, and choose Blending Options and input the following:
8. Next, lets create a new layer where the screen will be. Using your magic wand, make a selection of the inside of your previous layer, and then fill it with #000000 on your new layer.
9. Now, right click that layer and choose blending options and put in the following:
10. Lest now create the back for where the controls on the MP3 Player will be placed at the bottom. So we need to use our Rounded Rectangle Tool again. With it make a rectangle like the following to fill up the bottom of the MP3 Player:
11. On this layer, we want to go ahead and add some blending options as well. So right click it, and choose Blending options and insert the following:
12. Next we want to make a few dividers for the controls. To do so we want to create a new layer, and get our Marquee tool out. Make a selection about a couple pixels wide, and just fill it with white.
13. Now, right click that layer and put in the following blending options:
14. Next, just copy that layer (I have 5) and then place them in equal length across the bottom of your player. It will look something like this when your done:
15. Now lets add a little shine to our controls at the bottom. With the Marquee tool create a selection similar to the following and fill it with white on its own layer above everything else:
16. Change the blend mode to Overlay, and lower the opacity to something around 78% and it will look similar to this:
17. Now, we need to look at that box in step 4, as we are actually going to go back and add a bit of a shine to that as well. So, create a new layer direction above that box layer, and under the screen layer. Make a selection like the following, and fill it with white:
18. Lower the opacity to about 18% on this layer, and you should be giving a nice little shine in the back:
19. lets go ahead and work on how the buttons will be displayed on the controller.
20. All you need to do is use the polygonal lasso tool to create the shapes you need for all the different icons. Once we create once icon, you can use the same method for the rest. To start, we will do the play icon. So using the polygonal lasso, make a triangular shape like the one below, and fill it with white:
21. We now want to add a couple layer styles to it, so right click that layer and choose blending options and insert the following:
22. It should now look something like this:
23. Now, using that same method in steps 20 and 21, do the other icons and when your finished, it will look like the following:
24. All left to do now is create some of the elements on your media players screen. We will go ahead and come up with a unique playback bar to display how much time has passed in a song. So to do so, we want to use our rounded rectangle tool yet again, and set it to around a 4px radius, and the foreground to #ACACAC. Make a similar sized rectangle as the one below:
25. Now, go ahead and make a selection like the one below and fill it with #959696 on its own layer.
26. It should turn out looking like this:
27. Now, we want to copy the rounded rectangle you created, and place it over the other one. This is the bar that will display how much time has passed. Selected a little under half of it and delete it. Example below:
28. Now, we want to add some different blend modes to this layer. So right click it and choose blending options and put in the following:
29. Now we want to add a shine to the blue bar, so we are going to select half of it, and create a new layer and fill it with white. Change the the blend mode to Soft Light, and the opacity to about 52%.
30. Now all thats left is to add a ‘ball’ where the two colors meet. To do so pull out your eliptical marquee tool and make a selection similar to the following:
31. Fill it with #FFFFFF and then input these blending options on that layer:
32. After doing so it will turn out something like this (i added a little shine on the top):
33. Now all that you need to do is add some text, album covers, and you’ll be on your way! I used the same bar for volume as I did for the playback. After doing so it will look something like this:
34. And after a gradient and a reflection on the player, you can get something like this…
**If you have any problems, or have any questions about this tutorial. Please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.
discuss this topic to forum
