Create in Photoshop design for a portfolio site

If you are just starting your career as a web designer, then most likely the first thing you need to do is create your personal portfolio. In this way, potential customers will be able to see your previous work and assess how qualified you are in the field of web design.

But even if you are just a beginner in this business, you need to create your personal portfolio, at least from a sketch, or you can use a preliminary template. I always suggest starting from a sketch, since in this case it will be possible to learn a lot of new things by doing work from scratch, and therefore gain a lot of experience.

So, today we will create a web designer portfolio in Photoshop.

  • Download with materials for the lesson
  • PSD lesson

Make sure that you have installed the necessary fonts in the system before starting this lesson.

Let’s get straight to the lesson itself!

Step 1

Create a new document and set dimensions. Widths (Width) and Heights (Height) as shown in the screenshot below. Fill the background with white (#ffffff).

Step 2

On the left side, with the tool Text (Type tool) draw a logo. To do this, you had to install the Entypo Font pre-icon font into the system. Select it, and enter the number “3” (without quotes) from the keyboard, set the color for your logo to # 0BADDA, font size 95 points (pt). Next, type the word Portfolio (Portfolio), for these purposes, use the MetalGear Solid Font font, with half of the word colored in # 0BADDA color, for the other half use # 212121, set the font size to 32 item (pt).

Step 3

On the right side, type the navigation menu. For it use the font PT Sans, size 20 points (pt) and color # 212121.

Step 4

Activate the tool Rectangular Selection (rectangular marquee tool (M)), create a new layer by pressing CTRL + SHIFT + N, and draw a shape similar to the one shown in the screenshot below. Fill it with #ffffff.

Step 5

Use the image 0. Next, right-click on the layer with this image and in the pop-up menu select Create clipping mask (Create Clipping Mask), or just press Ctrl + alt + G. Pick an image size so that it fits exactly into the area with the rectangle created in step 4. After that, go to Filter – Blur – Blur Gaussian (Filter – Blur – Gaussian Blur), set the value for it to 7.2, also as shown in the screenshot below.

Step 6

Add text (WEB DESIGNER) on the left side of our future slider. For these purposes, use the font PT Sans size 46 points (pt) and color # 212121. For lower text (creative, fast, reliable) use the font Arial Italic 26 points (pt) and color # 212121. With the slider we are done.

Step 7

At this stage, we will need to create a three-column block and place it slightly below our slider. Create a new layer (CTRL + SHIFT + N) and fill it with # 0BADDA. Add some text to our block, take 18 points for the title, and 14 for the content itself. Select all the layers involved in forming this block, group them together by pressing the CTRL + G key combination.

Step 8

Now let’s duplicate the group to get not one, but three such columns. Click on the group with the right mouse button and select the item Copy (Duplicate). To create icons, the first thing you need to do is draw a circle with the tool Ellipse (Ellipse Tool (U)). Further, already in this circle, place the necessary icon with the help of font icons (Entypo Text Icon), just as we did at the very beginning when we placed our logo. Fill the icon of each icon with the corresponding background color on which it is located. By the way, as you can see in the screenshots, the background color of each of the columns is slightly different, so I suggest you do the same.

Step 9

Now it’s time to do the section with the portfolio directly. Create a new layer (CTRL + SHIFT + N) and select the tool Rectangular Selection (rectangular marquee tool (M)), select with it the square area under our block with columns, fill it with the color #ffffff.

Step 10

Drag image 1 into your document. Then click on the layer with this image with the right mouse button and select Create clipping mask (Create a Clipping Mask), or simply press Ctrl + alt + G. For the title text, use the PT Sans font with a size of 20 points and the color # 212121; for the bottom of the text, take a smaller size, for example, 17 points. Select all layers related to the portfolio block and group them together (CTRL + G).

Step 11

Duplicate these groups and then change the pictures in them. Use, for example, images 2 and 3, respectively, for the second and third parts of our portfolio block.

Step 12

After that, create a new layer (CTRL + SHIFT + N), select the tool Rectangular Selection (rectangular marquee tool (M)) and select the same area as in the screenshot below. Fill it with # 0BADDA.

Step 13

Position the image of the bird symbol (Twitter emblem), and add text next to it, you can use the lorem ipsum generator, or you can write something to your taste. Use the text for the text Georgia Italic size of 23 points.

Step 14

For smaller text on the right side, take a 14 point PT Sans font.

Step 15

Select the remaining space with the tool. Rectangular Selection (rectangular marquee tool (M)) and fill it with color # 333333.

Step 16

For the footer (the bottom of the site layout), create three columns and place some text there, for example, such as in the screenshot. For it, use the PT Sans font size of 17 points and the color # 777777.

Like this post? Please share to your friends: