Create A Sleek Music Player In Adobe Photoshop

Posted in Tutorials, Web Interface • Posted on 8 Comments

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:

What you’ll need:

PSD Download

Prepare your tools

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.

Start designing the player!

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:

  • #000000 drop shadow

  • #FFFFFF inner shadow

  • #f7f7f7 to #ebebeb reversed gradient

  • #bcbcbc to #d4d4d4 stroke gradient

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.

What you should have this far

Lets make the album cover

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.

  • #ffffff inner shadow

  • #2961aa to #45a6fa gradient

  • #1c5297 stroke

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.

  • #3379c6 drop shadow

  • #2961a9 inner glow

  • #164c91 stroke

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 you should have this far:

Making the controls

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.

  • #000000 inner glow

  • #2961aa to #45a6fa gradient

  • #1c5297 stroke

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.

  • #e8e8e8 to #f6f6f6 gradient


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.

  • #000000 inner shadow

  • #e8e8e8 to #f6f6f6 gradient

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’.

What you should have this far:

Give the song a name

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.

What you should have this far:

Making the love and repeat button

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.

  • #FFFFFF drop shadow

  • #FFFFFF inner shadow

  • #db5825 to #ea6733 gradient

  • #bd530d stroke

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.

  • #bf540f inner shadow

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:

  • Replace inner shadow color with #FFFFFF and reduce the opacity to 25%
  • Replace the gradient with #d3d3d3 to #e2e2e2
  • Replace the stroke color with: #c1c1c1

On the icon:

  • Replace the inner shadow color with #c1c1c1

What you should have this far:

Make the track length bar

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.

Total track

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.

  • #000000 inner shadow

  • #000000 inner shadow

  • #e0e0e0 to #f1f1f1 gradient

  • #f8f8f8 stroke

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.

  • #FFFFFF inner shadow

  • #e8e8e8 to #f6f6f6 gradient

  • #8faed6 stroke

Played 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. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.

  • Crank up the opacity of the gradient to 100%
  • Give the stroke the color #1c5297

What you should have this far:

Design the tracklist

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.

  • #FFFFFF outer glow

  • #e1e1e1 inner glow

  • #d7d7d7 to #b4b4b4 reversed gradient

  • #d4d4d4 stroke

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.

What you should have this far:

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.

Final result

And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!

1 Written ArticlesWebsite

8 Comments Best Comments First
  • jakerooster

    Friday, January 20th, 2012 12:56

    3

    Awesome tutorial but the worst thing is we can’t listen songs :(((

    0
  • alex

    Friday, January 20th, 2012 00:10

    2

    Awesome!! Pretty bad that photoshop doesn’t play any songs !! :(:(

    0
    • Rean John Uehara

      Friday, January 20th, 2012 06:40

      1

      Also pretty bad that music players don’t design themselves! :(

      0
      • Leonardo Narciso

        Tuesday, January 24th, 2012 22:06

        6

        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?

        0
  • Mohsin Nazir

    Saturday, January 21st, 2012 11:43

    4

    Good color combinations

    0
    • Dainis Graveris

      Saturday, January 21st, 2012 23:10

      5

      thank you for comment, Davey is great designer and I thank to him for contributing here! glad to hear thumbs up from you too!

      0
  • Davey Heuser

    Monday, March 19th, 2012 17:17

    8

    Thanks a lot Thilip! You can always use websites like colourlovers & kuler if you’re not too good at picking colours ;)

    0
  • farook

    Tuesday, February 28th, 2012 06:56

    7

    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.

    0
  • Davey Heuser

    Monday, March 19th, 2012 17:17

    8

    Thanks a lot Thilip! You can always use websites like colourlovers & kuler if you’re not too good at picking colours ;)

    0
  • farook

    Tuesday, February 28th, 2012 06:56

    7

    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.

    0
  • Mohsin Nazir

    Saturday, January 21st, 2012 11:43

    4

    Good color combinations

    0
    • Dainis Graveris

      Saturday, January 21st, 2012 23:10

      5

      thank you for comment, Davey is great designer and I thank to him for contributing here! glad to hear thumbs up from you too!

      0
  • jakerooster

    Friday, January 20th, 2012 12:56

    3

    Awesome tutorial but the worst thing is we can’t listen songs :(((

    0
  • alex

    Friday, January 20th, 2012 00:10

    2

    Awesome!! Pretty bad that photoshop doesn’t play any songs !! :(:(

    0
    • Rean John Uehara

      Friday, January 20th, 2012 06:40

      1

      Also pretty bad that music players don’t design themselves! :(

      0
      • Leonardo Narciso

        Tuesday, January 24th, 2012 22:06

        6

        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?

        0

Comments are closed.

54.227.89.236 - unknown - unknown - US