Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Zoom Player Skin Design

Create a new layer on which we shall use the Pencil Tool (B) (brush of 1 px) with white color (Fill 50%) to represent the symbols on the system buttons and on the top left corner.

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

Take the Ellipse Tool (U) and start drawing the Play button for the player.

Create Zoom Player Skin Design in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Zoom Player Skin Design in Photoshop CS3Blending Options>Gradient Overlay

Create Zoom Player Skin Design in Photoshop CS3

Gradient’s parameters:

Create Zoom Player Skin Design in Photoshop CS3

Blending Options>Stroke

Create Zoom Player Skin Design in Photoshop CS3

Gradient’s parameters:

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

Make five copies of the layer containing the button and select the Free Transform option to make the necessary changes on the copies’ sizes and on their placement on the picture.

Create Zoom Player Skin Design in Photoshop CS3

Create again a new layer and use on it the Pencil Tool (B) (brush of 1 px) with the color #2C3437 to represent different symbols on the player’s buttons.

Create Zoom Player Skin Design in Photoshop CS3

Make copies of the layers composing the buttons’ symbols and select Free Transform option to turn over the copies and place them the way shown below:

Create Zoom Player Skin Design in Photoshop CS3

Next we have to draw on the left side of the play panel the sound’s indicator. The instrument applied in this case is Rounded Rectangle Tool (U) with a radius of 10 px.

Create Zoom Player Skin Design in Photoshop CS3

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

Create Zoom Player Skin Design in Photoshop CS3

Blending Options>Stroke

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3 Now we should represent several special buttons exactly the way we have represented the system buttons on the top part of the player. Select the Ellipse Tool (U) for this operation and the color #282D33

Create Zoom Player Skin Design in Photoshop CS3

All those special buttons should be combined in a certain frame, made with the Rounded Rectangle Tool (U) and a radius of 15 px.

Create Zoom Player Skin Design in Photoshop CS3

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

Create Zoom Player Skin Design in Photoshop CS3

Blending Options>Stroke

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

Create again a new layer (Create new layer) on which we’ll use the Pencil Tool (B) (brush of 1 px) to draw the symbols on the buttons.

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

Get back to the panel, containing the sound button and create an opening for motion regulator. The instrument used in these cases is Rectangle Tool (U).

Create Zoom Player Skin Design in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Zoom Player Skin Design in Photoshop CS3

Gradient’s parameters:

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

The Ellipse Tool (U) will be helpful in representing the sound’s regulator:

Create Zoom Player Skin Design in Photoshop CS3

Page: 1 2 3 4

Comments