tutorial: Custom Web Media Player

Preview: Custom Web Media Player

preview

Step one:

Start with a large #FFFDDF colored canvas, in your layers window make a new layer set. Name it Custom Web Media Player. Choose your rounded rectangle tool and set the radius setting to 10 pixels. In a enw layer draw a 442 x 24 pixels, #D1FFFD colored rounded rectangle. Use the fixed size setting under rounded rectangle options to make the exact rounded rectangle.

screen screen screen screen result

Step two:

In a new layer draw a 20 x 20 pixels, white circle using your ellipse tool. Use the fixed size setting under ellipse options to make the exact circle. Set your circle layers opacity level at 80%. Choose your text tool and select font Webdings from the list. Set the size to 12 pt, regular, strong and black for color. In a new text layer type "4" to get the play button. Set your text layers opacity level to 30%.

result

Step three:

Now add 3 more circles, similar to the first one. On the circles add a stop button made of a square, then for the forward and rewind buttons use your text tool by typing "8" to get the icon.

result

Step four:

Choose your rounded rectangle tool and set the radius setting to 8 pixels. In a enw layer draw a 258 x 7 pixels, white rounded rectangle. Use the fixed size setting under rounded rectangle options to make the exact rounded rectangle. Add a gradient overlay layer style:

screen screen

Step five:

Choose your text tool and select font Webdings from the list. Set the size to 24 pt, regular, crisp and black for color. In a new text layer type ";" to get the pause button. Add a stroke layer style:

screen result

Step six:

Again choose your text tool and select font Verdana from the list. Set the size to 11 pt, bold, nine and black for color. In a new text layer type a temporary time next to your rounded rectangle. Set your text layers opacity level to 30%.

result

Step seven:

In a new layer draw a large black rectangle which will hold your video content. Set your layers blending mode to Lighten and add the following layer styles:

screen screen result

Final Image: Custom Web Media Player

final version