Create a movie video streaming website

In this tutorial i will show you how to create a nice video related website. You can create this website like a membership, and you can charge people for watching the newest movies online. It is something like Netflix. Please note that you will learn only the designing part. 
As usual we will start with a new document. I will open the PSD file from our Ultimate CSS Framework
If you don’t have the Framework yet you can create a PSD file alone: 1100 pixels width x 1200 pixels height. For the background color i will use #e2e2e2.

The next step is to create the top part of the website. This is very simple. First make a selection with rectangular marquee tool, then with Gradient tool add a nice gradient inside your selection. if you don’t have gradients then we have in our membership a huge pack with over 25.000 Gradients.
You can use also the brush tool to add some extra lights. The easy way is io create a new layer ( press on CTRL+SHIFT+ALT+N ), change the blending mode of this layer to Overlay, and then draw on your canvas with white color. You will have the following result.

For this shape i will add the following layer style.

And then i will add a white line which was made with Line Tool. Now we have ready the background for our website.

With Ellipse Tool i will create the following shape. As you can see i have turned on the guides ( CTRL+; ) or ( CMD+; ) if you are on mac, but please note that you might not have the guides exactly like mine. the reason is because i have used the PSD file from Ultimate CSS Framework which allows you to create a CCS/ XHTML website very easy.

Make sure you have the black shape selected, and then go to Edit > Transform > Warp. here you can use the Arc and set the Bend to 10. Your dark shape will look like a small hill. With this shape we will create a nice looking shadow. More already made shadows you can find in our Web Graphics Pack

The last step is to go to Filter > Blur > Gaussian Blur and use 10 Pixels. Your dark shape will be rasterized first, and then it will have a very nice smooth transition. Now it looks like a shadow.

With Rounded Rectangle Tool ( Set the radius to 4 pixels ) i will create the video player.

On the footer i will add a navigation bar for this video player.

Here are the layer styles used for the navigation bar


The next step is to add a image. I have used the “Drive Angry” poster

On the right side of the navigation bar i will add two shapes.

For each shape i will use the following pressed layer styles. Please note that you can download over 16.000 Layer styles if you register for an account.



Please remember to save all your layer styles. now i will add another small shapes. Some small arrows which represent the full screen button for our video player. On the left side i will add some vertical shapes which will allow user to adjust the volume of the movie

For the dark shapes i have used the following layer style.



On the left side i will add a pressed play button, and a stop button.

Then i will add the movie search bar. This was made with Rounded Rectangle Tool

Then you will see on the left side another thin shape, and then a round circle which allows your users to navigate through your movie/video

I will create a light area where later we will add our logo. To create this light area you need to create a new layer, and then with Brush Tool add some white drawings. The last step is to change the blending mode to overlay, and you will have the same effect.

With Horizontal Type Tool i will add the text logo. if you don’t like it you can use the 3D Creator which helps you to transform each 2D shape into nice 3D shapes.

I will add a navigation bar. The layer styles are the same like on the navigation of the player.

Under the player i will add some text.

And under this text i will add another shape.

Make sure you have selected this shape, and then go to Edit > Transform > Warp. Here select the Arc Upper with a bend of 10%. Your shape will look like mine.

I will add some movie covers with different sizes. This slideshow can be animated with jQuery.

On the left and on the right side i will use a custom shape ( use Custom shape Tool ) and then i will use a layer style i have used so many times in this tutorial. Choose the one you like most.

This is how my movie video streaming website layout looks like:

Posted in: Web Design