Designing a Black Audio Player Interface
May 31st, 2008 by ART-D Posted in Adobe Photoshop, Designing
Blending Options>Stroke


Create a new layer and then let’s draw on it a new decorative element situated on the bottom part of the media player’s screen. We need to choose also the Pencil Tool (B) (brush of 3 px) for this manipulation. All the elements should be created on the same layer. The color is white.

Make a click on the same layer on the bottom part of the layers’ panel on Add a Mask option. Using the Gradient Tool (G) (the instrument’s direction should be from left to the right side), it’s possible to represent a kind of darkening.

It’s time to create a new layer for a special button, applying the Rounded Rectangle Tool (U) (radius 5 px) and the color from here - #5E5E5E

Make a copy of the new layer and select the Free Transform option to place the copy as the next image indicates it.

Make one more copy of the button’s layer and select the Free Transform option to situate the copy the same way from next picture, changing also the layer’s parameters:

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


Create a new layer and then apply the Pencil Tool (B) (radius 3 px) to represent the symbols on those special buttons.

Using the Rectangle Tool (U), it’s time to draw the layer reserved for the new ornament that will be situated on the right side of the media player’s screen, having the color #2B2B2B

The layer’s parameters: Blending Options>Stroke


Create a new layer again and on this one we should use a brush out of the so – called brushes’ set Floral Ornaments. This time the color applied is white too.


Press Alt button while making a click between the brush’s layers and the ornament’s layer (on the layers’ panel).


Select the next shown parameters for the brush’s layer: Fill 40%

It’s time to draw a highlight on the media player’s screen, using this time the Rounded Rectangle Tool (U) (radius 20 px).

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

Gradient’s parameters:


Create once again a new layer (Create new layer) on which we need to draw several highlights on the media player’s body, applying in this case the Brush Tool (B) (Opacity 20%) of white color.



You may see above what we’ve got on the final stage!
View full size here.




















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 . . .