Creating a flat design audio player in Photoshop CS6

Last Updated on January 9, 2015 by Patrick

Today I’d like to give you this written version of the tutorial on how to create a flat design audio player using Photoshop CS6.

We’ll start off first by creating a new document. So, as I like to use keyboard shortcuts, I’ll say Ctrl + N and name my file appropriately “Flat Design Audio Player”, put the width to 700 pixels and the height to 400 pixels and the rest of the settings that we will work with as follows:

We’ll hit enter and then we will start by creating a little bit of a textured background to go nicely with our design.

You can then use this player according to your needs, for the web and so on, and I’ll provide you with the .psd file download at the end of the tutorial and in the resources page of my main website. So let’s continue. :)

We will firstly name our main layer “base” to keep this nice and labeled. Then we’ll fill it with a background color by hitting Alt + Backspace. I chose #ffa35a, a nice orange color:

Note: Don’t forget to save your document from time to time by hitting Ctrl + S, or by going to the topmost menu of Photoshop and choose File/Save As.. and then press OK or hit Enter, after you selected the location where you want to save it, in order not to lose any progress you’ve done so far if something unexpected happens and Photoshop crashes or something. It’s always good to have this habit when your working with this. :) I always do it. You never know..

Ok, so I’ll create a new layer by hitting Ctrl + Shift + N and name it “texture bg 1”, ’cause I’m going to blend multiple texture backgrounds and others to give it a nice background effect. I’ll keep it above our base layer.

Oh, so I don’t forget. I’ll give my layers some color labels so I know what they are, to keep this nice and tidy. I’ll choose orange for both of them by selecting both with Ctrl and then by hitting Right click on the layer visibility indicator boxes, where the eye icons are at the left of the layers, and select Orange from the drop down menu:

I’ll use this color for the background layers and Gray for the audio player layers.

Ok, next, select the “texture bg 1” layer and press D on your keyboard to reset the foreground-background colors in the tools panel to their defaults, which is black for the foreground and white for the background. And then fill the layer with black by hitting Alt + Backspace. Afterwards go to the top menu and choose Filter/Noise/Add Noise and put the settings as follows and hit OK:

Change the “texture bg 1” layer’s blending mode to Screen and it’s opacity (next to the right) to 30%. For this you can also hit key 3 on your keyboard while the layer is selected. It’ll change the opacity automatically to 30%. Just a quick tip, in order to change is to 35% for example you can press 3 and then immediately press 5. :)

I’m going to filter the layer one more time by using a motion blur on it. So I’ll say, from the top menu of Photoshop, Filter/Blur/Motion Blur and the settings I use are as follows:

Next we’ll add another layer on top of these two created so far, we’ll name it “texture bg 2” by double clicking its name and adding the new one, and we’ll do more of the same only a little bit different with the settings. So, I’ll fill this new layer with a grayish color. First I’ll change the foreground color to #aaaaaa by clicking on the square of the foreground color in the tools panel and manually writing it, and then I hit Alt + Backspace to fill it. Don’t forget to change the color label of the layer accordingly to keep it nice and ordered! ;)

Then I’ll say Filter/Noise/Add Noise and enter the following settings and hit OK:

Change the blending mode of the “texture bg 2” layer to Soft Light and its opacity to 60%.

After this I’ll go for Filter/Blur/Motion Blur and enter the settings below:

Add another layer above the three and fill it with #cacac2 (just a change in color this time ;) ). Go to Filter/Noise/Add Noise and do the following:

After this motion blur it again by using Filter/Blur/Motion Blur with the settings below:

Change this layer’s name to “texture bg 3” and its blending mode to Multiply. Next change its opacity to 45%.

So far I have the following layers:

Ok, so add another layer on top of all and name it “texture bg 4”. This one’s going to be more subtle than all the others. It’s going to be a Linear Dodge layer, so change the blending mode to it, and drop down its opacity to 10%.

Add noise again by going to Filter/Noise/Add Noise and add the following settings:

We’re going to add a kind of a fabric texture effect to the background. But if you think the effect is too strong you can group all the layers together in one main group by selecting all of them in the layers panel and hitting Ctrl + G and then name it “Flat Design Audio Player”. After this, expand the group’s folder by clicking on the little arrow icon next to the folder icon of the group and select all layers and put them in another group called “background”, including the “base” layer. The groups act like folders in Photoshop.

Change this group’s blending mode to Soft Light to lower its effects a little bit.

You should have these by now:

And now it comes the fun part. :D We’re going to create the actual player.

Add another group inside the “Flat Design Audio Player” group by clicking on the group icon button at the bottom of the layers panel where it says “Create a new group” and name it “audio player”. Then, while selected, we’ll add a new rectangular vector shape layer by selecting the Rectangle Tool from the tools menu, but I also like to use the keyboard shortcut U and click on the workspace. It is much faster this way. Then use the following settings from the dialog box:

Then name it “main shape” and color label it with Gray, as I said in the beginning of the tutorial. Also, don’t forget to color label the group too. ;)

Let’s, now, position the shape appropriately on the workspace by hitting Ctrl + A to select the entire workspace and use the Move Tool, or keyboard shortcut V, and from the tool’s settings panel click on “Align vertical centers” and then on “Align horizontal centers”:

We are now going to change the fill color of this shape to a very light gray, almost white, #e1e1e1. And then add some layer styles to it:

Use white (#ffffff) for the fill color of hte inner shadow effect.

Ok, next we’ll add a drop shadow to it:

Use black (#000000) as the color of the effect but drop its opacity down to 30%.

And last, but not least, a Stroke layer style:

Now it’s time to add the buttons and other graphical elements to the player. We are going to add a play button, as well as a fast forward, rewind, stop, next and previous track and playlist menu. Also, not to forget, we’re going to add the time seeker bar. So let’s do it! :)

First, from left to write, the play button, so let us use the Custom Shape Tool by right clicking on the Rectangle Tool button in the tools panel and choose it from the drop down menu. Next, choose a triangle shape from the tool presets panel, just below Photoshop’s top menu, and if you have all of them loaded in the panel go ahead and select it, and if not, click on the cogwheel icon from the panel and load the “Shapes” custom shapes and choose it from there.

Click on the workspace and give it a width of 19 pixels and a height of 22 pixels and position it inside the player’s shape. Then, do Ctrl + T, that is “Transform”, and clockwise handle it so the top corner faces right. Name the layer “play button”. Fill this shape with a gray color, like #aaaaaa.

Let’s, now, give it some layer styles:

Use the Inner Shadow Color #666666.

Use the Stroke Color #ffffff. This way, it’ll be noticeable when zoomed to its actual size. :)

Next, I’m going to create the hover effect of the button by duplicating the layer, clicking on the settings drop down menu of the layers panel on the right and selecting “Duplicate Layer…”:

Name it how you see there and hit OK.

Then, we’re going to fill the shape with an orange color by double clicking on the shape from the layer and choosing #f06b3d and hit OK again.

Next, change the layer styles of the hover shape layer to what we have here:

Use this Stroke Color: #fcf0e6 .

And this Inner Shadow Color: #af4520.

Don’t forget to color label it to Red. It is not its actual fill color but this way we’ll know that it’s a hover button, meaning that it indicates action.

Ok, next, we have the separator between buttons. I’ll select the Rectangle Tool by right clicking on the Custom Shape Tool from the panel on the left and I’ll add it to the workspace with a width of 1 pixel and a height of 50 pixels.

I’ll, then, fill it with a mid gray color, such as #cccccc by selecting the shape layer and hitting Alt + Backspace. Then I will name the layer “sep 1 (gray)”.

Next I will duplicate this separator layer in the same way I mentioned above and rename it to “sep 1 (white)”, so I’ll know which ones they are. Fill it with #ffffff (white).

Press V on your keyboard (Move Tool) and nudge it 1 pixel to the right. Then group these two layers into a folder called “sep 1”. We are going to have more than one separators. ;)

