Total Followers 132,503
In this tutorial you’ll learn how to make a beautiful music player in Adobe Photoshop. It is important that you take the time when you are designing and do not rush things. I focused on the details so I invite you to look at every little thing carefully and think about why I did it and how you can learn from it! Good luck!
Final product:
Okay so let’s begin! The canvas size depends on the size of your music player, my canvas is
1000 x 500px. Please make sure that you are using 72dpi before you create your new canvas.
You should have a nice canvas size to work with now, but if you’ve looked closely at the end
result, I’ve used a pattern on the background. Here’s where you’ll need the subtle patterns, load
the .pat file and pick a pattern you like and reduce the opacity.
Now that we know what the background looks like, we can make a nice color palette.
Let’s start by creating the base of the music player. Grab your rounded rectangle tool (U) and
make sure that the radius is set to 3px. I’ve used a gradient for the stroke because the bottom of the player would’ve ended up looking blurry.
These are the blending options I used:
You should have a pretty nice background for our player now, but there’s something missing. So let’s make it more glossy!
Select the rectangular selection tool (M) and make a selection at the bottom of the music
player’s background. Now that you’ve made a selection we can select the gradient tool (G), grab one color for the gradient and keep the other one transparent to accomplish a nice glossy effect.
You can deselect (cmd + d / ctrl + d) your selection after you made the gradient, since the layer underneath the gradient has a gradient overlay it’s not possible to make a clipping mask. So what we basically do is make a selection of the layer underneath and select inverse, you can
make the selection by ctrl or cmd click the box which I gave a red stroke.
You will need to use the first two colors of our palette to make the gradient of the background of the
album cover. Duplicate the background layer of our music player and make sure you put the
layer above the player’s background and glow. Rasterize the layer and make a nice square
selection, select inverse and press delete. You should have something like this:
But hey – wasn’t the background of the album cover blue?! Yes it is, so now we have to disable the layer styling and start adding new blending options.
Now that we have the base ready we can design the picture frame, just grab your rounded
rectangle tool and make a nice square frame. Please make sure that you give the picture frame area to breathe, I gave my cover a 20 pixel margin on all sides. We will have to use the blending options panel again to give the picture frame a nice border.
Great! the frame is ready so now we can add a nice picture of Nadia Ali, just open the image with Photoshop and create a clipping mask, resize the image where needed. But we are not ready yet, we still need to add the glare, select your pen tool and make a nice curve, fill the path (#FFFFFF) and reduce the opacity to 20%.
The last thing you have to do is make a group of your album cover section, select the layers that are related to the album cover and press cmd or ctrl + g, rename to group to whatever you want.
What is a player without controls, right? So we are going to make a nice play/pause button, previous and next buttons.
Select your Ellipse tool(U) and drag a nice round circle, make sure that you hold shift. This first circle will be the blue stroke around the pause button, the requires some blending options.
Okay we have a nice blue circle now, just make a new circle on top of that circle with some
spacing on all sides. this circle will only need a gradient overlay.
Now you have to add a nice icon to the button to make it look like a play/pause button. Add a nice gradient and inner shadow to the icon.
The play/pause button should be done by now. Now we’re going to make the previous and next buttons, these buttons require the same styling as the play button, so copy the layer style and paste it on those icons.
Also add these layers to a group and call it ‘Controls’.
This step only requires 2 layers. This step can be accomplished with one single layer but I
personally prefer to make two separate layers.
The text color of the artists & song title is #2c69b4, the font size of the artists is 18pt and the font size of the song title is 12pt. Both are Helvetica neue 55 roman, and both layers have a white 1px drop shadow.
Make the love button
Let’s start with the love button, the love button has a nice orange gradient when hovered or
activated. Make a button with a nice size with the rounder rectangle tool, please be aware of the icon that we have to be put in later.
Now that you have a rounded rectangle shape you’re ready to give it some blending options.
You should have a nice orange button if you’ve done this, but it’s not shiny enough, so we are going to repeat the step that we did to make the glow for the background and it should be fine.
Now it’s time for the icon to take place, take the custom shape tool (U) and find the heart shape, make sure that you hold shift while you make the icon. After you’ve done that, make sure that it’s white so that we can add a nice inner shadow to the icon.
Make the repeat button
Okay so now we have the love button. Add the layers that belong to the love button to a group, rename the group to ‘like button’. Duplicate the group and call the group ‘Repeat button, because the button is almost the same as the love button, we only have to redo some blending options.
Remove the heart icon and add a nice repeat icon to the button, also this icon has to be white (you can always make it white by color overlay).
On the button:
On the icon:
The track length bar we’re going to make has a stream, buffered stream and a played track. But we are going to start off by writing the track length text.
The track length text is written in 2 different colors the passed time text is #717171 and the
complete track length is #2c69b4. Add a 1px white drop shadow to the text and you’re done.
Make sure that you give this bar 20px margin from both sides to make it align well. Make a
shape with the rounded rectangle tool.
Buffered track
Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. Make sure that you change the angle of the gradient to 180 degrees.
Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.
Designing the background of the track list is simple, it’s simple because you can just copy the layer style & glow from the background of the player. Just make a wrapper for the theme songs with the rounded rectangle tool and paste the layer style on the layer and don’t forget to add the glow.
Now we only have to display the songs, make another rounded rectangle and make sure that you have 20 pixels free space from both sides. This one will look a a bit different from the others, so you can’t copy a layer style. Please make sure that the background of the shape is white, otherwise the gradient won’t work.
Add the number of the song, and full name of the song in that rectangle and give the text the color #717171 and 1px white drop shadow. This is the same styling that you need to add to the track length indication.
Duplicate the love button and place it in the track’s shape, copy all the layer styles of the repeat button (or you can leave it this way if you want it to stay orange).
Add all the layers that belong to the track to a group.
Duplicate this group 3 times and place them underneath each other with a 10 pixel margin. You are almost done now, the only thing that we need to do is design the current song indicator. Pick one song and do the same thing as we did with the background for the album cover and add a Now playing text. This text is written with Helvetica neue 65 medium, has a white color and has a 1px #1c5297 drop shadow.
Yay we’re done! I hope you’ve enjoyed reading this tutorial and I highly recommend you to
make your own suggestions to make sure you’ve understood everything well.
And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!
Get The Only Freelancer crash course you will ever need to read!
Monday, March 19th, 2012 17:17
Thanks a lot Thilip! You can always use websites like colourlovers & kuler if you’re not too good at picking colours ;)
Tuesday, February 28th, 2012 06:56
Wow, very comprehensive review. I’m thinking about learning HTML5. I’m seeing more and more job/freelance listings asking for html5 media player knowledge and so along with reading some of the online references you listed, I’m going to have to pick up the book as well. Really appreciated the chapter breakdowns.
Saturday, January 21st, 2012 11:43
Good color combinations
Saturday, January 21st, 2012 23:10
thank you for comment, Davey is great designer and I thank to him for contributing here! glad to hear thumbs up from you too!
Friday, January 20th, 2012 12:56
Awesome tutorial but the worst thing is we can’t listen songs :(((
Friday, January 20th, 2012 00:10
Awesome!! Pretty bad that photoshop doesn’t play any songs !! :(:(
Friday, January 20th, 2012 06:40
Also pretty bad that music players don’t design themselves! :(
Tuesday, January 24th, 2012 22:06
Rean, i agree but… Where is the tutorial that explain how to construct this PSD design in a Adobe Flash for final user can play music?
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
jakerooster
Friday, January 20th, 2012 12:56
Awesome tutorial but the worst thing is we can’t listen songs :(((
alex
Friday, January 20th, 2012 00:10
Awesome!! Pretty bad that photoshop doesn’t play any songs !! :(:(
Rean John Uehara
Friday, January 20th, 2012 06:40
Also pretty bad that music players don’t design themselves! :(
Leonardo Narciso
Tuesday, January 24th, 2012 22:06
Rean, i agree but… Where is the tutorial that explain how to construct this PSD design in a Adobe Flash for final user can play music?
Mohsin Nazir
Saturday, January 21st, 2012 11:43
Good color combinations
Dainis Graveris
Saturday, January 21st, 2012 23:10
thank you for comment, Davey is great designer and I thank to him for contributing here! glad to hear thumbs up from you too!
Davey Heuser
Monday, March 19th, 2012 17:17
Thanks a lot Thilip! You can always use websites like colourlovers & kuler if you’re not too good at picking colours ;)
farook
Tuesday, February 28th, 2012 06:56
Wow, very comprehensive review. I’m thinking about learning HTML5. I’m seeing more and more job/freelance listings asking for html5 media player knowledge and so along with reading some of the online references you listed, I’m going to have to pick up the book as well. Really appreciated the chapter breakdowns.