How to Create a Killer Portfolio in Photoshop [Very Detailed]

Posted in Tutorials • Posted on 21 Comments

In this in-depth tutorial, I will show you how to create a portfolio in Adobe Photoshop CS4. If you have never tried a site build in Photoshop then don’t worry because I have explained everything so that even noobs can continue with this tutorial. So what are we waiting for? Let’s start.

105

View full size | Download PSD

Resources that you will need:

Step 1 –  Creating document

So, lets create new document, (File > New…). Make this document 1200 px per width and 1500 px per height and press OK.

Step 2 –  Background

2.1 Convert “Background” layer to “Layer From Background…”. Thats because to let us make this layer editable.

1

2.2 Rename “Layer 0″ to “Background”.

2.3 Press right mouse button on layer to go to Blending Options.

2

2.4 Set Color Overlay to #f2f1dd

Step 3 –  Headers Background

3.1 Take “Rectangular Marquee Tool” and set Style to “Fixed Size”, set width to 1200 px and height to 108 px.

3

3.2 Select now the very top (just like in the previous image), create new layer, name it “header background” and fill it with any color using “Paint Bucket Tool”.

3.3 Go to layers “header background” Blending Options > Gradient Overlay. Change only color, everything else is by default. So color use from #dfc78d to #ccb681.

4

Step 4 –  Logo

4.1 Write logo or use your own logo. I wrote logo and made some nice modifications to it. So write down “PORTFOLIO”, set font to Bebas (it’s in the resources section upper), font size to 72 pt and set it to “Smooth”, put it somewhere in headers section. Something like that:

5

4.2 Lets add some nicer look to logo. Go to Blending Options.

Set Drop Shadow:

  • Blend Mode: Normal and color complitely black –  #000000
  • Opacity: 14%
  • Distance: 0 px
  • Size: 6 px

Everything else is by default.

6

Set Inner Glow:

  • Blend Mode: Normal
  • Opacity: 100%
  • Color: #e8e8e8
  • Size: 7px

Everything else is by default.

7

Set Stroke:

  • Size: 1px
  • Position: Inside
  • Color: #ffffff

Everything else is by default.

8

So now it must look much more better than before.

4.3 Adding “Dagg Murphinn’s”. Write down persons name, use this setup: font – Bebas, size –  18 pt, “Smooth”, color –  #403a20. Put it in place like this:

9

4.4 Lets cut “IO”. We need to “Rasterize Type” layer “PORTFOLIO”, to do this click with mouse right button on layer “PORTFOLIO” and select “Rasterize Type”. This is because to let us delete some area from “IO”. Now take “Rectangular Marquee Tool” and select like this (“DAGG’s” height and some pixels more):

10

Oh, and if you cant select that area, then you forgot to change “Rectangular Marquee Tool’s” Style to Normal. So move selected area:

11

Don’t forget that now you have selected layer “PORTFOLIO”. Now just click button Delete on keyboard.

Select this area:

12

Press and hold CTRL and drag with mouse selected area:

13

4.5 Lets add some shining things. Create new layer between “header background” and “PORTFOLIO”, name it “shiny 1”. Select that area (in picture below), take “Brush Tool” and take brush like this –  14, use size for brush approximately 560 px and just click it like that:

15

With “Eraser Tool” take the same brush style (just like before upper) and smaller size (I took 300 px) delete these areas:

16

Select this area:

17

Create new layer “shiny 2”, place it under “shiny 1” layer. Take “Brush Tool” and again brush is the same style, but size ~ 200 px. Click one time in selected area!

Delete these areas just like before, and set layers “shiny 2” opacity to 40%.

19

YEAH! With logo we have done!

To let us work more easily and more qualitative, lets create folders to group layers. Click on layer “Dagg murphin’s” and create new folder.

20

Now click on the same layer “Dagg murphin’s”, and holding Shift button on your keyboard click on layer “header background”. It must look like that:

21

and then simply drag selected layers into that folder.

22

I forgot to change folders name, so name it “header”.

Lets group a little bit more, make folders like that:

23

Step 5 –  Menu

5.1 Make new layer into folder “menu”, name it “menu background”. Take “Rectangular Marquee Tool”, select Style to “Fixed Size” –  width: 1200 px and height: 32 px.

