In this tutorial I will be showing you how to create a clean video layout in Adobe Photoshop. The techniques demonstrated in this tutorial will hopefully teach you some new tricks for you to use in the future.  This layout uses the 960 Grid system in order to keep everything aligned and clean.

Preview

Here is a preview of what we will be creating today:

Download the 960 Grid System
1 Before you begin creating this layout you need to download the latest 960 grid templates to be used in Photoshop. You can do that here http://960.gs/

1.1 You then need to open the following template in Photoshop, like so:

960_grid_16_col

Resizing the document and adjustments
2 Before we begin with the design of the layout, you first need to resize the document to the following dimensions:

Tip: You can toggle the guides on or off using a keyboard shortcut, Ctrl + ;

Creating the logo and search box
3 We are now going to start with the design of the header content. To create the logo, first create a new layer in the document and then set the foreground colour to #3a3a3a. Then using the Type Tool (T), type the text based logo onto the canvas using the following text settings:

Font: Verdana, Style: Regular, Size: 24pt, Anti Aliasing: Crisp, Caps Lock: On,

3.1 Now create a new layer in the document and select the Rounded Rectangle Tool (U), then create a rounded rectangle with a radius of 10px and 76px wide by 34px in height. You then need to position the layer in the layer property box, so that it is below the text layer, like so:

3.2 Position the rounded rectangle so that it is centred over the word ‘SITE’, you may need to add some space between each word. Now we are going to apply a layer style setting to the layer. To do this, right-click the rounded rectangle layer and select ‘Blending Options’ from the menu list. A property window will appear, apply the following layer style settings:

Gradient

3.3 To complete the logo we are going to create a light overlay layer. To do this create a new layer, then set the foreground colour to #ffffff. Then using the Rectangular Marquee Tool (M), create a selection like so, over the top half of the logo:

Now using the Paint Bucket Tool (G), fill the selection with the white foreground colour, like so:

Now reduce the layer opacity to 36%, and finally change the font colour of the word ‘SITE’ to white. You should now have something like this:

3.4 Position the completed logo 29px from the top and next to the following guide:

3.5 Now we are going to create the search box for the layout. Start by creating a new layer, then using the Rectangular Marquee Tool (M), create a selection 320px wide by 32px in height. Then fill the selection with the following colour #f7f7f7, like so:

3.6 Now apply this layer style setting to the search box layer:

Inner Shadow

Stroke

3.7 Now position the search box next to the following guides:

3.8 To complete the search box, create a new layer, then set the foreground colour to #a2a2a2, and type the following text centred inside the search box, like so:

Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Caps Lock: Off,

Creating the slideshow
4 The next set of steps will explain how to create the slideshow for the layout. Start by clicking the following image and save the full size car image for the slider:

4.1 Now in a new layer in the document, insert this image you just saved, like so:

4.2 We are now going to create the play button symbol which is centred inside the slider image. Start by creating a new layer, then set the foreground colour to #e8e8e8. Then using the Elliptical Marquee Tool (M), create a circle selection 100px wide by 100px in height, filling the selection with the foreground colour, like so:

4.3 Now create another new layer and create another circle selection but this time 90px wide by 90px in height. Then fill the selection with a different colour and position it so that it is centred inside the first circle, like so:

4.4 Now select the smaller circle, by holding Ctrl and clicking the thumbnail image in the layer property box, and then toggle off the layer visibility of the smaller circle, so that you just have the selection, like so:

4.5 Now simply hit the delete button, to remove the colour inside the selection like so:

4.6 Now position this new circle outline so that it is centred inside the slider image. A quick method of positioning a layer centred inside something is to select the outline of the layer you want an element to be centred to, in this case the slider image, then make sure the layer of the element you want positioned is selected, and then use the align tool buttons found in the Move Tool (V) header options, like so:

4.7 To complete the play button symbol, we need to insert the triangle play button. To do this create a new layer, then using the Custom Shape Tool (U) insert the following shape with a size of 48px wide by 55px in height, with the same colour as the circle. Position this triangle centred inside the circle outline, like so:

4.8 That is the play button symbol completed. We are now going to move onto the slider selector tabs or circles. To create these, simply set the foreground colour to #3a3a3a and create 5, 16px by 16px circles on separate layers. Then position them like so:

4.9 To complete the slideshow, simply create a smaller 8px by 8px circle and centre it inside one of the slide navigation circles, with the colour #a2a2a2, like so:

Featured Video section
5 We are now going to create the featured video section of the layout. Start by creating a new layer, then using the Type Tool (T), type out the ‘Featured Videos’ heading using the following text settings and with the colour #3a3a3a:

Font: Verdana, Style: Regular, Size: 14pt, Anti Aliasing: Crisp, Caps Lock: On,

5.1 Now you need to create two horizontal lines with a width of 620px, using the Line Tool (U). The top line has the colour #cecece, the bottom line has the colour #9f9f9f. Separate the two lines with a 1px gap, like so:

5.2 Now save the following images, ready for use in the layout:

5.3 Now you need to insert all 6 of the images into the layout between the guides shown in the image below. A gap of 42px is between each row of images, like so:

5.4 Now using the same technique as before, create the play button symbols for each of the images. You can simply copy and paste once onto new layers in order to save time, like so:

5.5 To complete this section, simply add a line of text underneath each video on separate layers detailing some information about the video, like so:

Sidebar
6 The next steps will explain how to create the sidebar section of the layout. Using the same settings, colours and technique you can create the two headings and the horizontal lines for the sidebar section of the layout on separate layers. The lorem ipsum text has the following settings:

Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Caps Lock: Off, Colour: # a2a2a2,

6.1 To create the ‘Browse Videos’ button in the sidebar, start by creating a new layer, then using the Rounded Rectangle tool (U), create a rounded rectangle with a radius of 10px, with a width of 200px by 60px in height. Position the layer like so:

6.2 Now you need to apply the following layer style settings to the button layer:

Drop Shadow

Inner Shadow

Gradient

6.3 To complete the button, add the following text on a new layer with the colour #ffffff, and a font size of 14pt:

Recent videos section
7 The next section we need to create in this layout is the recent videos section. Create the heading using the same technique as before. For the video images, the easiest method of creating this section is to select the layers for one of the featured videos and then duplicating them by right-clicking the selected layers and clicking ‘Duplicate Layers’ from the menu list. You can then reposition and resize these layers by using the Free Transform option, or by pressing Ctrl + T on the keyboard.

Adjust the size of the video and play button images together to a size of 200px wide by 124px in height, like so:

Footer
8 To complete the layout, simply add a footer section or line of text like so with the following text settings:

Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Caps Lock: Off, Colour: #3a3a3a

That is the tutorial completed. Thanks for following along, please feel free to comment and download the PSD file.

Download PSD File ->