Designing a Black Audio Player Interface
May 31st, 2008 by ART-D Posted in Adobe Photoshop, Designing
Make three copies of the recently made layer and select then Free Transform option to place the copies the same way demonstrated below:

Next stage includes drawing one more decorative element on the panel, situated on the right side of the player’s buttons, selecting for this operation the Rounded Rectangle Tool (U) with a radius of 10 px.

The layer’s parameters: Fill 0%
Blending Options>Inner Shadow

Blending Options>Color Overlay

Blending Options>Stroke

Gradient’s parameters:


Next try to draw the next demonstrated element with the Rectangle Tool (U) inside the decorative insertion on the right side.

The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:

Blending Options>Stroke

Make two copies of the recently made layer and after that select Free Transform option to place the copies as below:

Combine in a group all the layers composing the decorative insertion with its three elements (press Ctrl button to mark out the appropriate layers and then hold on the left mouse’s button while taking the marked layers on Create a new group solution). Make a copy of the last created group and choose again the Free Transform option to turn over the copy the same way shown below.
We need also to change the layer’s parameters of those three inside elements.
Blending Options>Gradient Overlay

Gradient’s parameters:


Let’s draw one more decorative element on the right side of the already done elements, applying as usually the Rectangle Tool (U) and the Convert Point Tool for the appropriate corrections.

The layer’s parameters: Fill 0%
Blending Options>Stroke

Gradient’s parameters:



Next we’ll draw the sound’s regulator on the left and right sides on the media player’s screen. Use for this operation the Rounded Rectangle Tool (U) (radius 10 px) to mark the placement of these regulators and then press Alt button while using the Rectangle Tool (U).

The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay
Gradient’s parameters:

Gradient’s parameters:


Insert also the track’s duration on the left side of the screen.


The layer’s parameters: Blending Options>Drop Shadow


Insert the rest of the track’s information necessary for getting it:

the track’s title, stereo, B, V, 44khz, 128kbps

mono

Using the Rounded Rectangle Tool (U) with a radius of 10 px, it’s possible to introduce the play cursor.

The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:




























shadolen White
08/11/2009
Thanks for the tips on the layer styles.
I will use these effective step in many projects.
Drew Lettner
04/03/2010
The final product is impressive, but I feel like the instruction provided in this tutorial is lacking . . . there were some things that were very unclear, and confusing that made it frustrating to navigate at some critical points, in my opinion. I managed to use my knowledge of other photoshop features to attain the result I wanted though . . .
unine
08/07/2011
great job