Create a neat portfolio layout in Photoshop

If you are in search of work on the Internet, you need to have at least two things. The first is your qualifications, the so-called “skills”, the second thing you definitely need is a portfolio with your already completed works that you could show your potential customers to incline them to a positive decision to order work from you. Although, you can get a certain small amount of work without a portfolio, but many of the clients still prefer to order work from those who still have a portfolio. With the growing demand in the web industry, many new web designers appear here and there, and accordingly, the competition among them becomes very tough.

The only sure way to attract customers’ attention is to show them your qualifications using a portfolio. Therefore, today, we, just, and learn how to create a portfolio layout in Photoshop, which you can use in the future to get yourself a job.

Below you can see the end result of our lesson, we need to have a neat layout and focus on our past work:

Before we begin, we need to prepare:

  • Download the archive with materials for the lesson
  • PSD lesson

As for the used images, just right-click on the image you need and save it. It is advisable to save all the images in one folder so that you know exactly where to get it later.

So, we begin to create our portfolio layout.

Step 1

Create a new document sized 980 * 1302 pixels.

Activate the tool Rectangular Selection (rectangular marquee tool (M)), select the area with a height of 100 pixels from the top edge of the canvas and fill this area with the color # db5450.

Step 2

For our logo, we use the Kaushan Script font (see additional materials) size 34 item (pt), for lower text, use the Orator Std font with a size of 15 points and the color # 8e201c.

On the right side of our site header (header), we will place the main navigation menu. For him, I suggest using the Lucida Console font size of 14 points and the color #ffffff. All words in the menu type in uppercase letters (Caps key).

Step 3

Next, we need to use the image of the application for the iPhone and place it directly under our logo.

Now apply Layer style (Layer Style) to this image. To do this, double-click the left mouse button on this layer. In the dialog box that opens, select the item Stroke (Stroke).

Set the parameters for the stroke as follows:

  • The size (Size): 1
  • Location (Position): Inside (Inside)
  • Blend mode (Blend mode): Normal (Normal)
  • Opacity (Opacity): 100%
  • Fill Type (Fill type): Colour (Color)
  • Colour (Color): # c9c8c7

Now, duplicate this layer by pressing the key combination (CTRL + J). Reduce the size of this copy by 1 pixel and slide it down by pressing the down arrow key on your keyboard twice. Make another copy, so you should have two more layers under the original layer.

This is what you should get as a result:

Step 4

In this step, we will need to add a description text next to the image of the iPhone application. For this purpose, we use the Arial Bold 17 point font and the color # 3b3a3a, and the 13 point Arial Regular font for the text itself.

Step 5

Next, under the description we need to create a button. To do this, use the tool Rounded Rectangle (Rounded Rectangle Tool) and set a rounding radius of 5 pixels.

Now apply Layer style (Layer Style) to the button. To do this, double-click the left mouse button on this layer. In the dialog box that opens, select the item Gradient overlay (Gradient Overlay). Set the colors for the gradient from # b3ca60 to # 8fa541.

Next, check the checkbox Stroke (Stroke).

Set the parameters for the stroke as follows:

  • The size (Size): 1
  • Location (Position): Inside (Inside)
  • Blend mode (Blend mode): Normal (Normal)
  • Opacity (Opacity): 100%
  • Fill Type (Fill type): Colour (Color)
  • Colour (Color): # 859a39

Here’s what we got as a result:

Step 6

Duplicate the layer with the button and turn off the layer styles by clicking on the eye icon. Fill the copy with white color (#FFFFFF) and drag the copy above the original, then reduce the level fillings (fill) up to 11%.

Add some text, for example, View Website, for this use Arial Bold font size of 16 points.

For text, apply Layer Styles:

Drop Shadow with the following parameters:

  • Blend mode (Blend mode): Normal (Normal)
  • Colour (Color): #ffffff
  • Opacity (Opacity): 75%
  • Angle (Angle): 90
  • Check the checkbox Use global illumination (Use Global light)
  • Distance (Distance): 1
  • Swipe (Spread): 0
  • The size (Size): 1

Inner shadow (Inner shadow) with the following parameters:

  • Blend mode (Blend mode): Multiplication (Multiply)
  • Colour (Color): # 73872e
  • Opacity (Opacity): 75%
  • Angle (Angle): 90
  • Uncheck the checkbox Use global illumination (Use Global light)
  • Distance (Distance): 1
  • Tightening (choke): 0
  • The size (Size): 1

Here’s what we got:

Step 7

After the layer with the slides, we need to create a block of three columns. Choose a tool Ellipse (Ellipse Tool (U)) and draw a circle. To keep things straight, use the guides.

Place in this circle an icon from the jigosoar set (additional materials). For the title, use the Arial Bold font with a size of 16 points and the color # 3b3a3a, for the text with Arial Regular font size of 13. The size of the icons is 24 * 24 pixels.

The following icons were used for this section: 24_gallery, 24_css, 24_structure.

Step 8

Next, create a field for communication. Take the tool Rounded Rectangle (Rounded Rectangle Tool) and set the radius of rounding to 5 pixels. Draw a rectangle as shown in the screenshot below.

Again, use the icons from the jigosoar set, select 48 * 48 pixels 48_email (envelope) icon, dark. For text, use the Arial Bold font size of 16 points and the color # 3b3a3a. To create a button, just copy it from the previous steps (CTRL + J) and change the text on it to Contact me.

Step 9

Now create another three-column block. To do this, again use the tool Rounded Rectangle (Rounded Rectangle Tool) and set a radius of rounding 15 pixels. We draw a rectangle, as in the screenshot below, and copy it twice (CTRL + J). It should turn out like this:

In this step, we will add images to our columns (we will use pictures from other lessons). We transfer them to our document. Make sure that under each of your transferred pictures there is a layer with a rounded rectangle. Next, standing on a layer with a picture, right-click on it and select in the menu Create clipping mask (create clipping mask). Adjust the image so that it fits clearly into your rectangle.

As a result, you should get something like this. Oh, and do not forget to add a caption to each block with a picture. To do this, use the Arial Bold font size of 16 points and the color # db5450.

Step 10

Now we will draw the basement of our site (footer). To do this, take the tool Rectangular Selection (rectangular marquee tool (M)) and draw a rectangle, and then fill it with color # 1a1a1a.

We will make the contents of the footer similar to the site header (header). To do this, simply duplicate the layers with the logo in the header and the navigation menu in the header (CTRL + J), drag them down to your “basement” and change the color to # 353535. For the highlighted menu item, set the color to white (#ffffff).

Everything, our portfolio is ready!

Like this post? Please share to your friends: