Design Sleek Video Player Interface – Photoshop Tutorial

This era is just about sleek interface. It does not only looks professional, but most importantly giving people the feel of reliability, and that’s exactly what most businesses are seeking for. Sensing the importance, I’m going to show you step-by-step to design a sleek interface of a video player.

We will use layer styles, vector drawing, and some manual drawings to complete this interface. Let’s get into the creation process!

Required Resource

To follow this tutorial, you will need this free resource.

• Repeatable Pixel Pattern from PSDfreemium

Step 1: Making Background

Start by creating a new file with size 800×500 px. Draw a radial gradient from white to gray.

Step 2

Let’s darken the gradient by adding Adjustment Layer > Hue/Saturation and reduce Lightness setting.

Step 3

Create new layer and fill it with white. Click Filter > Noise > Add Noise. Set its blend mode to Multiply.

Step 4

Duplicate noise layer we have just created by pressing Ctrl + J. Activate move tool then press down arrow and right arrow once to move it 1 px down and right. Press Ctrl + I to invert its color and set its blend mode to Screen. Here, we have a nice texture.

Step 5

Select both noise layers and then hit Ctrl + G to put it inside a group. Reduce its Opacity to 50%.

Step 6: Video Player Basic Shape

Draw a rectangle with color: #151d25.

Add Layer Styles: Gradient Overlay and Stroke.

Here’s the result after adding Layer Styles.

Step 7: Title Bar

Draw a rectangle shape on top of the main interface. Set its color to #272e36. We will use this rectangle for title bar.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 8

Zoom closer to left side of the rectangle. Activate pencil tool and set its brush size to 1 px. Draw some lines as a highlight.

Step 9

Draw another highlight on upper part of the title bar. Create new layer and then draw 1 px white line. Erase both ends using soft eraser tool. Reduce its Opacity to 10%.

Step 10

Repeat previous process on right side of the title bar.

Step 11

Here’s what we have in 100% magnification. As you can see, the highlight is very subtle. But, the interface is not so flat anymore.

Step 12: Minimum, Maximum, and Close Button

Draw a rectangle on right side of title bar. Use color #5c3936. This will be background for close button.

Add Layer Style: Gradient Overlay.

Step 13

Add close symbol made from two overlapping rectangle paths in mode, Add to Shape.

Add Layer Style: Outer Glow.

This is the result after we added Outer Glow onto the close symbol.

Step 14

Repeat this process to add maximize and minimize symbol.

Step 15

Let’s add a separator between each symbol. Create new layer, draw a 1 px black line and reduce its Opacity to 30%. Next to it, draw another 1 px black line and reduce its layer Opacity to 70%. Once again, this time draw 1 px white line with Opacity 5%.

This is what we have in 100% size. Now, we have a nice inset line and adding depth into the interface.

Step 16

Put those lines in a separate group layer by selecting them and hit Ctrl + G. Hold Alt and drag group to duplicate it. Put the lines between each symbol.

Step 17

Add video title on the title bar. Add Layer Styles: Drop Shadow and Gradient Overlay. These Layer Styles will add metallic effect onto the text.

Step 18: Screen

Draw a rectangle for screen area. Use #272e36 for its color.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 19

Create new layer and then draw highlight using tool pencil with 1 px brush.

Step 20

Again, draw another highlight on upper side of the screen area.

Step 21

Draw smaller rectangle with color #252626.

Add Layer Styles: Drop Shadow, Inner Shadow, and Gradient Overlay.

This is the result after adding Layer Styles.

Step 22: Progress Bar

Draw a rectangle with color #272e36 under the screen.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 23

Just like what we did before, draw some highlights on the rectangle using 1 px pencil tool.

Step 24

Here’s what we have in 100% magnification.

Step 25

Draw smaller rectangle with color #313131.

Add Layer Styles: Inner Shadow, Inner Glow, and Gradient Overlay.

This is what we have.

Step 26

Duplicate rectangle that we have just created by pressing Ctrl + J. Change its color to #357ffa.

Change Layer Styles’ settings.

Using these settings, this is what we have now.

Step 27

Activate Direct Selection tool and then select points on its left side. Press Shift + Left Arrow a few times to move selected points.

Step 28

Add total time track info on top of the loading bar.

Step 29

Draw a black rectangle covering the progress and then reduce its Opacity to 10%.

Below, you can see subtle difference on progress bar lighting before and after adding the black rectangle.

Step 30

Draw highlights on the progress bar using 1 px pencil tool.

This is what we see in 100% magnification.

Step 31: Buttons

Let’s draw another rectangle with color #272e36. This time we will use it to place some controller buttons.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 32

Add some highlights on left side of the rectangle.

Step 33

Use basic shape tool to draw some buttons.

Step 34: Shadow

Hold Ctrl and click basic shape of the interface to create a new selection based on its shape. Create new layer and place it behind the video player. Fill selection with black. Remove selection by pressing Ctrl + D. Soften the shadow by applying Gaussian Blur, click Filter > Blur > Gaussian Blur.

Step 35: Add Reflection

Duplicate the interface basic shape and reduce its Fill to 0%. Place it on top of the screen. Draw a polygon on left side the rectangle and set its mode to subtract.

Add Layer Style: Gradient Overlay.

Step 36: Subtle Pattern on Screen

Currently, the screen appears very flat. Select main screen area and fill it with any color. Set its Fill to 0%.

Grab a nice pixel pattern from PSDfreemium. Use one of the available settings on Layer Style: Pattern Overlay.

Make sure the pattern is very subtle by setting its Opacity to only 1%.

Step 37

Finally, activate brush tool. Set brush hardness to 0% and set its Opacity to very low, 2 or 3%. Paint a soft glow on center of the screen.

Step 38: Final Result

This is the result of tutorial. I hope you learned some new techniques and had some fun while following it.

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.

• Sleek Video Player Interface Tutorial PSD File