If you are newbie in web design industry and looking for ways to boost your skills and income, you should definitely create your own website. Having your own website, you can display your skill set that can land those gigs that you wanted, you can show your latest works to convince those would-be Clients. If you have no idea how to do it from scratch, today is a good day for you 🙂 I will show you how to make a portfolio that you can use for your own website. We might do a HTML5 conversion too!
You can download the PSD at the bottom of the page.
Things we need:
- Roboto Font
- Arvo Font
- Bokeh Wallpaper
- Entypo Icons
- Stock Photo Images
How to Make a Portfolio in Photoshop
Open your Photoshop, and set the width and height. Follow the pixels from the image above.
I added a logo from the Entypo Icon sent, select the paper-plane and use the font Arvo Regular 26.62pt. For the navigation, Roboto Condensed 23.62pt, font color #5a5a5a.
Using the Marquee Tool (M) we will select 300px from the page, create a new layer CTRL + SHIFT + N and cover it with white using Paint Bucket Tool.
Next, add your Bokeh background. Just drag and drop it, and right click select Create Clipping.
While still selected the bokeh layer, go to Filter > Blur > Gaussian Blur and set it to 28.0. Hit ok after.
Here is the blurred bokeh background 🙂 Next is to add the text on it, use Roboto Condensed 38pt #fff, and for the paragraph text Roboto Condensed 21pt #fff.
To create a button, select Rounded Rectangular Tool (U) and set the radius to 3px, fill it with #3497da.
Use this image to be put beside the text, make sure you even the bottom with the end of the background.
Our Hero section is complete! Moving on 🙂
Use Roboto Condensed 33pt #555, set all to capital. Duplicate the button from the Hero section (CTRL + J)
Create a new layer and select Single Row Marquee Tool (M) and select the bottom area of the text. Use a brush with color #555 and fill the entire line. CTRL + D to deselect.
Next, create a new layer CTRL + J and select a 300px height and fill it using Paint Bucket Tool (G) #EFF2F5. Create a new layer again, and create a rectangular shape, fill it with #fff. Right click and select Stroke 1px #dddddd.
Title text is Roboto Condensed 24pt #555 and the smaller one is 20pt #555.
Create a circle using Ellipse Tool (U) while holding SHIFT to create a perfect circle. Right click > Stroke 1px #ddd. Next is to add the icons from Entypo icon set.
Group them into a folder, and duplicate them by right click > duplicate and position them properly.
Our Portfolio is coming close, let’s add Recent works and images from previous tutorial. Make sure you add stroke 1px #ddd for the images.
For the Our Team section, we will use the images from istockphotos. Place the image and add the following, for the name Roboto Bold 18pt #555, for the position Roboto Italic 16pt and for the description Roboto Condensed 17pt same color.
To add the social media icons, select them from Entypo and drag them to the current canvas. Right click on the layer > Color Overlay > set to #fff. Use Rounded Rectangle Tool (U), and create the shapes. Follow the color background for each icon.
Next is the footer, Use Marquee Tool (M) to select the area and create a new layer CTRL + SHIFT + N and fill it with #333333. The font used are Roboto Condensed and Robot Bold #ffffff. Grab the icons from Entypo and place them in the contact area.
That’s how to make a portfolio in Photoshop! Easy eh? Hope you guys learned a lot from this, and you can use this to start with your portfolio.
If more people wanted to see the PSD to HTML5 Conversion, please let me know in the comments below!
