Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 8/10 – Portfolio video

Friday, April 15th, 2016 by Servage

photoshopIn 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 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.

Web design with Photoshop part 8/10 - Portfolio video, 4.0 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.