Homemade Tutorials

Hi everyone. Sorry for the hiatus in writing tutorials, I’ve just been real busy these past weeks and didn’t have time to sit down and write. Today I had a couple of free hours so I decided to write another tutorial. We’re going to learn how to create a skin for your web video player. This is just the design part which we will do in Photoshop. Perhaps it will be followed up by a Flash tutorial on how to implement this skin into an actual working player.

I know this has probably been done a trillion times before, but I’ve tried to keep it as simple as possible, using layer styles that you can easily duplicate and a decent number of steps. So, without further ado, let’s start and fill up the web with good looking video players

Step 1

Let’s go ahead and create ourselves a new document of 800x600 resolution. Fill up the first layer with Black (#000000) and name it “Black Background“. Create a new layer (Ctrl+Shift+N) and fill it up (Alt+Bksp) with #33505f, then name it “Gradient Background“. Add a mask to it, then select the mask.

Grab the Gradient tool (G) and select Radial Gradient. Press D to ensure you’ve got the default background and foreground colors selected, then hold Shift and with the mask selected try to create a gradient similar to the one in the picture.

Don’t be too hard on yourself if it’s not identical, this is solely for the purpose of background effects. It’s not part of the actual player skin (at this point imagine me with a shy grin on my face side stepping and dashing away from the frame). But I digress.

Step 2

Next, it’s time to start creating the actual player interface design. Let’s select the Rounded Rectangle Tool and draw up a rectangle similar to the one in the image below, with a corner radius of 5px. You can make it as big as you need it to be. Apply to it the layer effects like shown below. Name the layer “Skin Background“.

Step 3

Duplicate the Skin Background layer, right click on it in the Layers window and select Clear Layer Style to strip it of all the effects. Name this layer “Screen“. Press A to select the Direct Selection Tool which lets you play with paths and select two absolute bottom anchor points (there are 4) like shown in the image below. Then press Delete to remove these anchor points.

Select the remaining bottom two anchor points and using the arrow keys (plus Shift to move them 10px at a time) move these points up, until you’ve got something that looks similar to the image below.

This will be the screen area and what we’ve just done is create a space where we want to put the player’s controls. Apply the shown gradient effect.

Step 4

Time to work on improving the details a little bit. Create new layer and name it “Ninja Gradient“. Select the Marquee tool (M) and draw a rectangle approximately as wide and high as the buttons area, but very importantly, move it down so that it’s one pixel away from the Screen, like shown. Press D and then Alt+Bksp to fill the selection up with black.

Add a layer mask and draw up a linear gradient vertically, so that it the darker (more opaque) area of the layer is at the top, like the image below.

Step 5

Let’s create the buttons. We’ll first create the general shapes and then we’ll style them. Grab the Rounded Rectangle Tool, set the Corner Radius to 30px and draw the Play / First Frame button. Name the layer just that. Draw the little symbols on the button using the Pen tool. Next, let’s create the position slider.

Select the same Rounded Rectangle Tool, set radius to 3px and draw a long and thin rectangle next to the button. Name the layer “Position Slider Bar“.

Select the Ellipse Tool and draw a small circular button on the right of the Position Slider. Name this button “Mute Button“. Pick the Pen tool and draw a small speaker icon on top of it. Name the layer “Speaker Icon“

Select the Rounded Rectangle Tool again, with a radius of 3px and draw an even thinner long line type of rectangle next to the Mute button. Name this layer “Volume Slider Bar“. Grab the Pen tool again and create a right triangle, colored black, 3-4 pixels or so above the Volume Slider Bar. Name this layer “Volume Indicator“. Set its transparency to 20% by pressing the 2 key on your keyboard.

Select the Ellipse tool and draw a small circle on top of the Position Slider, centered vertically on it and at the very beginning of the slider bar. This will be your “Position Slider Button“. Duplicate this layer and transform it (Ctrl+T) to about 50%. Move it over the Volume Slider Bar at the beginning of the bar, centered vertically. Name the layer “Volume Slider Button”. When you’re done you should have something like the image below.

Step 6

Almost there! Time to style these babies.

Use the following layer style settings for the Position Slider Button and Volume Slider Button layers.

Then, the Play/First and Mute buttons.

The slider bars.

Finally, select the Pencil tool (B), select the foreground color #717171 and draw a line in the middle of the Play / First Frame button. Duplicate this layer and move it over to the right by holding Alt and pressing the right arrow once. Hold Ctrl and click this layer in the Layers window to select its pixels, then fill it up with white. Change this layer’s blending mode to Soft Light. You are now done with the button separator.

Grab the Type tool (T) and write the current position/duration text (e.g. mins:secs/mins:secs or however you want to format it). Apply the layer styles below to the Play, First Frame and Mute button icons.

Here is the final look.

So there you have it: your own cool video player skin. I hope this tutorial’s been helpful. Don’t forget to leave a comment if this tutorial has helped you (or if it has not) and if you’ve got any suggestions for future tutorials don’t hesitate to drop me a line. Thanks for reading!

Download Web Video Player Skin PSD file

Post comment