Sign In  |  Join Now Become a member to add links and start earning points!

How To Create a Sleek Audio Player Interface in Photoshop

Posted by Jurgis Narvils in Photoshop Tutorials on December 14th, 2009

In this tutorial you’ll learn how to design a sleek audio player interface in Adobe Photoshop.

Materials Needed:

Step 1

Create a new document 600×400 px big.

Step 2

Image Description

Using the radial gradient tool from #5e6c78 to #20282e, fill the background.

Step 3

Image Description

Duplicate background and go to Filter-Noise-Add Noise. Use these settings: Amount:5%; Uniform; Monochromatic. Click Ok. Now lower the layer opacity to 30%. You should now have something like this.

Step 4

Image Description

Ok, let’s make the audio player now. Create new layer (Ctrl+Shift+N) and name it "Base". Using the Rounded Rectangle Tool, radius 5px, draw a rectangle like in the picture and use these blending options. Colors in the gradient are: #3d4a59; #1c2329; #303a44. Stroke color: #191919.

Step 5

Image Description

Now create a new document, 600x600px. Go to Edit-Fill-50%Gray. Then Filter-Noise-Add Noise with these settings: 80%; Gaussian; Monochromatic. Then Filter-Blur-Radial Blur with these settings: 100; Spin; Best. Press Ctrl+F to repeat it. You should have something like this now.

Step 6

Image Description

Copy the previously made image to the audio player document above the "Base" layer. Change the blending mode to Soft Light and Opacity to 80%. Let’s name this layer "Texture". Ctrl+click on "Base" layers thumbnail to make a selesction. Then press Ctrl+Shift+I to reverse the selection. Hit delete.

Step 7

Image Description

Create new layer. Name it "Higlights". Using Pencil tool draw two lines – one at the top of the base and one at the bottom. Erase the sides of the lines with a large soft brush and lower the opacity to 80%. To keep things more organised, select the previous three layers – Base, Texture and Highlights – and press Ctrl+G to gropu these layers. Name the group "Base".

Step 8

Image Description

Now let’s make the speakers on both sides. Create new layer. Name it "speaker". Ctrl click on the "Base" layer’s thumbnail to make a selection. Then take Rectangular marquee tool and while holding Shift+Alt drag across to get a selection like in the picture. Fill it with #3a3a3a. Dublicate the layer, name it "texture". Go to blending options and add these settings: Pattern Overlay with the attached "Spiderman pattern", Blend mode – Overlay and Scale 12%.

Step 9

Image Description

Create a new layer, name it "Highlight". Again using the Pencil tool draw a 1px highlight like in picture. Then create a new layer and name it "Shadow". Using Elliptical marquee tool draw a selection like in picture, fill it with black and go to Filter-Blur-Gaussian Blur, Radius 5. Erase all the unnecessery parts to get result like in picture and lower the Opacity to 50%.

Step 10

Image Description

Group the previous four layers – Speaker, Texture, Highlight and Shadow and name the group Speaker_left. Duplicate the group, flip it horizontally and place on the right side. Name it "Speaker_Right".

Step 11

Image Description

Let’s make the Close, Minimize and Maximize buttons. Create new layer, name it "Button". Using Rounded Rectangle tool, Radius 2px, draw a small button, fill it with white. Then add these Blending options. The gradient colors are #8799ab-#485664-#8799ab. Stroke color is #384251.

Step 12

Image Description

Create a new layer, name it "X". To get the X, you can either use a font you like or draw it with pencil tool like i did. I used a Gradient overlay (Dark grey-Lighter gray) and 1px drop shadow to get this effect.

Step 13

Image Description

Group the previous 2 layers and name the group "X". Then make the other 2 buttons by dublicating the "X" group and just changing the "X" layer. Again I used Pencil tool to draw the symbols.

Step 14

Image Description

Now let’s make the screen. Create new layer, name it "Screen Base". Draw a rectangle like in the picture and fill it with gradient from #303a44 to #4a5968.

Step 15

Image Description

Create a new layer. Name it "Gloss". Draw a smaller rectangle and fill it with White to Transparent gradient. Lower the Opacity to 10%.

Step 16

Image Description

Again using 1px white Pencil tool draw some highlights around. Just play with it to get results you like.

Step 17

Image Description

Let’s fill the screen with some content. Make a new group and Name it "Content". I’ll try to keep this part short and understandable. For each thing make a new layer. First, using a soft round brush add a highlight where the timer will be. Then, using a digital-looking font (I used a font called Digital-7, you can get it in DaFont) type in the 03:59 or any other numbers. Then type in the name of the track (I used font Walkway Bold). The, using Arial, type in Repeat and Shuffle. The Shuffle mode is on, so make it a bit lighter than Repeat. Then I added some small details using the techniques described before – 1px Pencil tool lines and some Round soft brush for light effects.

Step 18

Image Description

Create a new layer. Name it "Progress bar". Using Rounded Rectangle tool, radius 5px, draw a thin, long rectangle. Fill it with black and add these blending options: Gradient Overlay from #303a44 to #1c2329 and 1px Stroke, color #afbbc6, Opacity 16%. Now create a new layer and name it "Progress knob". Draw a small rectangle and fill it with black. Use these Blending options – Inner shadow: Blend mode- Normal, Color – White, Distance 0, Size 1; Gradien Overlay: #5c6977-#212a30-#5c6977; Stroke: Size 1px, Color #222b31.

Step 19

Image Description

Now there’s gonna be a lot of buttons to make. So make a new group and name it "Buttons". First we’ll make the base for the Play, Stop and other buttons. Create new layer, name it "Button Base". To get the shape I used a 5px Radius Rounded Rectangle tool and then drew the sides with pencil tool. If you want, you can make it simply as a rounded rectangle shape. Then add these Blending Options – Drop Shadow: Angle – -90 (Un-check the "Use Global Light"), Distance – 1, Size 0. Inner shadow: Blend Mode – Normal, Color – White, Angle – 90 (again don’t use the global light), Distance – 1, Size – 0. Gradient Overlay: #4d5c6a-#1c2329-#303a43.

Step 20

Image Description

Now we’ll add a lot of small details using just 1px Pencil tool and then erasing end of the lines. Just look at the picture to get the idea. Remember that you have to play with the Opacity to get nice results.

Step 21

Image Description

To make the Play, Pause, Stop, Forward and Backward buttons, I simply drew rectangles and triangles and combined them for the Forward and Backward buttons. Add this Gradient Overlay to the control button layers: #b7d9ed-#458fb2-#b7d9ed.

Step 22

Image Description

Now let’s make the final 4 buttons – Repeat, Shuffle, Playlist and Equalizer. All of them are going to be the same – just a small rounded rectangle with these Blending Options: Drop Shadow – Opacity 26%, Spread 100%, Size 1. Inner shadow: Blend mode – Normal, Color – White, Opacity 40%, Angle – 90, Distance – 1, Choke – 100%, Size – 0. Gradient Overlay: #3d4a59-#1c2329-#303a44. Then copy these buttons and place them like in the picture.

Step 23

Image Description

Now add the text. I used font Arial and these Blending Options: Drop Shadow – Opacity 42%, Angle 90, Distance 1, Size 0. Gradient Overlay: #4c5a69-#8495a7.

Step 24

Image Description

Once again add some small details with the pencil tool.

Step 25

Image Description

Now the last thing we’ll add to the interface is the volume control. First, draw the icon with Pencil Tool. Add the same gradient as the Playback control buttons (Play, Pause etc.).

Step 26

Image Description

Using the Rounded Rectangle tool, Radius 5px, draw a rectangle and add the same gradien as the Progress Bar.

Step 27

Image Description

Draw 10 small circles. The active ones will have a gradient like the Volume icon and the rest of them will have a simple Light gray to Dark gray gradient.

Step 28