Select area under header, like that:

24

Fill it with color #7b5a34 using “Paint Bucket Tool”.

5.2 Create new layer above layer “menu background”, name it “menu background 2”. Select area with “Rectangular Marquee Tool”, Style to “Fixed Size” –  width: 1200 px and height: 30 px, like:

25

Fill it with color #a87c47.

5.3 This is very similar to point 5.2. Create new layer above layer “menu background 2”, name it “menu background 3”. Select area with “Rectangular Marquee Tool”, Style to “Fixed Size” –  width: 1200 px and height: 28 px, like:

26

Fill it with any color. Now go to layers “menu background 3” Blending Options > Gradient Overlay. Change only color:

  • Where position 0% – #886439
  • Where position 50% – #7B5A34
  • Where position 100% – #88643A

27

5.4 Write menu links.

Setup:

  • Font: Tahoma
  • Font Size: 15 pt
  • Smooth
  • Color: #ffffff

28

5.5 Creating separators. Create new layer above layer “Home …”,name it “sep”. Take “Rectangular Marquee Tool”, Style – Normal. Fill selected area with white color. Add Layer mask to that layer:

30

Take “Gradient Tool” and use setup “black to white to black” like this:

31

Take Gradient action across layer, from one side to other. Must be like this:

32

Duplicate layer “sep”.

33

Move new layer 1 px to right. Go to Blending Options > Color Overlay and chose black color. Set opacity to both “sep” layers to 20%. Merge both layers (select both layers > press mouse right button > Merge layers). Name new layer to “separator”. Duplicate this layer as much times as you have links and count off 1. So I have 5 links, so I must have 4 separators. The first one is already created, so i must duplicate this layer 3 times. When that is done, place layers between every two links.

34

Step 6 –  Slider

6.1 Create new folder –  “Slider”. Create new layer into “Slider”’s folder, name it “picture”. Get some picture and resize it to 434 px per width and 322 px per height. That’s random digits, you can chose your own size.

6.2 Duplicate this layer and put it under “picture” layer. Go Blending Options and use steup:

  • Color Overlay: white –  #ffffff
  • Stroke:
    • Size: 2 px
    • Position: Inside
    • Color: #af977c

Now we need to increase every side on edge to 5 px. To do this, press CTRL + T, zoom in to facilitate work and drag every side outside 5 px.

35

36

6.3 Creating arrows. Create new folder under layer “picture copy”, name it “arrow left”. Take “Ellipse Tool” and make a ball holding Shift on keyboard. Put it in place like this:

37

Do Gradient Overlay on that layer. Colors: from #70604e to #af977c.

38

6.4 Rasterize layer “Shape 1” (4.4) and rename it to “arrow background”. Now you can do two ways to select that area that you do not need: just selecting area to delete, or holding CTRL (in that place in image below) and selecting all layers area:

39

40

Now just click Delete on keyboard.

Create new layer above layer “arrow background”, name it “stroke”, select all “arrow background” area (just like in step 6.4), go to Edit > Stroke…

Use color #c2b8ab for stroke and location inside.

41

Zoom in, press CTRL + T to resize, and reduce all sides by 1 px except the right one.

42

add layer mask (5.5), take Gradient Tool and use gradient from black to white, now just drag it from right to left.

43

Create new layer above previous one. Name it “shiny”. Select all layer “arrow background” and unselect from it bottom.

44

Fill it with white color and go to its blending options.

Setup:

  • Opacity: 8%
  • Fill Opacity: 0%
  • Gradient Overlay:
    • Color: from white to white, and there where are opacity changers above color chosers, select first one to 100% and second one to 0%

45

Create new layer above previous one, name it “arrow”, take “Rounded Rectangle Tool” and set radius to 10 px or more. Make it like this:

46

Press CTRL + T and rotate it like this:

47

Do “Rasterize Layer” (4.4) and delete area that is under “shiny” layer.

48

Duplicate this layer (5.5), press CTRL + T and transform it vertically (right click and Flip Vertical), drag it under previous layer.

49

Merge both arrow layers (5.5), duplicate the new one and place both layers that you like it. And merge these arrow layers again, rename it to “arrows”.

50

To copy all this what we have done to arrows, lets copy (duplicate) folder “arrow left” and rename it to “arrow right”. Holding SHIFT drag it to right side of picture. Press CTRL + T and transform it horizontally (right click > Flip Horizontal).

51

52

Arrows completed!

6.5 Adding some extra text one picture. Create new layer above layer “picture”, name it “text background”. Select all “picture” area (6.4), unselect some area:

53

Fill in that area with black color and set opacity to this layer 35%.

Write down some random text.

Setup to heading:

  • Font: Tahoma and Bold
  • Size: 12 pt
  • None
  • Color: #bcbcbc

Setup to paragraph:

  • Font: Tahoma
  • Size: 11 pt
  • None
  • Color: #bcbcbc

54

Step 7 –  Creating “Fast info”

7.1 Create new folder below “Slider” folder. Name it “Fast info”, create again new folder in this filder, name it “who am i”. Upload some icon. Name this layer “icon”. Write some text.

Setup:

  • Font: Tahoma
  • Size: 15 pt
  • Smooth
  • Color: #5e3a04

55

56

7.2 Create new layer, doesn’t matter how you name it. Select area like this (only 1 px per height):

57

Fill it with #d5bba2. Now duplicate this layer and drag it like this:

58

Merge layers.

And repeat duplicating layers and merging til you get something like this:

59

Rename this layer as “line”.

Write down dome random text.

Setup:

  • Font: Tahoma
  • Size: 11 px
  • Color: #373737

60

Now you have one “fast info” completed, now you can re-do steps 7.1 and 7.2 to create second one or copy these layers (all folder) to create second “fast info”.

61

Step 8 –  Latest in blogs

8.1 Create new folder below “Fast info” folder, name it “Latest in blogs”. Write “Latest in blogs”. Use this setup:

  • Font: Tahoma
  • Size: 16 pt
  • Sharp
  • Color: #4b310b

Create new layer under previous one. Select area (1 px height):

62

Fill it with black color. Set opacity to this layer 20%. Duplicate this layer and drag it 1 px under previous layer. Go to Blending options and set Color overlay to white. Set Opacity to this layer 100%. Merge both these layers and rename new layer to “line”.

63

Now you must erase right and left side for better looking. To do this, take “Eraser Tool”, brush style like this –  14, size approximately 200 px.

64

8.2 Grab some random picture, resize it to 50 x 50 px. Rename it to “pic”, go to its blending options > stroke and user setup:

  • Size: 1px
  • Color: #786754
  • Position: Outside

Write some random text. Setup:

  • Font: Tahoma Bold
  • Size: 14 pt
  • None
  • Color: #4b310b

65

Now you must create line like this:

66

67

To do that, you just need to follow step 7.2, but lines pixels are 1 x 1. When it’s done, rename new layer to “line”, and set color overlay to #cac4b0 color.

Make folders and layers like this:

68

Now duplicate folder “article” as many times as you wish and drag it below, I did 4. And remember to delete layer “line” in last “article” folder, because that layer is needless.

69

So, left side is now completed!

Step 9 –  Right side

9.1 Create new folder below folder “Latest in blogs”, name it “right side”. Grab “Rectangular Marquee Tool”, set style to Fixed size –  width 300 px, height 1300 px. Select area like this:

70

Create new layer “background”. Fill it with #ece9d4 color.

71

9.2 Create new folder inside this folder, name it “contact me now”. Write some text, use this setup:

  • Font: Tahoma
  • Size: 13 pt
  • None
  • Color: #9e4205

72

9.3 Select area with “Rectangular Marquee Tool”, using 1 px per height.

73

Create new layer, fill it with #dfd8c1 color. Now duplicate this layer and drag it 2 pixels down.

74

Merge these two “line” layers, rename it to “hr”.

9.4 Add some text with this setup:

  • Font: Tahoma
  • Size: 11 pt
  • None
  • Color: #553b2a

75

9.5 Re-do steps 9.2 to 9.4 (or just duplicate these layers and rename such things as “contact me now”) as many times you wish to add some panel. Now you will have some challenge to do by yourself, now when you have learned how to make some very simple things in Photoshop, you must add panels.

