Video Sharing Layout

18 Votes, Rating: 41 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...
Video Sharing Layout in Web Layouts July 1st, 2008 Tags: , ,

 

 

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.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Furl
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis
  • YahooMyWeb

Responses to “Video Sharing Layout”

Trackbacks

  1. Video Sharing Layout | How-to Geek Guru
  2. 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design
  3. 35???Photoshop????????? | ????
  4. 35 Tutorials for Creating Website Layouts in Photoshop
  5. 35+ Photoshop Web Tasar?m Dersleri | Batuhan Bulak
  6. Tips Tricks Dünyas? » Blog Archive » 35+ Photoshop Web Tasar?m Dersleri

Leave a reply