thumbnail

In this tutorial, I`m going to show you how to design a very clean and elegant audio player in Photoshop. In just a few steps, you`ll learn how to use different Photoshop tools, create beautiful effects and implement nice design techniques.

What we`ll be doing today:

audio player How to Design a Clean and Elegant Audio Player in Photoshop

First step is to open Photoshop and create a new document of 580x400px. Set “Background Contents” to “Transparent” to get an empty canvas on which you can work with ease.

first step How to Design a Clean and Elegant Audio Player in Photoshop

Let`s build the background. Now that you`ve just created the canvas, grab the Paint Bucket Tool(G) and with a dark gray color (#484848) paint the empty canvas.

I decided to add noise to canvas, but I want to do it non-destructively. What I mean to say is if I want to low or increase the noise percent later, I can do it with ease. So, what I need to do is to convert the layer for filters. To do that, go to Filter->Convert for Smart Filters. Now go to Filter->Noise->Add Noise and add an Uniform Monochromatic noise of 2%.

add noise How to Design a Clean and Elegant Audio Player in Photoshop

Add a radial gradient overlay to the background, to make it looking like a scene.

gradient How to Design a Clean and Elegant Audio Player in Photoshop

The background is done and ready to build on it:

background How to Design a Clean and Elegant Audio Player in Photoshop

Now let`s build the player. We`ll start with the player`s shape. Grab the Rounded Rectangle Tool(U), set the radius to 3px and draw a rectangle of 340x40px right in the middle of the canvas. Make sure to set the tool`s drawing behavior to “Shape Layers”. This way you`ll get a shape and a new layer when you draw.

shape How to Design a Clean and Elegant Audio Player in Photoshop

Stylize the shape by adding the next blending options. (double-click the layer or right-click the layer +Blending Options to open the styles palette).

gradient overlay How to Design a Clean and Elegant Audio Player in Photoshop

drop shadow How to Design a Clean and Elegant Audio Player in Photoshop

stroke How to Design a Clean and Elegant Audio Player in Photoshop

Now we have a shape on which we`ll add some controls.

audio bg How to Design a Clean and Elegant Audio Player in Photoshop

Any audio player has controls like play, pause and stop buttons, progress bar and volume control, therefore, we`ll design such controls on our player too.

Grab the Custom Shape Tool(U), select the rectangle shape and draw it inside the player. The rectangle is orientated to top and doesn`t look like a play button, so rotate it 90 degrees CW.(Edit->Transform->Rotate 90 CW). Then resize it to 16x18px. Apply a blue gradient overlay and the button is ready.

triangle How to Design a Clean and Elegant Audio Player in Photoshop

grad How to Design a Clean and Elegant Audio Player in Photoshop

button How to Design a Clean and Elegant Audio Player in Photoshop

Next to Play button, I decided to add the Pause button. Grab the Rectangle Tool this time and draw 2 vertical lines just next to the Play button. Make them 5x16px and stylize them by adding the same blue gradient applied on Play.

pause How to Design a Clean and Elegant Audio Player in Photoshop

Draw the progress bar now by drawing a shape of 225x10px with the Rounded Rectangle Tool(U) and radius=5px.

progress How to Design a Clean and Elegant Audio Player in Photoshop

Stylize the shape by adding the next blending options:

color How to Design a Clean and Elegant Audio Player in Photoshop

inner How to Design a Clean and Elegant Audio Player in Photoshop

We have a bar now:

bar How to Design a Clean and Elegant Audio Player in Photoshop

Draw the progress bar following the same Rounded Rectangle Tool(U) with 5px radius but make it 130x10px. Then add to it the same blue gradient.

loading How to Design a Clean and Elegant Audio Player in Photoshop

Let`s make it shine a bit. The next technique can be used anytime and anywhere, if you want to make something glow. Ctrl+Click the blue progress bar to reveal its selection. Select the Rectangular Marquee Tool(M), set the behavior to “Intersect with Selection” and make a selection which includes only the top area of the blue progress bar.

half How to Design a Clean and Elegant Audio Player in Photoshop

Now create a new layer above the blue bar layer, grab the Paint Bucket Tool(U) and paint the selection with white. Reduce the layer`s opacity to 20% and you obtain a nice shine effect.

shine How to Design a Clean and Elegant Audio Player in Photoshop

Now draw a bullet at the end of the progress bar. Select the Ellipse Tool(U) and draw a circle of 16x16px.

bullet How to Design a Clean and Elegant Audio Player in Photoshop

Color it with gray(#e8e8e8) and add to it a small black shadow of 1px.

bulletproff How to Design a Clean and Elegant Audio Player in Photoshop

Now right in the middle of the circle, draw another circle of 5x5px, add it the same drop-shadow effect but color it by adding the blue gradient. Now I can say that the progress bar is finished.

progress bar How to Design a Clean and Elegant Audio Player in Photoshop

Next we`ll build the volume controls using 4 lines, one bigger than another. The process is the same as on pause button, so grab the Rectangle Tool(U) and draw 4 lines, after the progress bar.

volume How to Design a Clean and Elegant Audio Player in Photoshop

The bar looks awesome but still I need to add a final touch:

player How to Design a Clean and Elegant Audio Player in Photoshop

We still have to add the progress of the audio file, in seconds, you know like 5:34 / 7:00 but we want to add it with style. Select the Rounded Rectangle Tool(U) and draw a rectangle of 75x30px just above the bullet. Then select the Custom Shape Tool(U) and draw a triangle as you made when building the play button, but this time rotate it 180 degrees. Place it at the bottom of the shape, right on the middle. You can replicate the triangle using the Pen Tool(P) too if is easier for you. There are more ways to do it.

progress shape How to Design a Clean and Elegant Audio Player in Photoshop

Now apply to shape the same blending options used when you built the player shape. To do it easier, right-click the audio player layer and select “Copy Layer Style”. Then go back to progress shape, right-click the layer and select “Paste Layer Style”.

And the final step, grab the Horizontal Type Tool(T) and type in something like “3:45 / 5:00″.

With this step, the audio player design is done and the tutorial is complete. I thank you for sticking with me and if you have any feedback/comments, don`t hesitate to drop them below. Until then, take a look at what we`ve done today:

audio player How to Design a Clean and Elegant Audio Player in Photoshop

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • wzbozon

    Awesome

  • slobjones

    Great. You’ve created a bunch of static images. How does that become an active, dynamic audio player that someone can actually use to play an audio file?

    • Jishosan

      Honestly, that’s not the designer’s job. Most design work is flat files, either from photoshop or illustrator. There is an understanding that the developer will understand how to take those files and craft the interface, either by having the designer split the file into smaller pieces (“background image”, “play button”, “progress detail image”), or by emulating it in whatever the development environment is.

      This was not “How to create an audio player”, but “How to DESIGN an audio player”. I thought it accomplished that and gave me a nice little insight on shape layers that I didn’t have before.

  • Pingback: Audio player design tutorials in Photoshop | Pillaticos

  • http://www.behance.net/dshinde Digambar Shinde

    Very Nice Work,
    it’s a new inspiration for us.
    thank you

  • http://www.kropped.com Architectural visualisations

    Awesome tutorial, thanks for sharing!

  • http://efekphotoshop.com renra cikatos

    wow, it’s a new inspiration for us. thank you.

  • http://www.embraceillumination.com Bryan Lean

    Another Nice and Effective tutorial. Very well done.

  • http://thinkcreativedesignzz.wordpress.com Creative Designs

    Fantastic tutorial, great resource. Thanks for share