Image Description

Let’s finish it and add some reflection. Merge all of the layers except the background. Duplicate it, add 1,2px Gaussian Blur, flip it Vertically and using Round soft eraser, erase the bottom.

Conclusion

So here it is – your finished audio player interface. You can try to make it a real skin for the Xion player. But if a lot of people would like to see a tutorial about making this design into a working skin, then I’d be glad to make a tutorial about that too.

Download the PSD

Download the PSD

117 Comments

  1. Add point Subtract point
    CerVanteZ (1 Point) February 24, 2011 at 1:26 pm

    Hey guys, I made a Flash Mp3 player out of it with AS3.

    Had to make so changes due to funcionality but it’s basically the player skin from the tutorial above.

    Enjoy it –
    http://sas-q4.de/memberupload/CerVanteZ/sleekyMediaPlayer.rar

    Flag as inappropriate
  3. Add point Subtract point
    preabsor (2 Points) January 6, 2011 at 3:23 am

    Hi,
    I wonder if you wold mind marking this interface working with C# or VB.NET or other…?

    Flag as inappropriate
  4. Add point Subtract point
    photoshopcs6 (0 Points) January 5, 2011 at 4:10 am

    Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
    http://lernphotoshop.co.cc

    Flag as inappropriate
  5. Add point Subtract point
    Joshua (1 Point) October 14, 2010 at 6:48 am

    This is nice. After doing this I would like to take it to a website. Can you point me in the right direction for getting it ready for Adobe Flex.
    Thanks in advance

    Flag as inappropriate
  6. Add point Subtract point
    Larry (1 Point) September 25, 2010 at 4:54 am

    Beautiful interface, and a very detailed list of instruction. I learned quite a lot of design techniques here, like highlights, textures, working with gradients, and most important of all, how to make CLOSE, RESTORE, and MINIMIZE icons!

    Flag as inappropriate
  7. Add point Subtract point
    Alan (1 Point) September 14, 2010 at 4:51 am

    Thanks for sharing, looked along way to find a nice interface.

    Flag as inappropriate
  8. Add point Subtract point
    Carol (1 Point) August 11, 2010 at 7:42 am

    That’s awesome! =D
    I loved it!
    Thank you soooo much!
    Very appreciated design! *–*

    Flag as inappropriate
  10. Add point Subtract point
    maldy (1 Point) July 22, 2010 at 5:18 am

    On step 19
    Inner shadow opacity 18%

    Flag as inappropriate
  13. Add point Subtract point
    Lethal Marketing (1 Point) June 22, 2010 at 9:00 am

    Wow! This looks fantastic! This could be used on a number of interface designs. Thanks

    Flag as inappropriate
  15. Add point Subtract point
    motion (1 Point) June 6, 2010 at 5:04 pm

    Great tut … you have great skills … hope you publish some more

    thanks

    Flag as inappropriate
  16. Add point Subtract point
    wSam (1 Point) May 31, 2010 at 8:20 pm

    that was good, it took ages with me but i made it, thanks

    Flag as inappropriate
  17. Add point Subtract point
    Imperiakupe (1 Point) May 13, 2010 at 12:24 pm

    We need player like this one on our new site! Great style!

    Flag as inappropriate
  18. Add point Subtract point
    Dobromir Ivanov (1 Point) May 8, 2010 at 4:18 am

    Amazing detail level !
    I’v learn a lot from this tut.
    Thx dude !

    Flag as inappropriate
  19. Add point Subtract point
    Boldis Media (1 Point) April 29, 2010 at 12:59 am

    Very attractive player design! We will try something like this in our new web project.

    Flag as inappropriate
  20. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 7:31 pm

    Fantastico!! thanks so much for sharing

    Flag as inappropriate
  21. Add point Subtract point
    Arjun (3 Points) April 22, 2010 at 2:34 pm

    Great Tutorial, I have used it here http://proj.arjun-g.com/silplayer/

    Thanks a lot.

    Flag as inappropriate
  22. Add point Subtract point
    Sam Logan (1 Point) April 14, 2010 at 7:46 am

    Great tutorial, the audio player looks fantastic and I love some of the techniques used, especially the highlighting ones.

    Flag as inappropriate
  23. Add point Subtract point
    romax (1 Point) April 13, 2010 at 4:05 pm

    Simpātisks darbs. Paldies!

    Flag as inappropriate
  24. Add point Subtract point
    C-Red (1 Point) April 12, 2010 at 2:15 am

    Awesome tutorial. I am really interested in finding out how turn this into a working skin. Please gif you can… give me some info on that. Keep up the great work and have a nice day. Peace & blessings… Thank you

    Flag as inappropriate
  25. Add point Subtract point
    C-Red (1 Point) April 12, 2010 at 2:14 am

    Awesome tutorial. I am really be interested in finding out how turn this into a working skin. Please gif you can… give me some info on that. Keep up the great work and have a nice day. Peace & blessings… Thank you

    Flag as inappropriate
  26. Add point Subtract point
    Zack (1 Point) March 30, 2010 at 4:42 am

    I really like this tutorial but I would really appreciate if you could explain how you made the “Button Base” in step 19

    Flag as inappropriate
  27. Add point Subtract point
    Freed (1 Point) March 23, 2010 at 11:39 pm

    I hung in there at first but some of the images actually made me dizzy. I couldn’t take it anymore. I’ll check back and see if I can make it through

    Flag as inappropriate
  28. Add point Subtract point
    Apik (1 Point) March 23, 2010 at 6:15 pm

    great tut, thanks for sharing

    Flag as inappropriate
  30. Add point Subtract point
    Syed (1 Point) March 11, 2010 at 4:58 am

    stylish.

    thanks for providing.

    Flag as inappropriate
  31. Add point Subtract point
    Om (1 Point) February 22, 2010 at 1:10 am

    Thanks buddy its realy good for proffesionals.

    Flag as inappropriate
  32. Add point Subtract point
    MrCrispy (1 Point) February 21, 2010 at 3:17 am

    You are a beast !!! Thanks for the awesome tutorial !

    Flag as inappropriate
  33. Add point Subtract point
    deppe (1 Point) February 11, 2010 at 12:10 pm

    you’re SUPER SMOCKIN’ SICK STYLISH,Jurgis!!!I am a interface designer and also a gamer. Thanks for your enlightment!

    Flag as inappropriate
  35. Add point Subtract point
    เนื้อเพลง (1 Point) February 2, 2010 at 11:39 pm

    its very nice. Great post33

    Flag as inappropriate
  36. Add point Subtract point
    ฟังเพลงใหม่ (1 Point) February 2, 2010 at 1:24 am

    its very nice. Great post20

    Flag as inappropriate
  37. Add point Subtract point
    โค้ดเพลงhi5 (1 Point) February 1, 2010 at 2:40 am

    its very nice. Great post14

    Flag as inappropriate
  38. Add point Subtract point
    โหลดเพลงฟรี (1 Point) January 30, 2010 at 10:50 am

    Excellent post. Thanks

    Flag as inappropriate
  39. Add point Subtract point
    Sohbet (1 Point) January 30, 2010 at 4:51 am

    Thanx You Admin or Usher’s Very Good post is

    Flag as inappropriate
  40. Add point Subtract point
    khalil (1 Point) January 28, 2010 at 11:15 am

    great job, thanks a lot !!!

    Flag as inappropriate
  41. Add point Subtract point
    neeraj (1 Point) January 13, 2010 at 1:22 am

    one of the best tutorials i’ve seen so far

    Flag as inappropriate
  42. Add point Subtract point
    Anthony (1 Point) January 7, 2010 at 11:15 am

    Brilliant tutorial, just finished it. Every photoshop user should give this a go. Took me about 4 hours.

    Flag as inappropriate
  43. Add point Subtract point
    Anthony (1 Point) January 7, 2010 at 11:15 am

    Brilliant tutorial, just finished it. Every photoshop user should give this a go. Took me about 4 hours.

    Flag as inappropriate
  44. Add point Subtract point
    Edit Digital Photos Easy (1 Point) January 7, 2010 at 2:45 am

    I would definitely like to see this made into a skin. MAKE THE TUTORIAL! lol

    Flag as inappropriate
  45. Add point Subtract point
    เพลง (1 Point) January 7, 2010 at 1:51 am

    Thanks for your post.

    Flag as inappropriate
  46. Add point Subtract point
    Max (1 Point) January 3, 2010 at 11:50 pm

    continue the tutorial to include the programming…is it hard?

    Flag as inappropriate
  48. Add point Subtract point
    frozen (1 Point) December 31, 2009 at 2:07 am

    Fantastic, very detailed tutorial ~

    Flag as inappropriate
  49. Add point Subtract point
    Autonomy (1 Point) December 30, 2009 at 9:50 am

    Jurgis, this is sweet and well done. Thanks!

    Flag as inappropriate
  50. Add point Subtract point
    Alnsen (1 Point) December 28, 2009 at 1:36 am

    Nice! Good tutorial!Thanks for sharing.

    Flag as inappropriate
  51. Add point Subtract point
    ฟังเพลง (1 Point) December 27, 2009 at 1:14 am

    thanks for your post

    Flag as inappropriate
  52. Add point Subtract point
    windy (1 Point) December 25, 2009 at 7:40 am

    Thanks for the great tutorial

    Flag as inappropriate
  53. Add point Subtract point
    Template Customization (1 Point) December 24, 2009 at 12:44 pm

    A good lesson, very professionally and quality made. Thanks!

    Flag as inappropriate
  54. Add point Subtract point
    Ajay (1 Point) December 23, 2009 at 7:14 am

    Amazing Tutorials! Thanks for sharing!

    Flag as inappropriate
  55. Add point Subtract point
    Oliver (1 Point) December 22, 2009 at 8:38 am

    An amazing tutorial and very well explained. I would really like to see a tutorial on how to get this interface made into a skin for Xion player or how to get it working on a website. Thanks for sharing.

    Flag as inappropriate
  56. Add point Subtract point
    Deb G. (1 Point) December 22, 2009 at 8:05 am

    This would be SO cool if… I could actually make it work to play my mp3 files on my web site!
    Any ideas? :)

    Deborah

    Flag as inappropriate
  58. Add point Subtract point
    Reza (1 Point) December 20, 2009 at 5:09 pm

    Thanks for the great tutorial.

    Flag as inappropriate
  59. Add point Subtract point
    Koocha (1 Point) December 20, 2009 at 9:09 am

    Awesome tutorial. Thanks for that. Also, feel free to browse my new site http://koocha.com with lost of design stuff collected from Internet

    Flag as inappropriate
  62. Add point Subtract point
    lanxiaoxi (1 Point) December 17, 2009 at 8:47 pm

    Thanks for your such great tutorial.Thanks, I’ll try to work out an other one.

    Flag as inappropriate
  63. Add point Subtract point
    dodopzw (1 Point) December 17, 2009 at 3:06 pm

    楼主做地太好了，谢谢

    Flag as inappropriate
  64. Add point Subtract point
    Shawn (1 Point) December 17, 2009 at 2:31 pm

    Love that you chose AOF for the band! I’m a huge fan! They’re from my home town and I remember being at their first show ever! Great tutorial by the way. Very slick!

    Flag as inappropriate
  65. Add point Subtract point
    Stevo (1 Point) December 17, 2009 at 2:25 pm

    It really looks nice, but how do we actually make it a player that can work without being just an image?

    Flag as inappropriate
  66. Add point Subtract point
    dsreaper (1 Point) December 17, 2009 at 9:55 am

    Can I make this a winamp skin ?

    Flag as inappropriate
  67. Add point Subtract point
    Felipe (1 Point) December 16, 2009 at 7:28 pm

    Great tutorial! it leads to a nice result! Thanks!

    Flag as inappropriate
  69. Add point Subtract point
    Tudor Cucu Ionel (Crimz) (1 Point) December 16, 2009 at 8:32 am

    very good ! i’m impressed

    Flag as inappropriate
  70. Add point Subtract point
    Martin Doersch (1 Point) December 16, 2009 at 8:13 am

    nicely done! Thanks for sharing!

    Flag as inappropriate
  71. Add point Subtract point
    website designer melbourne (1 Point) December 15, 2009 at 10:19 pm

    Thank you so much i have been looking for a tutorial like this for a while now, I have an idea for a site that i can use this in :-)

    Flag as inappropriate
  72. Add point Subtract point
    Jannis Gerlinger (1 Point) December 15, 2009 at 9:49 am

    cool design, i like it!

    Flag as inappropriate
  73. Add point Subtract point
    M.R. (1 Point) December 15, 2009 at 9:46 am

    Thank you for the detailed tutorial. Came here via SM. It would be great if you could post the tutorial on making this a working skin when you have time.

    Flag as inappropriate
  74. Add point Subtract point
    harits (1 Point) December 15, 2009 at 1:52 am

    wow..awesome tutorial..
    thanks..

    Flag as inappropriate
  75. Add point Subtract point
    Terence (1 Point) December 14, 2009 at 6:43 pm

    You should definitely make a tut for creating the working skin too, that’d be awesome

    Flag as inappropriate
  76. Add point Subtract point
    Mitch (1 Point) December 14, 2009 at 5:22 pm

    I too would love to see a tutorial on creating a skin

    Flag as inappropriate
  77. Add point Subtract point
    Design Informer (1 Point) December 14, 2009 at 4:43 pm

    Excellent tutorial. I really like the final result. Great job!

    Flag as inappropriate
  78. Add point Subtract point
    BillyK (1 Point) December 14, 2009 at 4:00 pm

    Really nice interface design. Would love to learn how to make it a real skin for the Xion player if you can write a tutorial for that. Great work!

    Flag as inappropriate
  79. Add point Subtract point
    zeeshan (1 Point) December 14, 2009 at 3:40 pm

    Awesome tutorial. really nice work!

    Flag as inappropriate
  80. Add point Subtract point
    Matthew (1 Point) December 14, 2009 at 2:47 pm

    That looks really sharp! Nice.

    Flag as inappropriate
  81. Add point Subtract point
    Kevin (1 Point) December 14, 2009 at 2:06 pm

    Original concept for a tutorial, I love it :)

    Flag as inappropriate
  83. Add point Subtract point
    martin (1 Point) December 14, 2009 at 12:39 pm

    Very slick, clean and professionel…Great tuts. Cheers…
    Merci

    Flag as inappropriate
  85. Add point Subtract point
    iiPod (1 Point) December 14, 2009 at 12:20 pm

    As always, nice Jurgis… When you submit a tutorial, do you get a confirmation e-mail or something? I’m not sure my e-mail got to David… Sorry. =P

    But a lovely tutorial, as always!

    Flag as inappropriate
  86. Add point Subtract point
    Callum Chapman (1 Point) December 14, 2009 at 12:19 pm

    Great tutorial and sleek outcome, pretty cool band, too!

    Flag as inappropriate
  87. Add point Subtract point
    Jhay Gamba (1 Point) December 14, 2009 at 11:30 am

    Awesome tutorial! Thanks

    Flag as inappropriate
  88. Add point Subtract point
    semmy @ minisite design (1 Point) December 14, 2009 at 11:07 am

    Really nice tutorial! I’ll download your psd and the tutorial! nice share!

    Flag as inappropriate
  89. Add point Subtract point
    Rafael Braga (1 Point) December 14, 2009 at 10:39 am

    Hey … great example of interface design.

    Thank you.

    Flag as inappropriate