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

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.

Create Zoom Player Skin Design in Photoshop CS3

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

Create Zoom Player Skin Design in Photoshop CS3

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

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

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.

Create Zoom Player Skin Design in Photoshop CS3

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

Create Zoom Player Skin Design in Photoshop CS3

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

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

Create Zoom Player Skin Design in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Zoom Player Skin Design in Photoshop CS3Gradient’s parameters:

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

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.

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

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

Create Zoom Player Skin Design in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Zoom Player Skin Design in Photoshop CS3

Blending 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
Create Zoom Player Skin Design in Photoshop CS3

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.

Create Zoom Player Skin Design in Photoshop CS3 

Create Zoom Player Skin Design in Photoshop CS3

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

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

Page: 1 2 3 4

Comments