feature-image-vol

Create a Sleek and Stylish Music Player Interface for iPhone in Photoshop

by Gul · Nov 9, 2012 · 2 comments

Photoshop is adored by most of the designers around the globe. It has much to offer, you can design almost anything you want in it. Today, I’ll show you how to create a sleek and clean music player interface for iPhone in Photoshop. We’ll be using various shape tools, pen tool and different layer styling techniques to achieve the final outcome. So, let’s start designing!

Resources:

DS-Digital Font

Final result:

iPhone music player interface

Step 1
Create a new document in Photoshop with 600px width and 800px height.

iPhone music player interface

Step 2
Fill the background with #252626 color using paint bucket tool.

iPhone music player interface

Step 3
Set #181818 as your foreground color and draw a circle in the center of your canvas using ellipse tool. Press “Shift” key while using ellipse tool to get a perfect circle. Label it as “button base”.

iPhone music player interface

Step 4
Double-click on the button base layer to open the layer style window and apply the following settings for bevel and emboss, inner glow and drop shadow to give it some character.

iPhone music player interface

iPhone music player interface

iPhone music player interface

iPhone music player interface

Step 5
Next, we’ll make “play” symbol. Set #ffbd02 as your foreground color and select the polygon tool. Use the given settings in the top properties bar to get the shape as shown below.

iPhone music player interface

Step 6
Double-click on the play shape layer and apply the given settings for inner shadow.

iPhone music player interface

iPhone music player interface

Step 7
Now draw an ellipse in #2c2a2a color just above the background layer.

iPhone music player interface

Apply the given settings for pattern overlay on this ellipse.
iPhone music player interface

iPhone music player interface

Step 8
Next, we’ll create a circular frame around the previous ellipse. Make a circle larger than the previous ellipse, duplicate it by going to Layer> Duplicate Layer. Press Ctrl+ T to activate the free transform tool, decrease the size of duplicated circle by 5%. Give it #636363 color.

iPhone music player interface

After that, select both circle layers and go to “Layer”> “Combine Shapes”> “Subtract Front Shape” to get the frame as shown below.

iPhone music player interface

Step 9
Duplicate the frame layer. Come back to the original frame and apply the following settings for inner shadow.

iPhone music player interface

iPhone music player interface

Step 10
Now we’ll use the duplicated frame layer to form the streaming line. Select the pen tool (Tool mode: Shape) to draw a shape that we’ll subtract from the frame.

iPhone music player interface

Now select the duplicated frame layer and the new shape layer and go to “Layer”> “Combine Shapes”> “Subtract Front Shape” to get the frame as below.

iPhone music player interface

Step 11
Apply the following layer style settings on this new frame layer.

iPhone music player interface

iPhone music player interface

iPhone music player interface

iPhone music player interface

Step 12
Next, we’ll make volume controller. Duplicate the original frame layer, increase its size, distort it a bit using free transform tool as shown below.

iPhone music player interface

Draw the shape as below using pen tool (Tool mode: Shape).

iPhone music player interface

Now click on the distorted larger frame layer and then press Ctrl+ thumbnail of this new shape layer. After that, click on the icon of “Add layer mask”, which is present at the bottom of the layers panel. Hide or delete this shape now as we don’t need it anymore.

iPhone music player interface

Step 13
Now draw few ellipses as below to form various buttons. Use #1d1d1d color here.

iPhone music player interface

Step 14
Right click on the button base layer, which we’ve created in step 3 and 4 and choose the option of “Copy Layer Style”. Now right click on each of these ellipses made in step 13 and select the option of “Paste Layer Style” to apply the same effect on them.

iPhone music player interface

Step 15
Now we’ll make plus, minus, previous, next, fast forward and rewind symbols for these buttons by using rectangle tool and polygon tool.

iPhone music player interface

Now copy layer style of the Play symbol and paste it on rest of the symbols.

iPhone music player interface

Step 16
Next, we’ll make a nice metallic knob. We need a polygon and few ellipses for this. So, set #494848 as your foreground color and select the polygon tool to draw the shape as below using the given settings in the top properties bar.

iPhone music player interface

Apply the given settings for drop shadow on this polygon.

iPhone music player interface

Step 17
Select #b2b2b2 color and draw an ellipse over the polygon. Apply the given settings for gradient overlay on it.

iPhone music player interface

Step 18
Draw another dark gray ellipse over the previous one and a smaller light gray ellipse as below. Copy gradient overlay settings of the ellipse formed in step 17 and paste it over the light gray ellipse.

iPhone music player interface

Step 19
Draw an ellipse as shown below. Make its fill to 0% and apply the given settings for stroke. After that, duplicate this layer and reduce its size to get the double ring effect as below.

iPhone music player interface

Collect all the knob layers in a group, duplicate it and position them as below.

iPhone music player interface

Step 20
Next, we’ll add some text to complete the player interface. We’ll be using DS-Digital font, you can download it from the link provided in the resources of this tutorial.

iPhone music player interface

Step 21
Now type in letter “I” using the same font to make a row. Click on the icon of “Create warped text” from the top options bar and apply the given settings for arc.

iPhone music player interface

After that, go to “Edit”> “Transform”> “Rotate 90⁰” and position it as below. Duplicate this layer and flip it horizontally to align on the other side by going to “Edit”> “Transform”> “Flip Horizontal”.

iPhone music player interface

Step 22
That’s it. Our music player interface is ready. Now I’ll show you how it would look in an iPhone.

iPhone music player interface

Hope you guys enjoyed the tutorial and learned something useful. I’ll surely wait for your feedback.

Source File and Download

You can download the source PSD file from our resource database here.

Create a Sleek and Stylish Music Player Interface for iPhone in Photoshop, 5.0 out of 5 based on 1 rating

About the author

Gul

A Web and Graphic designer and epic tutorial writer. She is also an active blogger, providing valuable and exciting information in her own witty style. You can also catch her on her wicked Blog Websoulz. Cheers

2 Comments to “Create a Sleek and Stylish Music Player Interface for iPhone in Photoshop”

  • Cathy says:

    Great tuts

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    November 9th, 2012 at 4:38 pm · Reply
  • ridlo says:

    awesome tutorial

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    November 26th, 2012 at 8:54 am · Reply

Post a comment

Pageviews: 8068 · Back to Top