76

I think that you can do these simple things. I will just say some stups that will help you.

For picture:

77

How to make border like that: take a look at step 6.2, but here borders color is #7d765e

For “more”:

78

  • Font: Tahoma
  • Size: 10 pt
  • None
  • Color: #70673e

For picture that is not hovered:

79

How to make border like that: take a look at step 6.2, but here borders color is #a7a089

And also, go to blending options > color overlay > color: #000000, opacity: 30%.

For picture that is hovered:

80

How to make border like that: take a look at step 6.2, but here borders color is #9e4306

And there is no such thing as color overlay for hovered layer.

Icons you can get from icon pack at the top of article.

81

If you have successfully followed previous steps, than you must have something like this:

76

Step 10 –  Footer

10.1 Create new folder below folder “right side”, name it “footer”. Create new layer “background”, take “Rectangular Marquee Tool” and set Style to “Fixed Size”, set width to 1200 px and height to 280 px. Now select very bottom of document.

82

Fill it with #1e1e1e color. Go back to “right side” layer “background” and delete area that is needless.

83

10.2 Go back to “footer”. Create new layer above “background”, name it “shadow”, select area:

84

Fill it with any color. Go to blending options > gradient overlay and change only colors: from #1e1e1e to #121212.

10.3 Above layer “shadow” create new folder named “our team”, in it write text “OUR TEAM” using this setup for Inner Shadow:

85

And for color overlay use just color #c55b13.

86

