Design a Sleek Media Player
Posted on January 19th, 2008
In this tutorial you will learn how to Design a Sleek Media Player for playing video contents.
Step one:
Start by creating a new document in Photoshop. Leave all the default settings except for the canvas dimensions, use 660×400 pixels.
Step two:
Choose your Rounded Rectangle Tool from the tools palette then above your screen under the options palette choose Fill Pixels, set the radius to 20 px and check anti-aliased. Create a new layer and draw dark gray, color code #353535 rounded rectangle, exact size 560×230 px. If you have a bigger video size, set your own settings.
Step three:
Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options to your rounded rectangle layer.
Step four:
With all that blending options added your plain rounded rectangle should now look like this.
Step five:
In a new layer and using your rounded rectangle tool draw a black rounded rectangle like you see on the picture below.
Step six:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your black rounded rectangle layer.
Step seven:
Now create the control buttons, first the play button. Create a new layer and draw a gray circle sized 20×20 px. Then get out your Horizontal Type Tool and set the font to ‘Eras Bold ITC’, sized at 140 pt and black for color. In a new text layer type ‘4′ which should turn into an arrow icon.
Step eight:
Create a new layer and draw a gray circle sized 20×20 px. Then draw a small white square.
Step nine:
Make more gray circles for the fast forward and fast rewind buttons. Type ‘8′ on your keyboard using font Webdings for the fast word icon, for the fast rewind just flip horizontal.
Step ten:
Create a new layer and draw a long white rounded rectangle. This will be the strip for the timer of your videos. Then under Layer Style(Layer > Layer Style) add a Stroke blending option to your white rounded rectangle layer.
Step eleven:
Create a new layer and draw a two, white horizontal thick lines like you see below. Then type the total time using font Arial, bold, 12 pt, none and white for color.
Step twelve:
Now add a sample image of a video with a size of 448×181 px on the center of the media player.
Step thirteen:
In a new layer m a black rectangle with the same size of the sample image. Then set the layers blending mode to Darken and under Layer Style(Layer > Layer Style) add a Stroke blending option to your black rectangle layer.
Step fourteen:
Above the screen add the title of the video that will be playing. Use font Arial, bold, 14 pt, none and white for color.
Final Image:
Sleek Media Player Design.
