How to Make a Web Designer Portfolio in Photoshop

On 13 Aug, 2013 By With 11 Comments

If you’re just starting out as a web designer, probably the first thing you need to do is to create your own portfolio. In this way, prospect clients can see your past work and how skilled you are in terms of web design.

But if you’re just a newbie, need to create your own from scratch or use a pre-template. I always suggest to start from scratch since you’ll learn a ton by doing that and gain a lot of experience.

breezi placeit3 How to Make a Web Designer Portfolio in Photoshop

Today we will create a web designer portfolio in Photoshop and on the next post we will continue to convert this into responsive HTML5/CSS3. Follow along since this is gonna be a short tutorial

Things we need:

Make sure you installed this font on your computer before starting the tutorial

Let’s create a Web Designers Portfolio in Photoshop!

1 How to Make a Web Designer Portfolio in Photoshop

Step 1. Open a new document and copy the width and height settings above, Fill it with white background.

2 How to Make a Web Designer Portfolio in Photoshop

Step 2. On the left side, grab Entypo Font and enter “3” (without quotes) and color it #0BADDA font is 95pt , Type the word Portfolio and use MetalGear Solid Font, color the half #0BADDA the other #212121 font size is 32pt.

3 How to Make a Web Designer Portfolio in Photoshop

Step 3. On the right side, type in the navigation. Use PT Sans, font size is 20pt color is #212121.

4 How to Make a Web Designer Portfolio in Photoshop

Step 4. Grab Marquee Tool (M) and create a new layer (CTRL + SHIFT + N) and make a shape similar to the one above. Fill it wit h#ffffff.

5 How to Make a Web Designer Portfolio in Photoshop

Step 5. Use this image, right click on the layer > Create Clipping Mask.

Resize the image to fit perfectly, after that hit Filter > Blur > Gaussian Blur and set it to 7.2, same as above.

6 How to Make a Web Designer Portfolio in Photoshop

Step 6. Add a text on the left side of the slider, use PT Sans #212121 font size is 46pt. For the other text, use Arial Italic #212121 font size is 26pt. We are done with the slider πŸ™‚

7 How to Make a Web Designer Portfolio in Photoshop

Step 7. Next one is the three column below the slider, create a new layer (CTRL + SHIFT + N) and fill it with #0BADDA. Put some text on it, title font size is 18pt while the content text is 14pt. Select all the layers under this and make this a group (CTRL + G).

8 How to Make a Web Designer Portfolio in Photoshop

Step 8. Next is to duplicate the group (Right Click > Duplicate). To create the icons, first you need to create a circle selecting Ellipse Tool (U) and put some text using Entypo Text Icon. Fill it with the same color as the background.

9 How to Make a Web Designer Portfolio in Photoshop

Step 9. Time to create the portfolio! Create a new layer (CTRL + SHIFT + N) and select Marquee Tool (M), select a square shape underneath the three columns, fill it with #ffffff.

10 How to Make a Web Designer Portfolio in Photoshop

Step 10. Drag this image, and right click on the layer > select Create a Clipping Mask, resize to fit. For the title text, use PT Sans #212121 font size 20pt, for the smaller one is 17pt. Select all the layers for this, and hit CTRL + G to create a group.

11 How to Make a Web Designer Portfolio in Photoshop

Step 11. Duplicate the layers, and change the images on them. Use this image2 and image3.

12 How to Make a Web Designer Portfolio in Photoshop

Step 12. After that, create a new layer again (CTRL + SHIFT + N) grab Marquee Tool (M) and select the canvas similar to the one above. Fill it with #0BADDA.

13 How to Make a Web Designer Portfolio in Photoshop

Step 13. Set up the twitter bird (use this image) for the text, we use Georgia Italic font size 23pt.

14 How to Make a Web Designer Portfolio in Photoshop

Step 15. For the smaller font, use PT Sans font size 14pt.

15 How to Make a Web Designer Portfolio in Photoshop

Step 16. Select the remaining space using Marquee Tool (M) and fill it with #333.

sanjaykhemlani.com portfolio How to Make a Web Designer Portfolio in Photoshop

Step 17. For the footer, create a three column and put some text on it, use PT Sans #777777 font size 17pt.

Hope you enjoy following this tutorial, if you ever get stuck please let me know in the comments and I’ll help you.

Download the tutorial by clicking the buttons below πŸ™‚

11 Responses to “How to Make a Web Designer Portfolio in Photoshop”