Learn How To Make Music Player UI Kit In Photoshop CS6

Hi fellows, this week I’ve brought yet another interesting project for you. Today, we are going to make music player user interface in Photoshop. I’ve made it in Photoshop CS6 but you can use Photoshop CS5. Hope you will have making this interesting project with me like you did last week when we made a camera app icon. So let’s start our tutorial without further delay.

Okay so, let’s note down the things you’ll need.

Requirements:  Noisy basic background (I’ve used same concrete background we used for the realistic metallic logo), metallic surface texture.

Program: Photoshop CS6

Time: 30-40 min

Now before we start our tutorial let’s have a look at the final image.

Photoshop tutorial

Step1:

Start your Photoshop and open a new document of 800x800px.

Photoshop tutorial

Step2:

Copy and paste first the noisy gray background and then place the metallic texture on it as shown below.

Photoshop tutorial

Step3:

Select Ellipse tool and make a big round circle in the middle with any color fill.

Photoshop tutorial

Step4:

Now right click on the circle layer and go to blending options then select “Gradient Overlay”. Make the gradient shown in the image given below ( I’ve shown the color numbers used to make the gradient). Note the placings of the colors. Make the angle at 23 degrees.

Photoshop tutorial

Step5:

Now we will add a Stroke to the circle of size 6 px, position will be Inside, opacity 47% with black color #000000.

Photoshop tutorial

Step6:

Now we will give this circle a bit of body and to do that select Bevel and Emboss. Make the settings shown below in the image.

Photoshop tutorial

Check on the contour tab and set it to 50% range.

Photoshop tutorial

Step7:

So the last effect on the circle will be Drop shadow. Make the settings shown in the image below.

Photoshop tutorial

Step8:

Now you will have a shape as shown below.This is the base of our main volume knob.

Photoshop tutorial

Step9:

Again select the Ellipse tool and make a round circle and place it in the middle of the previous just 5px smaller with white color # ffffff.

Photoshop tutorial

Step10:

Again we will go to blending options by right clicking on the layer and then select Stroke of size 8px with position Inside and color # 01ffff and 100% opacity.

Photoshop tutorial

Step11:

The next thing will be to select Gradient overlay. Make the gradient shown below in the image and set it at 90 degree angle with Angle style.

Photoshop tutorial

Step12:

Now select Bevel and Emboss. Make the settings for it according to the image given below.

Photoshop tutorial

Step13:

Add drop shadow. See the picture given below for the settings for drop shadow.

Photoshop tutorial

Step14:

See the Main v0lume knob in the picture shown below. I’ve added the ringed texture to the knob and to do that I’ve used ring brush which I made myself but you can easily find brushes like that on internet. 14 to 15 rings have been made each smaller then the previous.

Photoshop tutorial

Step15:

Right click on the rings layer and go to blending options then select gradient overlay and make the gradient to use as shown in the given image below.

Photoshop tutorial

Step16

Now we will add a bit of texture to the rings. Right click on the ring layer and go to blending options and then select Bevel and Emboss, make the settings according to the picture shown below.

Photoshop tutorial

Okay now our main volume knob is complete

Photoshop tutorial

Step17:

Now we will create the light blue circle around the knob. To do that select a hard round brush of size 430px and make a circle over the knob with color# 01f3f4.

Photoshop tutorial

Step18:

Now again select the hard round brush and select eraser then of size 380px and remove the inner fill of the circle as shown below. Now you have a blue ring around the volume knob.

Photoshop tutorial

Step19:

To add the design on the ring I just select 5px hard round brush and make the sections erasing the ring on various points. See the picture given below for the reference.

Photoshop tutorial

Step20:

Now let’s start the control buttons. Very first button will be of Play. Select Ellipse tool and make a horizontal oval shape above the main volume knob with black color # 000000.

Photoshop tutorial

Step21:

Right click on the oval layer and go to blending options for the effects and select gradient overlay. Make the gradient shown below to use with 100% opacity.

Photoshop tutorial

Step22:

Now we will add a Stroke to our oval shape of 1px size and with black color # 000000.

Photoshop tutorial

Step23:

Select Bevel and Emboss after Stroke. Make the settings according to the image shown below.

Photoshop tutorial

Step24:

Add drop shadow to the oval button, see the setting for it in the image below.

Photoshop tutorial
So the base of our button is complete now come to the inner part.

Photoshop tutorial

Step25:

Make another oval shape and place it on the metallic oval base of the button with black color #000000 as shown below.

Photoshop tutorial

Step26:

Right click on the smaller oval layer and go to blending options then select gradient overlay and use the gradient shown in the image given below.

Photoshop tutorial

Step27:

Now select the Stroke of 1px with color #000000.

Photoshop tutorial

Step28:

Select Bevel and Emboss and set the Style to Inner Bevel. See the image shown below for the rest of the settings.

Photoshop tutorial

With this our button is complete except the sign.

Photoshop tutorial

Step29:

Now select the arrow head from the custom shapes and place it in the middle of the button with blue color #01f3f4.Right click on the sign layer and go to blending options then select inner shadow. Make he settings shown below for inner shadow.

Photoshop tutorial

Step30:

Make a group of button layers except the play sign and duplicate the button group for other buttons like forward, reverse, stop and record. Place these buttons as shown below use T+ctrl to make them a bit smaller then the play button. Add the signs on each button and repeat the same technique we applied for the play sign with same color except on the record button for which we’ll use red color# fe0000.

Photoshop tutorial

Step31:

Right click on the record sign layer and go to blending options->Satin  see the image given below for the satin settings.

Photoshop tutorial

Step32:

Now we are going to start the 3rd part of our tutorial. In this tutorial we will add a mixer and to that first we will made a glass base. Select a rectangle tool and make a rectangle shape as shown below with black color #000000.

Photoshop tutorial

Step33:

Add Drop shadow to the rectangle shape. Make the settings as shown below.

Photoshop tutorial

Step34:

In this step we’ll add a bit of shine on the rectangle we made in previous step. For the shine select pen tool and make the triangle with white color #ffffff fill and then reduce the opacity to 20%.

Photoshop tutorial

Step35:

Add the 4 metallic screws at the r corners of the rectangle shape. Use same layers as we used for the main volume knob to give them the metallic look.

Photoshop tutorial

Step36:

In this step I’ve added the mixer bricks and to make those I’ve used square hard brush which I made myself also but you can use custom shape or same rectangle tool to make different size bricks as shown below with light blue color #01f3f4.

Photoshop tutorial

There you have it. Our Music player user-interface is ready to play your tune. Have fun:).

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes