Zoom Player Skin Design

Zoom Player Skin Design
Zoom Player Skin Design
Learn to create a fabulous looking player interface in this comprehensive tutorial.

Start by creating a new file (File>New) with 1024×768 px and 72 dpi. Using the Paint Bucket Tool (G), it’s possible to give black color to the new file.

Zoom Player Skin Design

Select the Rectangle Tool (U) to represent the same plane surface from below:

Zoom Player Skin Design

Select for the new layer the next shown parameters by making a mouse click on the processed layer on the layers’ panel: Fill 0%
Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Applying the Rounded Rectangle Tool (U) with a radius of 5 px, it’s possible to represent the primary layer of a media player on the picture we already have.

Zoom Player Skin Design

The layer’s parameters: Blending Options>Bevel and Emboss

Zoom Player Skin Design

Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Select again the Rectangle Tool (U) and try to represent a special zone reserved for the media player’s screen.

Zoom Player Skin Design

The layer’s parameters: Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

On the bottom part of the media player we’ll have to represent a zone reserved for the menu’s buttons. Use in this case the Rounded Rectangle Tool (U) with a radius of 20 px. Then press Alt button while using the Ellipse Tool (U) to cut out a special zone reserved for the main central button.

Zoom Player Skin Design

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

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

Use next the Rounded Rectangle Tool (U) with a radius of 10 px to represent the panel of play indicator.

Zoom Player Skin Design

The layer’s parameters: Blending Options>Inner Glow

Zoom Player Skin Design

Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

Zoom Player Skin Design

Use again the Ellipse Tool (U) with the color #282D33 to draw on the top part of the media player several elements reserved for the system buttons.

Zoom Player Skin Design

 

Zoom Player Skin Design

The Rounded Rectangle Tool (U) will be helpful in drawing a special frame for the system buttons.

Zoom Player Skin Design

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

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

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.

Zoom Player Skin Design

 

Zoom Player Skin Design

 

Zoom Player Skin Design

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

Zoom Player Skin Design

The layer’s parameters: Blending Options>Inner Glow

Zoom Player Skin Design

Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

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.

Zoom Player Skin Design

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.

Zoom Player Skin Design

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:

Zoom Player Skin Design

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.

Zoom Player Skin Design

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

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

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

Zoom Player Skin Design

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

Zoom Player Skin Design

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

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

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.

Zoom Player Skin Design

 

Zoom Player Skin Design

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

Zoom Player Skin Design

The layer’s parameters: Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

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

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Take again the Ellipse Tool (U) to draw a highlight on the sound’s regulator.

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Applying the Rounded Rectangle Tool (U) with a radius of 15 px and white color, it is possible to draw a highlight on the player itself and on its buttons. But this layer should be positioned under the layers containing the screen and the play button.

Zoom Player Skin Design

The layer’s parameters: Fill 10%

Zoom Player Skin Design

Try to make now the central player’s button with the Ellipse Tool (U).

Zoom Player Skin Design

The layer’s parameters: Blending Options>Inner Glow

Zoom Player Skin Design

Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Using the Ellipse Tool (U), it’s possible to draw a highlight on the button demonstrated below:

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

The symbol on the button from below is done with the Rectangle Tool (U), by holding the SHIFT button. The color is white.

Zoom Player Skin Design

The layer’s parameters: Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

On the play button’s panel we’ll introduce the indicator itself, colored with #017CC5, made with the Rounded Rectangle Tool (U) with a radius of 10 px and then press Alt button while applying the Rectangle Tool (U) to make a cut on the right side.

Zoom Player Skin Design

The layer’s parameters: Blending mode-Color

Zoom Player Skin Design

We’ll insert the file’s duration by drawing it on the Play button, keeping the demands from table below.

Zoom Player Skin Design

 

Zoom Player Skin Design

Use next the Custom Shape Tool (U) to draw on the player’s screen several rays. Then press Alt button on the same layer and use simultaneously the Rectangle Tool (U) to erase the unnecessary elements from the top part of media player (on the top edge of the media player).

Zoom Player Skin Design

 

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Using the Ellipse Tool (U), try to make the next layer, reserved for the player’s logotype.

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Use again the Pen Tool (P) to represent a triangle, colored with #FDC568

Zoom Player Skin Design

For getting a better result it’s necessary to combine in a group all the layers composing the triangle and the previous layer made before the triangle (press Ctrl button to mark out the necessary layers and hold on the left mouse’s button to take the marked layers down on Create a new group selection). Make a copy of this group and select the Free Transform option to turn over the copy as it is demonstrated on the next picture.

Zoom Player Skin Design

Applying the Ellipse Tool (U), it’s possible to represent the next layer, reserved for the player’s logotype.

Zoom Player Skin Design

The layer’s parameters: Blending Options>Gradient Overlay

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

Next step includes drawing a highlight on the logotype, applying the previous instrument, Ellipse Tool (U).

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

Make a copy of the last containing the logotype’s highlight and then select Free Transform option to turn over the copy, changing also the parameters of the copy’s layer:

Zoom Player Skin Design

 

Zoom Player Skin Design

Next we’ll choose the Custom Shape Tool (U) to represent the symbol of the logotype, having white color. Turn over the drawn element with the Free Transform selection.

Zoom Player Skin Design

 

Zoom Player Skin Design

 

Zoom Player Skin Design

Represent then a special frame reserved for the top part of the media player. The operation should be done with the Rounded Rectangle Tool (U) with a radius of 10 px.

Zoom Player Skin Design

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

Zoom Player Skin Design

Blending Options>Stroke

Zoom Player Skin Design

 

Zoom Player Skin Design

On the top part of the media player we’ll represent a highlight, applying the same instrument.

Zoom Player Skin Design

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

Zoom Player Skin Design

Gradient’s parameters:

Zoom Player Skin Design

 

Zoom Player Skin Design

 

Combine in a group all the layers composing the media player (press Ctrl button to accentuate the corresponding layers and then hold on the left mouse’s button to move the marked layers on Create a new group option). Make a copy later of the earlier made group and put together all the layers of the copied group, pressing the next combination of buttons CTRL+E. The Free Transform selection will be helpful in turning around the stuck layer.

Zoom Player Skin Design

Make a mouse click on Add a Mask option situated on the bottom part of the layers’ panel. In the same time apply the Gradient Tool (G) to represent a semitransparent reflection.

Zoom Player Skin Design

The media player is finished!

View full size here.