HV-Designs.co.uk

April 10th, 2009 in Photoshop Tutorials by Richard Carpenter

Simplistic Video Blog Layout

• Share

Good evening everybody, sorry for the delay its been a busy run up too easter. Today were going to be making a very simplistic video blog.

Screencasts and video blogging is coming more and more increasingly popular nowadays so thought id write up a tutorial on how to make a nice simplistic layout. Right lets get started, create a new document 900 x 1200 pixels. Double click your background layer to unlock its locked state, then add this simple gradient overlay.

Download this icon set from function DOWNLOAD HERE Drag the twitter, mail and RSS icon onto your canvas. Align each icon next to each other with the exact same space inbetween each icon. Select all 3 layers by click on them one by one whilst holding the CTRL key. Press CTRL + T to enter into free transform mode, at the very top in the toolbar area click the little chain icon then enter 75%.

Press enter to confim the changes. Place the icons in the top right corner of the canvas with some text saying “stay connected:”.

Select the rectangular marquee tool and create a big rectangle, leave a nice even space at each side, and bit of space at the bottom for your footer info.

Add these layer styles to your big rectangle.

Select the rounded rectangle tool, with a radius of 10px, draw out a decent size rectangle.

Select the pen tool then right click the path you created with the rounded rectangle tool and goto “make selection”. Your path should now be transformed into a normal selection (black and white animated lines).

While the selection is active select the rectangular marquee tool. Line your crossair up with the top of your black and white animated line in the top left corner of the rectangle. Whilst holding down the shift key on the keyboard drag out a square shape so it lines up.

Do the same for the bottom left corner, the idea is to have a solid edge on the left side of the rectangle and a rounded edge on the right side of the rectangle.

Fill the seletion with any color then add these layer styles.

Move your rectangle slightly off the big rectangle we previously created. Then add your website title and slogan.

Create a new layer underneath your big rectangle layer, using the polygonal rectangle tool create a selection like this.

Fill the selection with any color. Then add these layer styles.

You should have something like this.

On the right side of your header box add your navigation, color the 1st button text white. Select the rectangle marquee tool or the rectangle tool and create a box behind your 1st buttons text. Fill your box with the same gradient as your header box.

Just above the navigation create two 1 pixel lines on top of each other, make them span the width of your navigation items.

Duplicate the two lines and also place them underneath your navigation, you should have something like this.

Underneath our header and navigation, add a thumbnail image of an example video. Add this stroke to the thumbnail image.

Add your video player buttons underneath your thumbnail.

Ontop of your thumbnail image add a play symbol and some text saying “click to play” set the layer opacity to about 25%.

Above your video player and thumbnail image add a grey rectangle #d5d5d5. Add a small stroke on the bottom of the rectangle about 3 pixels in height in the color #c3c3c3.

Inside the rectangle we just created add your post title and some example comments using the speech bubble icon from the web function icon set.

Duplicate the post elements or re-create different ones and position underneath each other. At the very bottom of the posts add some simple boxes with page numbers in.

Select the rounded rectangle tool and create a box on the right side of the 1st post.

Add these layer styles to complete the effect.

Inside the box add some login and password fields, also add the blue man icon from the functions icon set then label the box appropriatly.

Using your imgination complete the sidebar as desired. Heres my finished result.

All done, thank for reading my tutorial, please subscribe to my RSS feeds and twitter. Also dont forget to visit my sponsors. Till next time.

• Share