make template 1

In this guest tutorial Narendra Keshkar will show you how to create a very beautiful portfolio layout. This is our first Guest tutorial. If you want to write a tutorial for Grafpedia please read here our terms
Preview full size layout

Author

Hello, my name is Narendra Keshkar and I’m a freelance graphic designer currently residing in India. I’m specialized in the fields of corporate identity (logo) design, print design, advertising and web designs. I’m here to share ideas, knowledge, make friends and to increase my contacts. Feel free to contact me for new projects or support. To know more about me please visit at my online portfolio.

Step 1

To make a perfect web layout we first need to start perfectly. Create a new document of 1000 px width and 1400 px height.

Our first step is to set our grid system. After defining our grid system increase canvas size from 1000 px to 1280 px wide by pressing Alt + Ctrl + C in the same time. Now the area inside grid is actual visible area so design must be inside this area.

Step 2

Create a black  rectangle on the top by pressing U. You canuse any height but I kept it at 40 px.  Now create a rectangle with color 4b4b4b to make  the subscribe button. Select gradient overlay from layer style and use the following colors: 000000 and 585858.

Now select single row marquee tool and select 1 px horizontal line and fill it with white color. Put this 1 px line on top and bottom of button and give transparency 20%.

Step 3

Again create a 1px vertical line and fill it with black color. Duplicate it and nudge 1 px  to the right side and fill with white color. Now group both layer and name it “vertical divider “add a layer mask and fade edges with soft black brush. Reduce its transparency up to 30% . I will also use a RSS button on the left side of the button.

Step 4

Now create another rectangle with the following color 4b4b4b. I will create this shape for subscribe text field. You can add a 1 px line filled with white color on bottom and on the right of the shape.  Your subscribe button is completed.

Step 5

It’s time to create a header. Ccreate a rectangle of height 107 px and color b34343 and name it header. From layer style select gradient overlay. Select gradient color d40393 & 940062, set blending mode “darker color” and give it 85% opacity.

Step 6

Create another rectangle similar as in step 5 with the following height: 254 px and for this rectangle you can use the following color b34343. Apply gradient overlay with 80% opacity and select the following colors a20072 & dd009c.

Name this rectangle “featured rectangle 1”.
Now duplicate this “featured rectangle 1” layer and apply the same layer style we have used in step 5 and give it 60% opacity. Your result will look like this.

Step 7

Again press U and create a rectangle of height 107 px and name it “grey rectangle”. Apply gradient overlay and select colors e7e7e7 & ffffff.

Step 8

Now it’s time to create featured image holder. Create a white rectangle of 485px width and 280 px height. Name it photo border and duplicate it,. Reduce its size slightly smaller than photo border and name it photo. Apply inner glow from layer style and keep its size to 46 px. Choose color c52d8c with 15% opacity.

Step 9

Create another rectangle below photo border, fill it with black color and name it shadow. Apply wrap transform from right click menu and pull corner points slightly outward. Give it color mode multiply with 30-40% opacity. Your results will look like this.

Step 10

Select Pen Tool and draw a shape like a ribbon on top left corner and name it ribbon.

Add the following layer style:
Drop shadow:
Inner glow: color ed649e, size 8 px, 75% opacity, blending mode lighten.
Gradient overlay:  color d40393 & 940062, 80% opacity, scale 28%.

Step 11

Ctrl + click the ribbon layer and create a new layer. Select a soft brush of 20 px and color b05085 and paint the ribbon’s corner from one end to another and keep its blending mode multiply with 70% opacity.

Step 12

It’s time to add some lights over this ribbon so create a new layer and make rectangular selection similar to the width of corners of ribbon. Fill it with white color and blur it.

Now ribbon is complete and add text whatever you want.

Step 13

Now it’s time to add text. Choose any font of your choice and add some inner shadow of 1px size and 20% opacity. I used Aller Bold of 37 px. Try out different fonts and sizes until you like the result.

Step 14

Press U and select Rounded Rectangle Tool and create a rectangle of 100 px width and 50 px height with radius 4px. Name it highlight menu and select top right anchor points and drag them to left.

Step 15

Now duplicate this highlight menu rectangle and add gradient overlay with colors dbdbdb & ffffff with angle 5°.

Step 16

Control + click the header rectangle then ctrl + shift + click featured rectangle 1. Select soft brush of color black & size 200 px and drag from top to bottom on left and right corners. Reduce opacity to 40% -50% and color mode multiply.

Repeat same step on other side.

Step 17

Now write your company name and apply inner shadow of 2 px with 40% opacity.

Step 18

Create a rounded corner rectangle of 454 px width and 356 px height. Apply gradient overlay, choose color f0f0f0 & ffffff. Apply stroke of 1px with color ececec. Name it testimonial box.

Here is the result

Step 19

After writing some text we need to create blog update boxes. So create three rounded rectangle of width 327 px and height 211 px. Apply the same layer style as in testimonial box and with Horizontal Type Tool write some text.

Step 20

Now we’ll create a search bar, create a rounded rectangle with color f2f2f2. The height should be  30px and width 230px with radius 12 px. Apply same layer style as in step 18.

Step 21

Now it is  time to make the footer so create a rectangle of 260 px height and full width and apply gradient overlay of color 5c5b5b & 000000.

Step 22

We nearly finished this sleek portfolio layout .  This is the final result.

That’s all friends
Here is high resolution image of final layout. Please click on the image to see the full size layout