<p>Creating a sleek audio player interface in Photoshop is an excellent way to showcase your design skills. With the right tools and techniques, you can create a visually appealing and user-friendly interface that will impress anyone who uses it. In this tutorial, we&#8217;ll show you how to create a sleek audio player interface in Photoshop using some of the latest design trends.</p><p>To start, you&#8217;ll need to set up your workspace by creating a new document with the dimensions of your choice. Next, select your background color and add any textures or gradients that you want to use. Once you&#8217;ve set up your background, it&#8217;s time to start designing the actual interface. Begin by adding buttons for play/pause, skip forward/backward, volume control, and other essential functions.</p><p>Now comes the fun part – designing the visual elements of your audio player interface!</p><h2 class="wp-block-heading">Create a Sleek Audio Player Interface in Photoshop</h2><p>In this tutorial you’ll learn how to design a sleek audio player interface in Adobe Photoshop.</p><h3 class="wp-block-heading" id="1">Step 1</h3><p>Create a new document 600×400 px big.</p><h3 class="wp-block-heading">Step 2</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/01.jpg" alt="Create a Sleek Audio Player Interface in Photoshop"/></figure></div><p>Using the radial gradient tool from #5e6c78 to #20282e, fill the background.</p><h3 class="wp-block-heading">Step 3</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/03.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 4</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/04.jpg" alt="Image Description"/></figure></div><p>Ok, let’s make the audio player now. Create new layer (Ctrl+Shift+N) and name it &#8220;Base&#8221;. Using the <a href="https://community.adobe.com/t5/photoshop-ecosystem-discussions/rounded-rectangle-tool-missing/td-p/11896595" target="_blank" rel="noreferrer noopener">Rounded Rectangle Tool</a>, 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.</p><h3 class="wp-block-heading">Step 5</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/05.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 6</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/06.jpg" alt="Image Description"/></figure></div><p>Copy the previously made image to the audio player document above the &#8220;Base&#8221; layer. Change the blending mode to Soft Light and Opacity to 80%. Let’s name this layer &#8220;Texture&#8221;. Ctrl+click on &#8220;Base&#8221; layers thumbnail to make a selesction. Then press Ctrl+Shift+I to reverse the selection. Hit delete.</p><h3 class="wp-block-heading">Step 7</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/07.jpg" alt="Image Description"/></figure></div><p>Create new layer. Name it &#8220;Higlights&#8221;. 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 &#8220;Base&#8221;.</p><h3 class="wp-block-heading">Step 8</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/08.jpg" alt="Image Description"/></figure></div><p>Now let’s make the speakers on both sides. Create new layer in <a href="http://blog.visibledev.net/category/tutorials/adobe-photoshop/">Photoshop</a>. Name it &#8220;speaker&#8221;. Ctrl click on the &#8220;Base&#8221; 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 &#8220;texture&#8221;. Go to blending options and add these settings: Pattern Overlay with the attached &#8220;Spiderman pattern&#8221;, Blend mode – Overlay and Scale 12%.</p><h3 class="wp-block-heading">Step 9</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/09.jpg" alt="Image Description"/></figure></div><p>Create a new layer, name it &#8220;Highlight&#8221;. Again using the Pencil tool draw a 1px highlight like in picture. Then create a new layer and name it &#8220;Shadow&#8221;. 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%.</p><h3 class="wp-block-heading">Step 10</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/10.jpg" alt="Image Description"/></figure></div><p>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 &#8220;Speaker_Right&#8221;.</p><h3 class="wp-block-heading">Step 11</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/11.jpg" alt="Image Description"/></figure></div><p>Let’s make the Close, Minimize and Maximize buttons. Create new layer, name it &#8220;Button&#8221;. 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.</p><h3 class="wp-block-heading">Step 12</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/12.jpg" alt="Image Description"/></figure></div><p>Create a new layer, name it &#8220;X&#8221;. 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.</p><h3 class="wp-block-heading">Step 13</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/13.jpg" alt="Image Description"/></figure></div><p>Group the previous 2 layers and name the group &#8220;X&#8221;. Then make the other 2 buttons by dublicating the &#8220;X&#8221; group and just changing the &#8220;X&#8221; layer. Again I used Pencil tool to draw the symbols.</p><h3 class="wp-block-heading">Step 14</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/14.jpg" alt="Image Description"/></figure></div><p>Now let’s make the screen. Create new layer, name it &#8220;Screen Base&#8221;. Draw a rectangle like in the picture and fill it with gradient from #303a44 to #4a5968.</p><h3 class="wp-block-heading">Step 15</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/15.jpg" alt="Image Description"/></figure></div><p>Create a new layer. Name it &#8220;Gloss&#8221;. Draw a smaller rectangle and fill it with White to Transparent gradient. Lower the Opacity to 10%.</p><h3 class="wp-block-heading">Step 16</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/16.jpg" alt="Image Description"/></figure></div><p>Again using 1px white Pencil tool draw some highlights around. Just play with it to get results you like.</p><h3 class="wp-block-heading">Step 17</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/17.jpg" alt="Image Description"/></figure></div><p>Let’s fill the screen with some content. Make a new group and Name it &#8220;Content&#8221;. 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. </p><p>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.</p><h3 class="wp-block-heading">Step 18</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/18.jpg" alt="Image Description"/></figure></div><p>Create a new layer. Name it &#8220;Progress bar&#8221;. 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 &#8220;Progress knob&#8221;. 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.</p><h3 class="wp-block-heading">Step 19</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/19.jpg" alt="Image Description"/></figure></div><p>Now there’s gonna be a lot of buttons to make. So make a new group and name it &#8220;Buttons&#8221;. First we’ll make the base for the Play, Stop and other buttons. Create new layer, name it &#8220;Button Base&#8221;. 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. </p><p>Then add these Blending Options – Drop Shadow: Angle – -90 (Un-check the &#8220;Use Global Light&#8221;), 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.</p><h3 class="wp-block-heading">Step 20</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/20.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 21</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/21.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 22</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/22.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 23</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/23.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 24</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/24.jpg" alt="Image Description"/></figure></div><p>Once again add some small details with the pencil tool.</p><h3 class="wp-block-heading">Step 25</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/25.jpg" alt="Image Description"/></figure></div><p>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.).</p><h3 class="wp-block-heading">Step 26</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/26.jpg" alt="Image Description"/></figure></div><p>Using the Rounded Rectangle tool, Radius 5px, draw a rectangle and add the same gradient as the Progress Bar.</p><h3 class="wp-block-heading">Step 27</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/27.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Step 28</h3><div class="wp-block-image"><figure class="aligncenter"><img src="http://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/28.jpg" alt="Image Description"/></figure></div><p>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.</p><h3 class="wp-block-heading">Download the PSD</h3><div class="wp-block-button is-style-fill" style="text-align:center;"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background" href="https://tutorial9.s3.amazonaws.com/uploads/2009/12/audio-interface/PSD.psd" title="Sleek Audio Player Interface" style="background-color:#2da3ac" target="_blank" rel="noreferrer noopener"> Download</a></div><hr class="wp-block-separator has-css-opacity is-style-wide"/><h3 class="wp-block-heading" id="2">Conclusion</h3><p>So here it is – your finished audio player interface. You can try to make it a real skin for the <a href="https://www.xionplayer.com/" target="_blank" rel="noreferrer noopener">Xion player</a>. 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.</p>
How To Create a Sleek Audio Player Interface in Photoshop
