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.
This is what we are going to make 🙂
Download Photoshop Source File
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.
Now we are choosing a background color. I think skin is perfect. Color code is : #eae1d2
Now finally this is your background and start working on it.
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
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.
This is the our navigation bar. Hope you are spotting the change.
Let’s move forward to 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
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.
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.
Now this is the Rectangle what we made for Slideshow frame 😀
Now add a picture in Slideshow Picture Size : Width: 772 Height: 305
Note: you can use any picture, I just used an old wallpaper.
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%
Your Rectangle is Ready.
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.
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.
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.
Now Select a Eclipse tool to make the Circles like this.
Select a Rectangle Tool and Draw a white Rectangle like this. We will use this white Rectangle as a background of Recent work Images.
Double click on the Rectangle Layer and start using the Layer Style.
This is the effect and changes after we used the layer Style.
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.
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.
We did it 🙂