How to Create a Simple Portfolio Web Layout in Photoshop


Portfolio websites are very important. They help us get contracts, and that’s all we want, isn’t it?

This is my first ever post on Designzzz, I hope you like it. This is a tutorial for creating a portfolio web design in Photoshop. Mind you this is a beginner level tutorial and if you’re a seasoned designer, you might not get a kick out of this.

This layout should be suitable for freelancers of almost every field but probably not the best choice for businesses. That’s because it has a personal feel while business clients go for corporate styled designs.

I used Photoshop version CS4, but you can follow this tutorial even in Adobe Photoshop 7.

As I just told you, this is my first tutorial so I’m in desperate need for your comments. I’ll be replying to all you personally so please send me all your feedback, suggestions and even criticism.

Now let’s get on with our tutorial.

Β Final Result

This is what we are going to make πŸ™‚

Portfolio Web Layout

Download Photoshop Source File

Download this Freebie

Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.

Step 1

Open Photoshop. Click on New (Ctrl+N) and fill your width/height and resolution in pixels. I used width : 948px height: 1450px and obvious resolution is 72.

new graphic dialogue box

Step 2

Now we are choosing a background color. I think skin is perfect. Color code is : #eae1d2

color dialog box in photoshop

Step 3

Now finally this is your background and start working on it.

portfolio web page design

Step 4

Let’s make our navigation bar first.

First of all, create a rectangle on the top of the head with the use of Rectangle Tool. Color code : #3d3d3d

designing elements for portfolio layout.

Step 5

I’m giving our navigation background a bit of noise to make it a little more catchy.
Go to Noise Filter to make the background attractive.

adding noise in photoshopnoise dialog boss

Step 6

This is the our navigation bar. Hope you are spotting the change.
Let’s move forward to Step 7.

navigation bar in portfolio design.

Step 7

Your logo should be here where we left the space and wrote (Your logo)
I added common links Home – About – Portfolio – Packages – Contact Us. Font I used is Bebas.
Time for a hover effect. I created this on Home link with Green color color code : #078c7e

making nav bars

Step 8

Now finally we are done with our header. This design contains a minimal header so let’s start working on featured area.
First of all you need rectangle tool to make a rectangle slim as you can see in the image below. You can also use Line tool but I’m doing with a Rectangle tool so Draw a Rectangle line and make a 2 duplicate layers (CTRL + J) and put them in sequence like in screenshot. Now you have 3 lines, merge them in one layer for better sorting.
Now duplicate the merged lines on the other side.

adding a welcome message in portfolio website

Step 9

Now this is the second step of Featured Area. Select rectangle tool draw a box in the middle of the Featured Area for Slideshow Frame with the same color as you have in Background Color code : #eae1d2. Double click on the layer to come in Layer Styles. Now using Pattern Overlay and check the opacity level and scale settings in the screenshot below.

dialog box

Step 10

Now this is the Rectangle what we made for Slideshow frame πŸ˜€

portfolio web design

Step 11

Now add a picture in Slideshow Picture Size : Width: 772 Height: 305
Note: you can use any picture, I just used an old wallpaper.

photoshop tutorial

Step 12

Now Let’s create a pagination for our slideshow.
Select Rectangle tool to make a Rectangle in the Slideshow picture with the Black Color and Low the Opacity : 46%

slideshow pagination in portfolio

Step 13

Your Rectangle is Ready.

featured area

Step 14

Now Start making circles with Eclipse tool in the mid of the black rectangle As I made 5 circles with the white color and the middle one I edited with the Gradient colors.

stylish featured area

Step 15

As we made the Rectangle Lines in the Step 8 Now Duplicate the 2 Layers again and use them inside right and left of Hello! This is your secondary text or call to action text. You can also use this to show a testimonial.

Using text in portfolio web designs

Step 16

Now we are going to work on the Content Area. Add a Recent Work with the same Font as we used in Welcome and Hello in the Featured Area and same like the rectangle lines as we made before in Featured Area Duplicate 1 layer again and fling it in the right of Recent Work.

Step 17

Now Select a Eclipse tool to make the Circles like this.

using eclipse tool

Step 18

Select a Rectangle Tool and Draw a white Rectangle like this. We will use this white Rectangle as a background of Recent work Images.

drawing boxes in photoshop

Step 19

Double click on the Rectangle Layer and start using the Layer Style.

adding shadows in photoshop

Step 20

This is the effect and changes after we used the layer Style.

shadows in thumbnails

Step 21

Duplicate this in 3 more layers of this white background and add some recent work images on the background and add some text like we did in the screenshot below.

thumbnails of recent works

Step 22

Now this is last step of the Website Layout that is the Footer only. Now we are creating a footer. Copy the header background rectangle add the same logo, add your footer links and all whatever you want. I added some social media links.

simple footer for our portfolio

Β Done!

We did it πŸ™‚

Portfolio Web Layout

create free website wix below post

Further Related Readings

  1. assam December 8, 2012 at 4:12 am

    great tutorial I think you are a New author well Good luck and amazing

  2. babloodabloo December 8, 2012 at 5:47 am

    do it like this and do it like that and you will make this πŸ™‚ nice tutorial zain i hope you teach us more better and awesome tutorials… i am a great fan of designzzz and i have learned alot as well..

  3. Johan December 9, 2012 at 8:21 am

    good work!
    btw, are u son of the other waseem?

    1. Tayyab December 11, 2012 at 4:10 am

      No Johan, he is not!
      if he was, we wouldn’t have allowed him in Designzzz. One Waseem is a hands full and we can’t bear more of Waseem’s genes πŸ˜›

  4. Aftab December 11, 2012 at 12:06 pm

    Wow Thanks that’s amazing and well written

  5. Ayaz Malik December 11, 2012 at 9:17 pm

    Good Job Zain! keep it up :}

  6. noobey December 29, 2012 at 6:08 pm

    Well, i’m not a photoshop fan, but i had fun creating this :). Nice tutorial, thanks.

  7. rellimij January 6, 2013 at 2:53 pm

    Great Job, thank you so much!!

  8. Summer January 30, 2013 at 8:52 am

    As a new and young web designer in school.. I used your layout for my term project and got quite a good mark on it πŸ™‚ this tutorial was easy to follow and well laid out.

    Thank you for putting up such a nice tutorial.

  9. MH RONY February 6, 2013 at 9:10 am

    nice work precisely what i am looking for….so thanks

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved