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!

Video Player Skin

Design your own video player interface in Photoshop.

Final Image Preview

Create Video Player Skin in Photoshop CS

Create a new file (File>New), having 314×550 px and 72 dpi. Take then the Rectangle Tool (U) to create the background of the next picture to be.

Create Video Player Skin in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Video Player Skin in Photoshop CS

Gradient’s parameters:

Create Video Player Skin in Photoshop CS

Blending Options>Stroke

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Next we’ll select the Rounded Rectangle Tool (U) and we’ll draw the upper palette of the media player to be.

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Video Player Skin in Photoshop CSBlending Options>Inner Glow

Create Video Player Skin in Photoshop CS

Blending Options>Gradient Overlay

Create Video Player Skin in Photoshop CS

Gradient’s parameters:

Create Video Player Skin in Photoshop CS

Blending Options>Stroke

Create Video Player Skin in Photoshop CS

Gradient’s parameters:

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Make a copy of the new made layer and choose the Free Transform option to place the copy like it is shown in the next picture. We shall move off the unnecessary parameters out of the copy: Blending Options>Gradient Overlay
(the main copy’s color is black)

Create Video Player Skin in Photoshop CS

Choose now the Rectangle Tool (U) to represent on the upper part of the media player’s palette a kind of screen of black color. The screen’s layer must be placed upper than the layer of the upper palette, on the layers’ palette.

Create Video Player Skin in Photoshop CSPress on the Alt button and make a mouse’s click between the black screen’s layer and the upper palette of the media player for the screen to be applied in the limits of the palette.

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Draw next a thin stripe on the upper part of the lowest palette. The stripe is reserved for the media player’s play list. Place the stripe’s layer upper than the layer of the lowest palette of the media player.

Create Video Player Skin in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Video Player Skin in Photoshop CS

Gradient’s parameters:

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Press on the Alt button and make a mouse’s click between the layers to get the result described before.

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CSDraw next a small star on the stripe’s right side. The star should be of white color. Select the Custom Shape Tool (U) for this operation. The star’s layer should be placed upper than the layer containing the play list’s stripe.

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Create Video Player Skin in Photoshop CS

Page: 1 2 3

Comments