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 7/10 – Portfolio reference

Tuesday, March 29th, 2016 by Servage

photoshopIn this article we create the left side of the portfolio section. Start by creating another layer group and name it “Portfolio”. Select the rectangle tool and create a rectangle with the dimensions of 1400 by 596 pixels and name this layer  “Background”. Here the fill of the background layer is #f4f7f8.

Portfolio quote from customer

Select the Line tool and draw a line of 960 pixels by 1 pixel. Use the move tool and place it on the top of the portfolio section. Press shift and down key 4 times to set a margin of 40 pixels in between the horizontal line and top of this section. Select the line tool and draw a vertical line with the dimensions of 1 by 454 pixels. Place the vertical line in the centre of the section. You can use the help of grid lines for the placement of the vertical line, if needed. The result should be looking like the one below.

Now the first box of the portfolio section will be drawn. We use an image of two inverted commas, or a citation mark, or quote for the background. You can choose what you prefer and add it as a text layer to get the result like below. You can also search for an icon or image to get the same affect. Thereafter use the text tool to write the reference text to showcase the portfolio item.


Customer avatar and name

Below the quote, we wish to present the name of the author and an avatar. Select the elliptical tool to draw a circle. Place the circle below the previously written text, and then and put an image in the same area, showing the person. Select the option of “Create Clipping Mask” to use the circle as a mask for the image.

Lastly you select the text tool and write the name to the right of the circle. Select the text tool and write the designation below the name layer. Here Maiandra GD font with 14 pixels font size is used. Select both the text layers and move them right next to the icon. Press shift and right key for moving it 20 pixels away from the icon.


With this the left side of the portfolio section is complete.

Web design with Photoshop part 7/10 - Portfolio reference, 3.3 out of 5 based on 4 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.