Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Video Sharing Layout

Video Sharing Layout


Create a new document 900x1000 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 favorite cutting tool.

image 1

Duplicate your film reel and go to "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.

image 2

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

image 3
Click to enlarge

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

image 4
Click to enlarge

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

image 5
Click to enlarge

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.

image 6
Click to enlarge

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

image 7

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

image 8

image 9

image 10

Your button should look like this.

image 11

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

image 12

Fill with the color white, then set opacity to 25%. Now hold ctrl and click on your button layer to make a selection then go to "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.

image 13
Click to enlarge

Now added a sample video, I've just used a screenshot.

image 14

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

image 15

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

image 16

image 17

image 18

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

image 19

image 20

image 21

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

Video Sharing Layout
Click to enlarge


Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Video Sharing Layout"

Captcha