Video Sharing 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.

17 thoughts on “Video Sharing Layout”

  1. 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. 🙂

  2. 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 Reply

Your email address will not be published. Required fields are marked *