Her

Home Photoshop Tutorials Web Layout VJ Layout - Video Streeming Layout

VJ Layout - Video Streeming Layout

Author: amitk Author's URL: www.talk-mania.com More by this author

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:

image 1

With Rectangle tool

image 2

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.

image 3

Here is my result:

image 4

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

With Rounded Rectangle Tool

image 5

I will create a rounded shape.This will be the slide bar.

For this bar I will use the following color #676464:

image 6

With Line Tool I will create some small lines

image 7

I will place these lines on our bar.

image 8

Once again with the same tool ( Line Tool ) I will create another small lines ( We will use these 2 lines as a Pause button )

image 9

I will grab Custom Shape Tool

image 10

and I will use the following icon:

image 11

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

image 12

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:

image 13

Again with Custom Shape Tool, and the following arrow selected:

image 14

I will create four small arrows:

image 15

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

image 16

One more time I will use Custom Shape Tool.

I have used the following shape:

image 17

and I have placed this shape over the video player:

image 18

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:

image 19

Then I will use apply a layer style:

image 20

image 21

This is my result:

image 22

I will add different images, with the same proprieties:

image 23

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:

image 24

And this is how I placed the text.

image 25

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

VJ Layout - Video Streeming Layout