Gamespot Media Player

Posted by fanatic on January 3, 2008

Preview:
Gamespot Media Player

STEP 1:
Start with a large black canvas, in your layers window make a new layer set and name it Gamespot Media Player. Create a new layer, Choose your Rectangle Tool and draw a 129 x 33 pixels, #530303 colored rectangle.

STEP 2: With your rectangle layer from step 1 add the following layer styles:

STEP 3: In a new layer draw a 1 pixel, #666666 colored line on the left and top edge of your rectangle.

STEP 4: Create a new layer and draw a 1 pixel, #181818 colored line the next to it draw a #474747 colored line.

STEP 5: Choose your text tool and select font Webdings from the font list. Set the size to 30 pt, smooth and #FF6900 for color. In a new text layer type ‘4′ on your keyboard to get the play button.

STEP 6: Still with your Text Tool but edit the size to 22 pt, in a new text layer type ‘9′ on your keyboard to get the fast rewind button.

STEP 7: In a new layer draw a 95 x 33 pixels, #2A2A2A colored rectangle next to your play buttons. Then add a gradient overlay layer style.

STEP 8: Create another layer and draw a 95 x 7 pixels, white rectangle on your gradient rectangle. Then set the layers blending mode to Darken and add a Gradient overlay layer style.

STEP 9: Again make a new layer and draw a 280 x 33 pixels, #333333 rectangle.

STEP 10: Choose your Rounded Rectangle Tool with a 6 px radius and anti-aliased checked. In a new layer draw a #333333 colored rounded rectangle next to your #333333 colored rectangle.

STEP 11: Now make another new layer and draw a 297 x 5 pixels, #FF6900 colored rectangle.

STEP 12: Again choose your Text tool and select font Webdings from the font list. Set the size to 18 pt, smooth and #FF6900 for color. In a new text layer type ‘W‘ on your keyboard to get the speaker icon.

STEP 13: Now make a new layer and draw a 98 x 12 pixels, #2B2B2B colored rectangle next to your speaker icon. Then add a stroke layer style.

STEP 14: Create a new layer and draw a 1px black line like you see on the picture below.

STEP 15: Now draw 1 px orange lines which will represent the volume between each black lines.

STEP 16: On your orange rectangle draw a small #CCCCCC colored rectangle. Then add a Gradient Overlay and Stroke layer styles.

STEP 17: Back on your gradient rectangle and add the time text of the video using font Arial, regular, 10 pt, none and #BEBEBE for color.

STEP 18: Choose your Text Tool and select font Wingdings from the font list. Set the size to 26 pt, smooth and #8E8E8E for color. In a new text layer type ‘C‘ on your keyboard to get the thumbs up icon. Then duplicate that text layer with the thumbs up icon and flip it through Edit -> Transform -> Flip Vertical.

STEP 19: Make a new layer and brush the inside of the thumb up icons with the same color.

Final result: