Zoom Player Skin Design

March 14th, 2008 by ART-D Posted in Adobe Photoshop, Designing

   

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

  •  

  •    
  •  

 

Post Pages: 1 2 3 4

  • VAMSI PAVAN

    12/09/2009

    The zoomplayer is the different designs in skins in the differnent shapes in the changes in the form of the company and different modes of the interesting. I am interest the zoomplayer colours and different modes.

  • Player1

    29/10/2009

    dont spread out the tutorials in pages we hate that!!!