Designing a Black Audio Player Interface

May 31st, 2008 by ART-D Posted in Adobe Photoshop, Designing

Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

Use the same method, described above to create the next layer belonging to the buttons. The instruments applied are the same as in the previous case.

Designing a Black Audio Player Interface in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Gradient Overlay

Designing a Black Audio Player Interface in Photoshop CS3

Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

This time we have to use the Ellipse Tool (U) to represent the primary layer reserved for the main play button on the player.

Designing a Black Audio Player Interface in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Designing a Black Audio Player Interface in Photoshop CS3

Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3
Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

Choose again the same Ellipse Tool (U), useful for drawing the next layer reserved for the main button on the media player.

Designing a Black Audio Player Interface in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Bevel and Emboss

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Gradient Overlay

Designing a Black Audio Player Interface in Photoshop CS3

Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

Using the Pen Tool (P), let’s draw the symbol of the Play button.

Designing a Black Audio Player Interface in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Designing a Black Audio Player Interface in Photoshop CS3
Gradient’s parameters:

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

Applying the Rectangle Tool (U), it’s possible to create the “STOP” symbol from below and the “PAUSE” symbol from above. Their color is white.

Designing a Black Audio Player Interface in Photoshop CS3

It’s time to represent the symbols indicating the forward and back play. The instrument used in this case is the Custom Shape Tool (U) and white color. Free Transform option should be used if necessary.

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

We have to represent now several of the decorative elements between the buttons, applying the Rounded Rectangle Tool (U) with a radius of 2 px. Select then the Free Transform option for the appropriate inclinement.

Designing a Black Audio Player Interface in Photoshop CS3

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

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Inner Glow

Designing a Black Audio Player Interface in Photoshop CS3

Blending Options>Stroke

Designing a Black Audio Player Interface in Photoshop CS3

Designing a Black Audio Player Interface in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3 4

  • 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