10.4 Create line like this (just the same as in step 8.2, but color overlay chose #ba7546):

87

10.5 Write down some names and surnames:

Setup:

  • Font: Tahoma
  • Size: 14 pt
  • Sharp
  • Color: #6b6958

88

10.6 Duplicate folder “our team” and delete last layer (where are names and surnames), rename new folder to “offer us a job”, then extend line:

89

90

10.7 Take “Rounded Rectangle Tool”, set radius to 4 px. Drag it like that:

92

Use setup:

Drop Shadow:

93

Inner Glow:

94

Gradient Overlay (From #1a1a1a to #1c1c1c to #1a1a1a):

95

And get something like this:

91

Write some text, setup:

  • Font: Tahoma
  • Size: 12 pt
  • None
  • Color: #b89883

96

10.8 Duplicate these layers:

97

10.9 Create button, use the same steps as in 10.7:

98

Setup:

Drop Shadow:

93

Inner Glow:

94

And color overlay just color #21160f.

10.10 Create new folder below “offer us a job”, name it “button and copyright”. Create shape with “Rounded Rectangle Tool”, radius 4 px. Do “Rasterize Layer” (4.4) and delete needless area to get something like this:

99

Use Gradient Overlay setup for this layer:

From #b1ae95 (0%) to #ece9d4 (17%) to #ece9d4 (74%) to #a19c7c (100%)

100

Name this layer as “top background”.

10.11 Add arrow from icon pack at the top of article. Delete needless area and go Images > Adjustments > Desaturate.

101

10.12 Add text using setup:

  • Font: Tahoma
  • Size 14 pt
  • Smooth

Drop Shadow:

102

And color overlay just color #2c2c2c.

103

10.13 And copyright using setup:

  • Font: Tahoma Bold
  • Size: 10 pt
  • None
  • Color: #a96b41

107

And that’s it! We’re done! Please post your outcomes!

13 Written Articles

Valters is 17 years old freelancer from Latvia. His experience in web-building is about 3 years - PHP, xHTML, CSS. He enjoys web-building with different languages. You can follow him on Twitter.

21 Comments Best Comments First
  • Jason

    Monday, August 16th, 2010 15:46

    16

    The post is very detailed, but I’m missing the “killer” portfolio part somewhere.

    +1
  • Millie

    Tuesday, August 10th, 2010 15:02

    3

    This is a excellence detailed tutorial, good for me. I’m using GIMP for all my images manipulation on my website. But, after reading lots of Photoshop tutorials (including this) from the net, I decided to use Photoshop. Photoshop is really popular & powerful, can do much more then other tools.

    0
  • Adel Austin

    Wednesday, August 11th, 2010 07:21

    8

    I’m really excited to learn how to create a portfolio in photoshop. You have explained it in detail so that even a new one can do this. Thanks for the useful post.

    0
  • Arun Krishnan

    Wednesday, August 11th, 2010 13:51

    9

    Very interesting…Thanks :)

    0
  • Luca

    Wednesday, August 11th, 2010 15:06

    10

    And how do you do it in a html valid site? It’s only a picture at the moment?!

    0
  • Manmohanjit Singh

    Tuesday, August 10th, 2010 13:17

    1

    Awesomeness. I’ve bookmarked the tutorial for later use :D

    0
  • Eddy

    Tuesday, August 10th, 2010 21:30

    7

    Excellent tutorial! I am trying to build my own and I have no experience doing it so I was wondering if you have another tutorial that can help me on how to publish and make it work in a website. Thanks.

    0
    • Megan Battistella

      Wednesday, August 11th, 2010 19:11

      11

      I agree! That is where I am lacking, that would be a WONDERFUL tutorial!

      0
  • Ethan

    Tuesday, August 10th, 2010 15:59

    4

    Very nice tut many good explation, Would you tell us how you would do to export it as a HTML – CSS file ? I mean, how would you process it ? And one last question, could you tell me how you would create others pages that will be linked to your read more or view more ?

    0
  • Beau

    Tuesday, August 10th, 2010 19:22

    5

    Thank you! Nice looking portfolio theme!

    0
  • Hattori Hanzo

    Wednesday, August 11th, 2010 01:34

    6

    Hi!
    Yes I’m also very interested in the postwork like Ethan mentioned it!
    If you could add this, your tutorial would be counted as absolutely awesome! :)

    0
  • TiTi

    Wednesday, October 5th, 2011 16:46

    18

    Oh sorry, I had forgotten that it was english language.
    I was congratulating the quality of your article, but I am wondering where I could find the creation date of your articles.

    0
    • Rean John Uehara

      Wednesday, October 5th, 2011 17:44

      19

      Hi, for some reason it’s disabled. This article was published on August 10, 2010.

      0
  • Valters Bergspics

    Thursday, August 12th, 2010 15:30

    12

    Don’t worry, tutorial about how to build complete html and css website WILL BE, someday :)

    0
  • sarah

    Saturday, December 31st, 2011 23:22

    20

    Thank you very much it is a great tutorial and I appreciate the detailed explanations.

    0
  • Fasiulla khan

    Wednesday, February 15th, 2012 11:14

    21

    Nice design, but what about other pages i.e, blog, portfolio, about me & contact
    And what about activating links, Go to Top button & Contact form

    0
  • Mwasamani

    Friday, August 27th, 2010 13:06

    17

    Marvelous
    For a Portfolio

    This is where I liked to be most of my wasted time!!

    Thanks

    0
  • Jarkko Sibenberg

    Thursday, August 12th, 2010 11:01

    13

    I like the amount of detail you put in the tutorial. It’s quite fascinating reading about how other people work in Photoshop. Even if I think I know the software pretty well, there’s always alternate methods to learn, of how to make things work.

    There’s some design side of things on your example site I would change if it was me, but that’s not really the point of this article, I don’t think. Overall the design looks quite sharp. Thanks for the good tutorial. Maybe next you could indeed make a tutorial about coding it up if you do that kind of stuff?

    0
  • Juliann

    Thursday, August 12th, 2010 12:20

    14
    0
  • Brian Jones

    Friday, August 13th, 2010 16:20

    15

    Nice tutorial and overall a nice design. Only critiquing I have is that there seems to be too much white space in the lower left corner (unless this entire area is for posts). Good job though and thank you for the post..

    0
  • Ellen

    Tuesday, August 10th, 2010 13:24

    2

    Thank you so much for this tutorial! It looks amazing and very detailed. I can’t wait to try it to build my portfolio and to learn some new PS techniques.

    -1
  • Fasiulla khan

    Wednesday, February 15th, 2012 11:14

    21

    Nice design, but what about other pages i.e, blog, portfolio, about me & contact
    And what about activating links, Go to Top button & Contact form

    0
  • sarah

    Saturday, December 31st, 2011 23:22

    20

    Thank you very much it is a great tutorial and I appreciate the detailed explanations.

    0
  • TiTi

    Wednesday, October 5th, 2011 16:46

    18

    Oh sorry, I had forgotten that it was english language.
    I was congratulating the quality of your article, but I am wondering where I could find the creation date of your articles.

    0
    • Rean John Uehara

      Wednesday, October 5th, 2011 17:44

      19

      Hi, for some reason it’s disabled. This article was published on August 10, 2010.

      0
  • Mwasamani

    Friday, August 27th, 2010 13:06

    17

    Marvelous
    For a Portfolio

    This is where I liked to be most of my wasted time!!

    Thanks

    0
  • Jason

    Monday, August 16th, 2010 15:46

    16

    The post is very detailed, but I’m missing the “killer” portfolio part somewhere.

    +1
  • Brian Jones

    Friday, August 13th, 2010 16:20

    15

    Nice tutorial and overall a nice design. Only critiquing I have is that there seems to be too much white space in the lower left corner (unless this entire area is for posts). Good job though and thank you for the post..

    0
  • Juliann

    Thursday, August 12th, 2010 12:20

    14
    0
  • Jarkko Sibenberg

    Thursday, August 12th, 2010 11:01

    13

    I like the amount of detail you put in the tutorial. It’s quite fascinating reading about how other people work in Photoshop. Even if I think I know the software pretty well, there’s always alternate methods to learn, of how to make things work.

    There’s some design side of things on your example site I would change if it was me, but that’s not really the point of this article, I don’t think. Overall the design looks quite sharp. Thanks for the good tutorial. Maybe next you could indeed make a tutorial about coding it up if you do that kind of stuff?

    0
  • Valters Bergspics

    Thursday, August 12th, 2010 15:30

    12

    Don’t worry, tutorial about how to build complete html and css website WILL BE, someday :)

    0
  • Luca

    Wednesday, August 11th, 2010 15:06

    10

    And how do you do it in a html valid site? It’s only a picture at the moment?!

    0
  • Arun Krishnan

    Wednesday, August 11th, 2010 13:51

    9

    Very interesting…Thanks :)

    0
  • Adel Austin

    Wednesday, August 11th, 2010 07:21

    8

    I’m really excited to learn how to create a portfolio in photoshop. You have explained it in detail so that even a new one can do this. Thanks for the useful post.

    0
  • Eddy

    Tuesday, August 10th, 2010 21:30

    7

    Excellent tutorial! I am trying to build my own and I have no experience doing it so I was wondering if you have another tutorial that can help me on how to publish and make it work in a website. Thanks.

    0
    • Megan Battistella

      Wednesday, August 11th, 2010 19:11

      11

      I agree! That is where I am lacking, that would be a WONDERFUL tutorial!

      0
  • Hattori Hanzo

    Wednesday, August 11th, 2010 01:34

    6

    Hi!
    Yes I’m also very interested in the postwork like Ethan mentioned it!
    If you could add this, your tutorial would be counted as absolutely awesome! :)

    0
  • Beau

    Tuesday, August 10th, 2010 19:22

    5

    Thank you! Nice looking portfolio theme!

    0
  • Ethan

    Tuesday, August 10th, 2010 15:59

    4

    Very nice tut many good explation, Would you tell us how you would do to export it as a HTML – CSS file ? I mean, how would you process it ? And one last question, could you tell me how you would create others pages that will be linked to your read more or view more ?

    0
  • Millie

    Tuesday, August 10th, 2010 15:02

    3

    This is a excellence detailed tutorial, good for me. I’m using GIMP for all my images manipulation on my website. But, after reading lots of Photoshop tutorials (including this) from the net, I decided to use Photoshop. Photoshop is really popular & powerful, can do much more then other tools.

    0
  • Ellen

    Tuesday, August 10th, 2010 13:24

    2

    Thank you so much for this tutorial! It looks amazing and very detailed. I can’t wait to try it to build my portfolio and to learn some new PS techniques.

    -1
  • Manmohanjit Singh

    Tuesday, August 10th, 2010 13:17

    1

    Awesomeness. I’ve bookmarked the tutorial for later use :D

    0

Comments are closed.

54.166.8.138 - unknown - unknown - US