{"id":10352,"date":"2011-09-02T21:31:44","date_gmt":"2011-09-02T13:31:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10352"},"modified":"2022-05-19T22:08:02","modified_gmt":"2022-05-19T14:08:02","slug":"sleek-video-player-interface-photoshop-tutorial","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sleek-video-player-interface-photoshop-tutorial\/","title":{"rendered":"Design Sleek Video Player Interface – Photoshop Tutorial"},"content":{"rendered":"

This era is just about sleek interface. It does not only looks professional, but most importantly gives people the feel of reliability, and that\u2019s exactly what most businesses are seeking for. Sensing the importance, I\u2019m going to show you step-by-step to design a sleek interface of a video player.<\/p>\n

We will use layer styles, vector drawing, and some manual drawings to complete this interface. Let\u2019s get into the creation process!<\/p>\n

Step 1: Making Background<\/h2>\n

Start by creating a new file with size 800\u00d7500 px. Draw a radial gradient from white to gray.<\/p>\n

\"tutorial<\/p>\n

Step 2<\/h2>\n

Let\u2019s darken the gradient by adding Adjustment Layer > Hue\/Saturation and reduce Lightness setting.<\/p>\n

\"tutorial<\/p>\n

Step 3<\/h2>\n

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

\"tutorial<\/p>\n

Step 4<\/h2>\n

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

\"tutorial<\/p>\n

Step 5<\/h2>\n

Select both noise layers and then hit Ctrl<\/span> + G<\/span> to put it inside a group. Reduce its Opacity to 50%.<\/p>\n

\"tutorial<\/p>\n

Step 6: Video Player Basic Shape<\/h2>\n

Draw a rectangle with color: #151d25.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Gradient Overlay and Stroke.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Here\u2019s the result after adding Layer Styles.<\/p>\n

\"tutorial<\/p>\n

Step 7: Title Bar<\/h2>\n

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

\"tutorial<\/p>\n

Add Layer Styles: Drop Shadow and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 8<\/h2>\n

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.<\/p>\n

\"tutorial<\/p>\n

Step 9<\/h2>\n

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%.<\/p>\n

\"tutorial<\/p>\n

Step 10<\/h2>\n

Repeat previous process on right side of the title bar.<\/p>\n

\"tutorial<\/p>\n

Step 11<\/h2>\n

Here\u2019s what we have in 100% magnification. As you can see, the highlight is very subtle. But, the interface is not so flat anymore.<\/p>\n

\"tutorial<\/p>\n

Step 12: Minimum, Maximum, and Close Button<\/h2>\n

Draw a rectangle on right side of title bar. Use color #5c3936. This will be background for close button.<\/p>\n

\"tutorial<\/p>\n

Add Layer Style: Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 13<\/h2>\n

Add close symbol made from two overlapping rectangle paths in mode, Add to Shape.<\/p>\n

\"tutorial<\/p>\n

Add Layer Style: Outer Glow.<\/p>\n

\"tutorial<\/p>\n

This is the result after we added Outer Glow onto the close symbol.<\/p>\n

\"tutorial<\/p>\n

Step 14<\/h2>\n

Repeat this process to add maximize and minimize symbol.<\/p>\n

\"tutorial<\/p>\n

Step 15<\/h2>\n

Let\u2019s 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%.<\/p>\n

\"tutorial<\/p>\n

This is what we have in 100% size. Now, we have a nice inset line and adding depth into the interface.<\/p>\n

\"tutorial<\/p>\n

Step 16<\/h2>\n

Put those lines in a separate group layer by selecting them and hit Ctrl<\/span> + G<\/span>. Hold Alt<\/span> and drag group to duplicate it. Put the lines between each symbol.<\/p>\n

\"tutorial<\/p>\n

Step 17<\/h2>\n

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.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 18: Screen<\/h2>\n

Draw a rectangle for screen area. Use #272e36 for its color.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Drop Shadow and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 19<\/h2>\n

Create new layer and then draw highlight using tool pencil with 1 px brush.<\/p>\n

\"tutorial<\/p>\n

Step 20<\/h2>\n

Again, draw another highlight on upper side of the screen area.<\/p>\n

\"tutorial<\/p>\n

Step 21<\/h2>\n

Draw smaller rectangle with color #252626.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Drop Shadow, Inner Shadow, and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

This is the result after adding Layer Styles.<\/p>\n

\"tutorial<\/p>\n

Step 22: Progress Bar<\/h2>\n

Draw a rectangle with color #272e36 under the screen.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Drop Shadow and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 23<\/h2>\n

Just like what we did before, draw some highlights on the rectangle using 1 px pencil tool.<\/p>\n

\"tutorial<\/p>\n

Step 24<\/h2>\n

Here\u2019s what we have in 100% magnification.<\/p>\n

\"tutorial<\/p>\n

Step 25<\/h2>\n

Draw smaller rectangle with color #313131.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Inner Shadow, Inner Glow, and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

This is what we have.<\/p>\n

\"tutorial<\/p>\n

Step 26<\/h2>\n

Duplicate rectangle that we have just created by pressing Ctrl<\/span> + J<\/span>. Change its color to #357ffa.<\/p>\n

\"tutorial<\/p>\n

Change Layer Styles\u2019 settings.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Using these settings, this is what we have now.<\/p>\n

\"tutorial<\/p>\n

Step 27<\/h2>\n

Activate Direct Selection tool and then select points on its left side. Press Shift<\/span> + Left Arrow<\/span> a few times to move selected points.<\/p>\n

\"tutorial<\/p>\n

Step 28<\/h2>\n

Add total time track info on top of the loading bar.<\/p>\n

\"tutorial<\/p>\n

Step 29<\/h2>\n

Draw a black rectangle covering the progress and then reduce its Opacity to 10%.<\/p>\n

\"tutorial<\/p>\n

Below, you can see subtle difference on progress bar lighting before and after adding the black rectangle.<\/p>\n

\"tutorial<\/p>\n

Step 30<\/h2>\n

Draw highlights on the progress bar using 1 px pencil tool.<\/p>\n

\"tutorial<\/p>\n

This is what we see in 100% magnification.<\/p>\n

\"tutorial<\/p>\n

Step 31: Buttons<\/h2>\n

Let\u2019s draw another rectangle with color #272e36. This time we will use it to place some controller buttons.<\/p>\n

\"tutorial<\/p>\n

Add Layer Styles: Drop Shadow and Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

\"tutorial<\/p>\n

Step 32<\/h2>\n

Add some highlights on left side of the rectangle.<\/p>\n

\"tutorial<\/p>\n

Step 33<\/h2>\n

Use basic shape tool to draw some buttons.<\/p>\n

\"tutorial<\/p>\n

Step 34: Shadow<\/h2>\n

Hold Ctrl<\/span> 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<\/span> + D<\/span>. Soften the shadow by applying Gaussian Blur, click Filter > Blur > Gaussian Blur.<\/p>\n

\"tutorial<\/p>\n

Step 35: Add Reflection<\/h2>\n

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.<\/p>\n

\"tutorial<\/p>\n

Add Layer Style: Gradient Overlay.<\/p>\n

\"tutorial<\/p>\n

Step 36: Subtle Pattern on Screen<\/h2>\n

Currently, the screen appears very flat. Select main screen area and fill it with any color. Set its Fill to 0%.<\/p>\n

\"tutorial<\/p>\n

Grab a nice pixel pattern from PSDfreemium. Use one of the available settings on Layer Style: Pattern Overlay.<\/p>\n

\"tutorial<\/p>\n

Make sure the pattern is very subtle by setting its Opacity to only 1%.<\/p>\n

\"tutorial<\/p>\n

Step 37<\/h2>\n

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.<\/p>\n

\"tutorial<\/p>\n

Step 38: Final Result<\/h2>\n

This is the result of tutorial. I hope you learned some new techniques and had some fun while following it.<\/p>\n

\"final\"<\/p>\n

Download PSD<\/h2>\n

Can\u2019t achieve certain step? Here is the result\u2019s PSD file for you to test and play with.<\/p>\n