By now you should have these layers:

For the stop and pause button we will use the Rectangle Tool and create two shapes with a width of 10 pixels and a height of 22 pixels. Then, we will unite both of them by selecting both and saying, from the top menu of Photoshop, Layer/Combine Shapes/Unite Shapes. This will combine both of them into one vector shape layer. ;) Rename this new layer “pause button”. Now, right click on the space of the “play button” layer, neither on the layer thumbnail, nor on its name, and select Copy Layer Style. Now do the same with the “pause button” layer and Paste Layer Style. It’ll save us some time.

For the stop button we will use a Rectangle tool of a width and height of 22 pixels (square shape). We will use the same fill color as the “play button”. Nudge it in place next to the pause button, from left to right and do the same with copying and pasting the layer styles from the “play button”. Don’t worry about not being properly aligned within the main shape. We’ll take care of this at the end. For now let’s concentrate on creating the buttons and the time seeker bar.

Let’s now take care of the rewind and fast forward buttons. Duplicate the main play button (just to remind you that we have a hover state of this button as well so..), name it “rewind button” and hit Ctrl + T, resize it until it has a width of 12 pixels and a height of 14 pixels, don’t hit enter just yet and right click on it and choose Flip Horizontal. Then hit Enter.

Duplicate it again and nudge it with the Move Tool selected 2 pixels to the right of the first duplicate and combine the two shapes into one like I mentioned above. Rename it “rewind button”.

For the fast forward button it’s very simple. We will duplicate this “rewind button” and name it “fast forward button”. Hit OK and nudge it in place with the Move Tool (don’t forget that the keyboard shortcut for this is letter V).

After this, hit Ctrl + T and right click on it and select Flip Horizontal.

Let us now create the “previous track button” and “next track button”. For this I’ll use a combination of triangle and rectangular shapes.

The first one is the “previous track button” and I’ll start with the Rectangle Tool and give it a width of 4 pixels and a height of 14 pixels. Then select my triangle custom shape and give it a width of 14 pixels and a height of 12 pixels. Hit Ctrl + T and rotate it counterclockwise to face the top corner of the triangle to the left and hit Enter. Select both layers and combine the two shapes as I mentioned above.

Then it is very simple to create the “next track button” by duplicating this previous one and flip it horizontally to face it to the right. Rename it “next track button” if you haven’t done it so far. Nudge them in place and let’s get to the next step.

Create, now, the “playlist miniscreen” layer and name it as such. Use the Rectangle Tool again and give it a width of 250 pixels and a height of 30 pixels and hit OK. Fill it with a nice blue color (#1186b2).

Let’s give it some interesting layer styles. Just because we are doing a flat design doesn’t mean we can’t play with the layer styles. ;) :D

Give it a white stroke of 1 pixel. Then an Inner Shadow as follows:

Use a darker Inner Shadow Color of #035686.

Then, something new, the Patter Overlay. ;) I use a nive seemless pattern I created of 3 x 3 pixels (but you can use yours) and the settings are as follows:

Let us, now, put a track name inside the miniscreen, shall we? You can use yours if you want, whatever it is that you’re listening to right now.

I used the Aller font which you can freely find it here: FontSquirrel . I gave it the following font settings:

I gave it a light gray color of #e1e1e1. Next, align the text inside the miniscreen both vertically and horizontally centered with the Move Tool (V) and the alignment tools in the tool preset panel below Photoshop’s top menu.

Note: If you don’t have the Character panel visible you can enable it by going to the Window menu and selecting it.

Now, below the “main shape” layer add another Rectangle Tool layer with a width of 600 pixels (as wide as our main shape) and a height of 25 pixels. In this shape we are going to add our controls for the time seeker bar so rename the layer appropriately “time seeker shape”. Fill it with that light gray color I mentioned above to keep it in harmony with the other part of our layer.

Nudge it into place with the Move Tool (V) and put it above our main shape, but just one pixel below, to keep its borders good looking. You’ll see why immediately. Now, add the following layer styles:

