VJ layout - Video streeming layout

victor · #1 (**permalink**) 12-05-2008, 01:27 PM

I will create tutorial number 178 from Talk-Mania Marathon. In this tutorial i will show

You how to create a clean and a very professional layout for a video streaming website.

This layout can be used also for a VJ website.

As usual i will start with a new document with the following size 760x770 pixels
I will place a bulb image from my stock collection

With RECTANGLE tool

i will create a simple rectangle with the following color #3a3a3a ( this shape will be used as a video player on our new layout )
For this rectangle i will add a simple layer style

Here is my result

You can see that under this rectangle i will create a line with Line Tool.

With ROUNDED RECTANGLE TOOL

I will create a rounded shape.This will be the slide bar
For this bar i will use the following color #676464

With LINE TOOL i will create some small lines

I will place these lines on our bar

Once again with the same tool ( LINE TOOL ) i will create another small lines ( We will use these 2 lines as a PAUSE button )

I will grab CUSTOM SHAPE TOOL,

and i will use the following icon

I will place the icon on the right hand side, after the loading bar

I will select one more time RECTANGLE TOOL and with a black color (#000000) i will create a small rectangle. When your users will click on this button , they will be available to turn on / of the full screen view

Again with CUSTOM SHAPE TOOL, and the following arrow selected

i will create four small arrows

I have used a image, and i have placed this image on the video player

One more time i will use CUSTOM SHAPE TOOL
I have used the following shape

and i have placed this shape over the video player

Now i will show you how to create a nice effect for a image. i will use a small image like the one you will see above

then i will use apply a layer style

This is my result

I will add different images, with the same proprieties

Now it is the easy part. try to add alone some text. if you know how to place the text properly , your website will look amazing. i will hide the video player, and the small images. in this way you can see better how I've placed the text

You can use the HORIZONTAL TYPE TOOL to write your text

And this is how i placed the text.

Now i will show you all the element together. i will turn on the layer visibility, and this is my final result