Video Sharing Layout

Posted on July 1st, 2008.

18 Votes, Rating: 41 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...


Learn how to create a simple video sharing web layout.

Create a new document 900×1000 fill your background with the color #292929. Find yourself a picture of a film reel, i found one on google quite easily. Add you film reel to your canvas and remove the background from it using your favourite cutting tool.

Duplicate your film reel and goto “edit > transfrom > flip vertical” place your film reel underneath to act as a reflection, add a layer mask and drag a linear gradient over the top to blend it in.

Now select the round rectangle tool, with a radius of 20 draw out a long black rectangle.

Now select the color #626262 and draw some rectangles inside the rectangle using the rectangular marquee tool.

Now do the same again only this time create smaller rectangles top and bottom using the color white.

Now we have our film strip merge all your square layers you just created into one. Drag your film strip up by your film reel, set layer opacity to 50% and add a layer mask, drag a linear gradient over the top and blend it in from the right.

Now add your website title and slogan. You should have something similar to this.

Now on a new layer create a small pill shape button using the rounded rectangle tool, add these layer styles.

Your button should look like this.

Select the ecliptical tool and make a selection like the image below.

Fill with the color white, then set opacity to 25%. Now hold ctrl and click on your button layer to make a selection then goto “select > inverse” and hit the delete key. You should be left with a nice shine. duplicate the button and shine as many time as needed. Add your navigation text. Finally duplicate all your buttons, move them down underneath, add a layer mask and lower opacity to suit.

Now added a sample video, ive just used a screenshot.

Create a smaller button like one of your navigation buttons, copy/paste the layer styles.

Still with the rounded rectangle tool draw a bigger one over the top, and add these layer styles.

Now add some content, and repeat the above steps to create more content boxes.

Now finally create a rectangle at the bottom of your canvas for your footer, copy/paste your button layers styles to it.

Tags: , ,

9 responses so far!


Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!


  • 1 Ahmed El-batanony ~ Jul 1, 2008 at 7:59 pm

    simple and perfect . Thank you a lot.

  • 2 D. Carreira ~ Jul 2, 2008 at 10:51 pm

    Another cool template! ;)

    Thanks for sharing your ideas!

    David Carreira

  • 3 Video Sharing Layout | How-to Geek Guru ~ Jul 3, 2008 at 6:37 pm

    [...] Tutorial: Video Sharing Layout (0) Comments »Tags: Video Sharing [...]

  • 4 Matt Strange ~ Jul 7, 2008 at 4:41 pm

    Hi! I like the effects you have used on the buttons, not so much on the font choice, maybe the font”Impact” would be nice. Apart from that nice and easy to read tutorial. :)

  • 5 stranger ~ Jul 17, 2008 at 8:36 pm

    Amazing tutorial
    concept is awesome
    thank you

  • 6 mostafa ~ Jul 25, 2008 at 11:10 pm

    merci mon frére

  • 7 gopal ~ Jul 28, 2008 at 12:33 pm

    tri pan di sleyo puri tra nhi si das skde panchodo sallo tuyadi ma di

  • 8 gopal ~ Jul 29, 2008 at 5:59 am

    ya its good , thanks a lot for share your ideas, thankyou very much

  • 9 Simranpreet Singh ~ Sep 25, 2008 at 5:19 am

    As you depicted how to work in photoshop to provide a video website look but you havn’t described how to embed the video links with these picture

    So send me the detail with the help of coding how can we define video links with these picture in our site

Leave a Comment