Servage Magazine

In this article you will learn how to add a video portfolio example on the right side of the portfolio section. Start by drawing a layer showing a video of the team where visitors can click and watch the video.

Video box

For this, select the rectangle layer and draw a rectangle of 320 by 168 pixels. With the help of the move tool align the rectangle in the center of the second half of the section. Here the fill has been set as #eceff2 so that it can have a different color compared to the background of the section. Name this rectangle layer as “Outer rectangle”.

Select the rectangle tool again and create a rectangle smaller than the outer one. Here a size of 280 by 128 pixels is set and fill of this rectangle is set as #c0bfc0. Name this rectangle as “Inner rectangle”.

Now a picture will be added to represent the video. Select any picture that you find interesting and open it with Photoshop. Press ctrl and T to transform it. Resize the image to the size of the inner rectangle and place it over the rectangle. Right click on the image layer and click the option of “Create clipping mask”. This way the image will not cross the border of the inner circle.

Play button

Now a “play” button is added to the template. You can find an image for a play button on iconfinder.com or using your favourite icon font. Insert the play icon on top of the image, and use a color which contrast the image. Our example uses white color, because it contrasts the black clothing in the centre of the image. Resize the picture or font of the button to a smaller size so it looks like a play button over the video like below.

Now the right portfolio side will give a video player impression. Using multiple layers adds a border, which emphasizes the video-player. Select the Text tool and write the name of the reference. Here Maiandra GD font with 14 pixels font size is used. Use the move tool to align the text below the video layer. A distance of 40 pixels has been used here, which can be achieved by pressing shift and down key four times. Again, select the text tool and write the description of the portfolio. The same font and size of the font as before has been used and distance of 20 pixels has been kept. You can add more than one video element to fill more of the space.