Image may be NSFW.
Clik here to view.
In this tutorial you will learn how to design a Cool Portfolio layout in Photoshop in simple steps.
Program : Photoshop CS5, CS6
Estimated Completion Time: 1 Hour
Skill Level : Intermediate
I have used icons which I have downloaded from www.flaticons.com during the production of this tutorial. I have also used one big image as theme image. I have downloaded this image from
I have created 6 sections in this layout.
1. Navigation with all links
2. Main section (display as home section)
3. About Me.
4. My Portfolio.
5. My Services.
6. Contact Me.
7. Copyright info.
Download Bootstrap 3 Grid system psd file for creating this layout. Grids are already given on this psd file to help us in alignment of objects.
http://freebiesbug.com/psd-freebies/bootstrap-3-grid-system-psd/
Unzip this and pick “BootstrapGridLG” psd file because we are designing layout for Desktop or large screen. Rename this psd to index.psd file.
Place grid layer on top and reduce the alpha of this layer to 10%. These grids will help us to create better layout.
Note :place all elements in such a way that edges of the element should not come in space between grids.
Step 1. Increase the canvas size of this index.psd file to 3100 px.Now, The dimension of your psd file is 1400 px wide and 3100 px height.
Step2. Select the grid layer and Press Ctrl+T increase the height of grid layer equal to canvas.
Image may be NSFW.
Clik here to view.
Step 3. Select the “Rectangular Marque Tool” or press M create a rectangular box with height 50 px and width 1400px, Fill this box with background color black and align this rectangle on top.Now create links with equal space and with white color. Place these links in centre of this box. Use the Type tool to create the text of the main navigation, set the type white using a red version for the active link.
Image may be NSFW.
Clik here to view.
Step 4. Now create box with rectangular marque tool with width: 1400 px and height 500px. Fill the box with background colour # aa1111. Add big theme image on this layer and set layer effect to multiply and opacity to 55%.
Image may be NSFW.
Clik here to view.
Step 5 : Select Polygon tool with 6 sides and fill that with color # 93090b and give 10px white stroke with white color. Place this polygon shape is such a way that the edges of the polygon should not come in blank space between grids.
Type : Display Your Name Here
Font : Lato Bold
Font Size : 40px;
Color : #ffffff
Align : Center
place it in center of layout in such way that edges of the text should not come in space between grids.
In next line type punchline and use these properties
Font : Lato bold
Font Size :20px
Color : #ffffff
Align : center
In next line display your mobile number with icon, e-mail id with icon. In next line display one white box with proper width. This small box is button. Write view portfolio in proper font size and place it in centre of the button.
Text : View Portfolio
Font size: 16px
color: # aa1111
Image may be NSFW.
Clik here to view.
Step 6
Now we will design about us section in this box. Design one rectangular box with height 600 px . Create heading with font size 55px and color # aa1111. Align the heading in centre. Add one para to describe yourself with some lines. Give some margin on top of heading and below the description.
Image may be NSFW.
Clik here to view.
Step 7
Our next section is for Portfolio. Use this space to create your portfolio. Give heading in font size 55px and color # aa1111. Design 4 square boxes with equal space and insert images in the boxes. Place arrows on both sides. On clicking of these arrows all four boxes will move forward or backward.
Image may be NSFW.
Clik here to view.
Step 8
This section is of “My services”. You can display your services in this area. I have created 4 sub sections in this area. Heading, Icon and little description is required to describe any service.
– All four services should have equal font and proper alignment
– you can use icons with equal height to describe each service and to avoid any alignment issue
– write 2-3 lines description for each service.
Image may be NSFW.
Clik here to view.
Step 9
Now we will design Contact Me section. Contact me has 3 subsections. 1st one is Testimonials. 2nd is Social links and 3rd is contact form.
Let’s design first subsection – What client says. Use text tool to type text with font size 18px and colour white. Give some space after this and add one para. This para is for client testimonials. Use inverted commas to enclose the paragraph. Inverted comma describe that, we have displayed the clients words as it is. Display Client name and city after the para graph. Make all these 3 as group and place it on left side touching the left grid.
Second sub section – Social Follow
use all your social links with same format. It means If you want icons in circle than all icons should be in circle. Place icons with equal space in between them.
Third section is – Contact Form
Display contact form here with 5 text field. Visitor will fill this form to contact you and design submit button at the bottom of the form. User will fill the details and press the submit button to send a form.
Image may be NSFW.
Clik here to view.
Step 10
Last section is copyright Info.
Create one rectangular box with black background with height 50px. Use type tool to write copyright text and give it colour white and place it in centre.
Image may be NSFW.
Clik here to view.
You can use additional elements to make it more beautiful. You can use small polygon after each section in center.
My dear friends, I have tried my best to explain every step in designing this layout. If you have any question or suggestion please write in comment box. Suggestions are always welcome.
Thanks and enjoy.
Image may be NSFW.
Clik here to view.
The post Learn how to design a Cool Portfolio layout in Photoshop appeared first on Tutorial Web Design.