In this tutorial you will learn how to create a classy video player in Photoshop. Our video player looks quite simple but very clean and professional. For creating this we will use breath-taking winter landscape, some beautiful minimalistic icons and various blending options to achieve pixel perfect and attractive media player interface.

Hope you will find this tutorial useful and you’ll learn something new. Please share your thoughts about this tutorial and the final result in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.video-player.zip (1,2 MB)

Tutorial Resources

Preview

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.

Search This Site

Most Popular Tags

Social Networking

Partners

About Us

Web Design Fan is a blog focused on the beautiful and interesting world of web design and development. We post tutorials, review web tools and services, give away graphics, and deliver all of the information web designers need the most.

Write With Us

We're looking for talented writers to contribute articles to Web Design Fan. If you think you might be a good fit, contact us.