Use white for the Stroke Color.

Use gray (#cccccc) for the Inner Glow Color.

Now, select the layer of the time seeker shape and drag it below the main shape layer. Let us now procede to creating the seeker bar, the elapsed time and the controler.

Above this time seeker shape layer draw another rectangular shape 570 pixels wide and 10 pixels high. Then, Ctrl + Click on the time seeker shape to select its pixels and place this time seeker bar inside the shape, both vertically and horizontally aligned, with the Move Tool (V) as mentioned earlier. It should be perfectly centered now within our time seeker shape.

Let’s give it a fill color now: #aaaaaa.

Now we are going to apply some layer styles to it. I, first, gave it the same white stroke of 1 pixel (no need to show the image, as I’ve showed it before). And then:

This is a 10 x 10 pixels black over transparent background scanlines Patter Overlay. You can make yours if you want, no problem. But I used this. Anyway, you will get it with the file download.

Ok, now rename it “time seeker bar”.

Next, create the elapsed time bar by duplicating this seeker bar layer. We’ll change its appearance to make it stand out and to keep it in harmony with the other graphical elements.

First things first, let us rescale the shape. We want it to show how much time of the track has elapsed. ;) Grab the Direct Selection Tool (A). It should be the white one. If you don’t have it and you selected the Path Selection Tool you can switch it by right clicking on the tool and choosing it from the drop down menu.

Now, click once on the shape on our workspace to select its paths. Then, click and drag, from your far right, beyond any shape on the work space, where you have just the background (if you drag from the vector shapes it will select those vector shapes, in this example our main shape, and we don’t want that), and select both vector points from the right of the shape. Now you can nudge them however you want using the left and right keys. It’s a much better way to resize a vector based layer than using the Transform Tool, especially when you have a rounded cornered shape. It won’t distort the corners and will keep all aspects of the shape.

I rescaled mine to about 30% of the track’s length, so to speak. :)

Now, we are going to make it stand out from the other shape. Fill it with the same blue color as the miniscreen (#1186b2). Give it some layer styles:

Use #a2d6fb as the Stroke Color.

Next, I used the same scanline pattern as above, only with a bit different in settings:

Next, rename this layer “elapsed time bar” if you haven’t done it so far.

Ok good! Now let’s turn our attention to creating the controller, I mean the time seek button.

We’ll add another rectangular shape above these layers, 21 pixels wide and 16 pixels high. Fill it with #e3e3e3. And give it some layer styles:

Use the same normal gray stroke color as above (#cccccc).

Use white for the Inner Glow Color.

I used #888888 as Drop Shadow Color.

Now, let’s Ctrl + Click on the “time seeker bar” layer to select its pixels and align this controller vertically centered. Nudge it in place until it’s somewhere where the two bars are blending. Rename it “time seek button” if you haven’t done it yet.

So far, so good! Now it’s time to do some cleanups and some alignments of the layer. We’ll use a combination of duplicating the “sep 1” group, put it between the big buttons (play, pause and stop), the small buttons (rewind, fast forward etc.) and keeping 15 pixels distance between the big ones and 10 pixelx between the small ones. We’ll also keep a 15 pixel inner margin between the play button on the left and the edge of the player and the miniscreen on the right and the right edge of the player, to keep it nice and neet.

Next, we’ll do more of the same with the seeker bars and their placeholder shape. Keep the same 15 pixels padding. If you don’t have enough space inside the player, enlarge it by using the same Direct Selection Tool (A) and select the right corner vector points and nudge them so they meet the same 15 pixels padding. Do the same with the “time seeker shape” above to keep it nice and symmetrical with the “main shape”. After this, we’re done and the final result is as follows:

In conclusion, we can make a flat design of a graphical element and not make it so minimalistic as you see on the web today very restricted in graphical elements. We can create subtleties in shadows and highlights, inner glows and light colored strokes to give it a natural look. Everything is flat but subtle and almost realistic.

Here is the page where you can download it: flat design audio player resource page .