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.
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:
- Entypo from fontsquirrel
- PT Sans from fontsquirrel
- MetalGear Solid font from dafont.com
Make sure you installed this font on your computer before starting the tutorial
Let’s create a Web Designers Portfolio in Photoshop!
Step 1. Open a new document and copy the width and height settings above, Fill it with white background.
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.
Step 3. On the right side, type in the navigation. Use PT Sans, font size is 20pt color is #212121.
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.
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.
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 🙂
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).
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.
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.
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.
Step 11. Duplicate the layers, and change the images on them. Use this image2 and image3.
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.
Step 13. Set up the twitter bird (use this image) for the text, we use Georgia Italic font size 23pt.
Step 15. For the smaller font, use PT Sans font size 14pt.
Step 16. Select the remaining space using Marquee Tool (M) and fill it with #333.
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 🙂
