Search With GOOGLE Search.

Friday, September 2, 2011

Hongkiat.com: Design Sleek Video Player Interface in Photoshop

Hongkiat.com: Design Sleek Video Player Interface in Photoshop

Design Sleek Video Player Interface in Photoshop

Posted: 02 Sep 2011 05:38 AM PDT

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.

sleek video player photoshop tut Design Sleek Video Player Interface in Photoshop

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.

Step 1: Making Background

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

tutorial video player interface 01 Design Sleek Video Player Interface in Photoshop

Step 2

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

tutorial video player interface 02 Design Sleek Video Player Interface in Photoshop

Step 3

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

tutorial video player interface 03 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 04 Design Sleek Video Player Interface in Photoshop

Step 5

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

tutorial video player interface 05 Design Sleek Video Player Interface in Photoshop

Step 6: Video Player Basic Shape

Draw a rectangle with color: #151d25.

tutorial video player interface 06 Design Sleek Video Player Interface in Photoshop

Add Layer Styles: Gradient Overlay and Stroke.

tutorial video player interface 07 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 08 Design Sleek Video Player Interface in Photoshop

Here’s the result after adding Layer Styles.

tutorial video player interface 09 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 10 Design Sleek Video Player Interface in Photoshop

Add Layer Styles: Drop Shadow and Gradient Overlay.

tutorial video player interface 11 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 12 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 13 Design Sleek Video Player Interface in Photoshop

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%.

tutorial video player interface 14 Design Sleek Video Player Interface in Photoshop

Step 10

Repeat previous process on right side of the title bar.

tutorial video player interface 15 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 16 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 17 Design Sleek Video Player Interface in Photoshop

Add Layer Style: Gradient Overlay.

tutorial video player interface 18 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 19 Design Sleek Video Player Interface in Photoshop

Step 13

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

tutorial video player interface 20 Design Sleek Video Player Interface in Photoshop

Add Layer Style: Outer Glow.

tutorial video player interface 21 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 22 Design Sleek Video Player Interface in Photoshop

Step 14

Repeat this process to add maximize and minimize symbol.

tutorial video player interface 23 Design Sleek Video Player Interface in Photoshop

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%.

tutorial video player interface 24 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 25 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 26 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 27 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 28 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 29 Design Sleek Video Player Interface in Photoshop

Step 18: Screen

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

tutorial video player interface 30 Design Sleek Video Player Interface in Photoshop

Add Layer Styles: Drop Shadow and Gradient Overlay.

tutorial video player interface 31 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 32 Design Sleek Video Player Interface in Photoshop

Step 19

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

tutorial video player interface 33 Design Sleek Video Player Interface in Photoshop

Step 20

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

tutorial video player interface 34 Design Sleek Video Player Interface in Photoshop

Step 21

Draw smaller rectangle with color #252626.

tutorial video player interface 35 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 36 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 37 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 38 Design Sleek Video Player Interface in Photoshop

This is the result after adding Layer Styles.

tutorial video player interface 39 Design Sleek Video Player Interface in Photoshop

Step 22: Progress Bar

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

tutorial video player interface 40 Design Sleek Video Player Interface in Photoshop

Add Layer Styles: Drop Shadow and Gradient Overlay.

tutorial video player interface 41 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 42 Design Sleek Video Player Interface in Photoshop

Step 23

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

tutorial video player interface 43 Design Sleek Video Player Interface in Photoshop

Step 24

Here’s what we have in 100% magnification.

tutorial video player interface 44 Design Sleek Video Player Interface in Photoshop

Step 25

Draw smaller rectangle with color #313131.

tutorial video player interface 45 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 46 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 47 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 48 Design Sleek Video Player Interface in Photoshop

This is what we have.

tutorial video player interface 49 Design Sleek Video Player Interface in Photoshop

Step 26

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

tutorial video player interface 50 Design Sleek Video Player Interface in Photoshop

Change Layer Styles’ settings.

tutorial video player interface 51 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 52 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 53 Design Sleek Video Player Interface in Photoshop

Using these settings, this is what we have now.

tutorial video player interface 54 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 55 Design Sleek Video Player Interface in Photoshop

Step 28

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

tutorial video player interface 56 Design Sleek Video Player Interface in Photoshop

Step 29

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

tutorial video player interface 57 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 58 Design Sleek Video Player Interface in Photoshop

Step 30

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

tutorial video player interface 59 Design Sleek Video Player Interface in Photoshop

This is what we see in 100% magnification.

tutorial video player interface 60 Design Sleek Video Player Interface in Photoshop

Step 31: Buttons

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

tutorial video player interface 61 Design Sleek Video Player Interface in Photoshop

Add Layer Styles: Drop Shadow and Gradient Overlay.

tutorial video player interface 62 Design Sleek Video Player Interface in Photoshop

tutorial video player interface 63 Design Sleek Video Player Interface in Photoshop

Step 32

Add some highlights on left side of the rectangle.

tutorial video player interface 64 Design Sleek Video Player Interface in Photoshop

Step 33

Use basic shape tool to draw some buttons.

tutorial video player interface 65 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 66 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 67 Design Sleek Video Player Interface in Photoshop

Add Layer Style: Gradient Overlay.

tutorial video player interface 68 Design Sleek Video Player Interface in Photoshop

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%.

tutorial video player interface 69 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 70 Design Sleek Video Player Interface in Photoshop

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

tutorial video player interface 71 Design Sleek Video Player Interface in Photoshop

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.

tutorial video player interface 72 Design Sleek Video Player Interface in Photoshop

Step 38: Final Result

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

final Design Sleek Video Player Interface in Photoshop

Download PSD

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

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)