Copy

This post shows the process of copying the above music app in photoshop. 

I started by doing the basic font, Arial, which is used for the track info because it is the same font used in the original app. The reason for the use of this font is because it needs to be easy to read as the purpose of the font is to tell the audience about the track. The status bar is copied from screenshot of the app but is part of the User interface of the phone operating system and not the actual app. I also added a textured background similar to the original which was a leather texture.
 

To create this volume knob I used angular gradient with 3 dark points and 4 light points to give the effect of machined metal knob. I then used drop shadows to give the illusion the knob is raised above the background and implies that it has a use in the design and cam be interacted with.

The aux cord was created as a vector image, drawn over the original aux cord. I used gradients and drop shadows to give illusion that the aux cord is sticking out of the screen.

I created the repeat and shuffle button using the pen tool, tracing over the original buttons. I used inner shadows to indent the buttons into the texture background, similar to the arrow buttons either side of volume knob.

To create navigation button, I used the same technique as creating the machined aluminium effect. I used a series of drop shadows to give the illusion that the navigation button is set within an indent textured background.

   
This video shows how I created the play text, since we could not find a matching font I decided to make my own in illustrator.