Subscribe Via RSS

3174 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Video Sharing Layout

July 1st, 2008 in Photoshop Tutorials by Richard Carpenter

Video Sharing Layout

1 Star2 Stars3 Stars4 Stars5 Stars24 Votes, Rating: 4.17
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 322 posts.

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.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

23 Responses to “Video Sharing Layout”

  1. Ahmed El-batanony says:

    simple and perfect . Thank you a lot.

  2. Another cool template! ;)

    Thanks for sharing your ideas!

    David Carreira

  3. 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. :)

  4. stranger says:

    Amazing tutorial
    concept is awesome
    thank you

  5. mostafa says:

    merci mon frére

  6. gopal says:

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

  7. gopal says:

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

  8. 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

  9. Teknoloji says:

    Great list you have here!

  10. mrgtb says:

    Great guide, I’ve always wondered hwo they make templates in adobe photoshop. How do you get links to work though.

  11. tbew says:

    thank you so much admin

Leave a Reply