HV-Designs.co.uk

November 13th, 2008 in Photoshop Tutorials by Richard Carpenter

Video Sharing Layout #2

• Share

In this tutorial il show you how to create a video sharing layout, an ideal layout for you video bloggers.

Create a new document 850×1200 pixels. Select the colors #141217 and #14171f then select the gradient tool, drag a linear gradient over your canvas. Goto “filter > noise > add noise” enter 2% in the amount, set distribution to uniform then stick a tick in monochromatic. Select the rounded rectangle tool and create a rectangle like in the image below.

Fill the rectangle with the color #20242d, add a 1 pixel stroke to the rectangle but dont do it the normal way by double clicking the layer style, instead goto “edit > stroke” use the color #20242d. Next add a layer mask to the rectangle, then drag a linear gradient over it, make sure background and forground are set to black and white. You have something like this.

Add your website title, slogan and logo. I created my logo by selecting a shape from photoshops custom shape libary. Add it to the canvas then whilst holding the ALT key on the keyboard tap the left arrow key, with every tap on the keyboard a new layer is created and the shape is shifted 1 pixel to the left. Merge all the duplicated layer together then drag the merged layer underneath your orginal. Add your layer styles.

Select the rounded rectangle tool with a radius of 10, create a small rectangle. The edges of the rectangle will both be rounded, select the polygonal marquee tool and make a selection like this at the right end of the shape.

Fill in the 2 corners to make the edge of the shape square.

Now for the next button you just want a normal rectangle, when you get to the end of the navigation duplicate and flip your 1st button, so you have something like this.

Add these layer styles to your buttons to complete the effect.

Next select an image from your favourite image source, add it within the box. Add a simple 1 pixel grey stroke to it. Select the pen tool and create a shape like this.

Fill the selection with the color white then add layer mask to it. Drag a linear gradient from the right to the left to give you a shine effect. Add a sample player button and lower the opacity.

Finish this section by adding more sample videos and some community items.

Select the rounded rectangle tool, and corner off the left side of the shape like we did for the navigation, Fill with the color #1e212a and add a 1 pixel stroke using the color #2f3541. On the rounded part of the shape add a rectangle over the top and fill with the color #ba267d. Inverse the selection and delete the excess. Add a small circle with a white heart in it used from adobes custom shapes libary.

Inside the content box add more videos and comunity icons., ive also added some hearts to give the videos some love ;) .

Using the same method above create another content box like the image below.

Again add your content items. Create a rectangle at the bottom of your page add the same layer styles to it as the content boxes. Duplicate your navigation menu, logo, site title etc.. and place inside the rectangle. Underneath add your footer information.

Your final image should look like this.

• Share