How to Create a Classy Video Player in Photoshop

How to Create a Classy Video Player in Photoshop

Step 1: Create a new document

Start by creating a new document CTRL+N. Then make the document 590 px by 400 px with a white background.

Step 2: Background

At first set foreground color to grey (#4C4C4C) and fill your background with it by clicking Alt+Backspace. After that go to Filter > Noise > Add Noise… and set Amount value to 1%, Distribution set to Uniform and check Monochromatic option if not checked.

Step 3: Video body

Now we need to create a group. Go to Layer > New > Group… and name it “Player”. After that change foreground color to black (#000000) and pick Rectangle Tool (U). Then draw 520 px width and 340 px height rectangle inside the group as shown on the example below.

Now click right mouse button on shape layer thumbnail and select Blending Options… after that apply Outer Glow option.

Go to stock.xchng and download Karkonosze illustration or any other photo you like. Then drag your photo to Photoshop window. After that pick Move Tool (V) and drag photo to your current video player document and place above the rectangle layer. Now click Ctrl+T and resize your photo to fit on rectangle shape by height. Finally click twice on photo layer name and change it to “Picture”.

Now hold Ctrl button and click on rectangle shape thumbnail to make selection. After that click on “Picture” layer to make it active and click Shift+Ctrl+I to inverse selection. Then delete selected area.

Now duplicate “Picture” layer by clicking Ctrl+J. After that change blend mode to Soft Light and reduce Opacity to 50%.

Now create a new layer (Shift+Ctrl+N) and name it “Reflection”. After that change foreground color to white (#FFFFFF) and pick Polygonal Lasso Tool (L). Then draw a shape similar to an example below and fill it (Alt+Backspace) with white.

Click Ctrl+D to deselect area. After that click on “Picture” layer thumbnail to make new selection of picture area. Then click on “Reflection” layer to make it active and click Shift+Ctrl+I to inverse selection. Then delete selected area.

Click Ctrl+D to deselect selected area and reduce “Reflection” layer’s Opacity to 6%.

Step 4: Video Control

Create a new layer (Shift+Ctrl+N) and name it “Base”. Then pick Rectangle Tool (U) and draw 520 px width and 30 px height rectangle at the bottom of our picture. An example shown on the picture below.

Now click right mouse button on “Base” layer name and select Blending Options… after that apply following options.




Now download free icons by iconSweets and open downloaded PSD file in Photoshop. Then find “Play small”, “Music small” and “Arrow Up small” icons in “icons Small” group. After that drag (use Move Tool (V)) mentioned icons to your video player document and place above the “Base” layer.

Now click right mouse button on “Play small” icon layer and select Clear Layer Style. After that click right mouse button again and choose Blending Options… and then apply following options.



Now change foreground color to grey (#131313) and pick Rounded Rectangle Tool (U) with 20 px of radius. After that draw 290 px width and 10 px height shape as shown on the picture below.

Now click right mouse button on progress bar shape that we created and select Blending Options… after that apply following options.



Now create another rounded rectangle 210 px width and 9 px height as shown on the picture below.

Now click right mouse button on “Play small” icon layer and select Copy Layer Style. After that click right mouse button on just created rounded rectangle shape and select Paste Layer Style.

Grab Horizontal Type Tool (T), choose Arial 12 px size font and write the current and all video time. An example shown on the picture below.

Now click right mouse button on time text layer and select Paste Layer Style.

Using the same Horizontal Type Tool (T) and 12 px size Arial (Black) font write two letters – HD. Then Paste Layer Style as applied for time layer above.

Now find “Music small” icon layer and also paste layer style by clicking right mouse button.

Now find “Arrow Up small” icon layer and duplicate it by clicking Ctrl+J. After that click Ctrl+T and set height (H) to -100%. Then move duplicated icon to make a new icon as shown on the picture below.

Hold Ctrl and select both arrow layers. After that click Ctrl+T and rotate icons by 45 degrees. Then click right mouse button on one of the arrow layers name and choose Merge Layers.

Finally click right mouse button on merged layer and select Paste Layer Style to apply earlier used style.

Congratulations! We’ve done our video player interface. Hope you learned new techniques that will help you in future projects.

Final Result

Click on the image below to see the work in full scale.