Design a creative portfolio in Photoshop

Design a creative portfolio in Photoshop

We love share our passion for graphic and web design through our blog. The objective of our tutorials and articles is not just the explanation of practical techniques to realize nice illustrations or clean web layouts. We’ll be really proud if, after reading the tutorial, you will be able to apply some of our advices in your future works.

You can reproduce perfectly the design in this post following, step by step, the instructions, but you will say “Thanks WeGraphic!” only if our tips will be helpful during the devopment of the next client projects. I know this, and I try to create original tutorials just for this reason.
Today I’ll describe how to create a clean web layout with a nice background illustration.

Below you can take a look to the final result of our efforts.

The Final Result

A gracious portfolio with a clean design and a nice illustration on the header to engage potential clients. Click on the image to see a large preview.

Designing a gracious portfolio with a clean design

DOWNLOAD PSD TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Step 0 – Start by setting-up the document

Open a new document: dimensions 1200×1640 pixels and resolution 72 pixels/inch.
To keep everything aligned we can use the 960s Grid System from here; it is not essential in this case, because we can use the Photoshop Guides (Ctrl+R to activate rules, View > New Guide to add the guide), but, how you can see in the previous tutorials, sometimes it can help.

Step 1 – Background

We’re going to create the basic layers for the background. In this case I had a precise idea on how to separate the different blocks to create the layout, why? Well, my tutorial, my web designs, ever start from a sketch (or a wireframe), it is useful just to keep in mind what is the final aim; but it’s clear that during the design process we will probably add new elements.

Designing a gracious portfolio with a clean design

So, in this case, we’ll create 5 containers, where we’ll add the content.

Add a first layer, it will be our background, with the color #ededed. Rasterize the layer (color #ededed) and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic).
Draw a rectangle on the top of the page (using the Rectangle Tool, color #cddcec) and, again, rasterize the shape and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic). Add a Gradient Overlay (Soft Light, 54%, from black to white, Angle 90% and Scale 75%).

Add, using the Rectangle Tool (U), a new shape (color #608bb6, height around 400 pixels) for the middle container, set Blend Mode to Color Burn and Fill to 75% and, then add a white Stroke of 1 pixel (from Layer Style). Finally the rectangular shape for the credits (the footer), use the same tool and color of the middle container, but now set Blend to Linear Light and Opacity to 70%.
Below the final result.

Designing a gracious portfolio with a clean design

Step 2 – Background details

We want to give more character to our background!
Add a new layer (Ctr+Shift+N) and use the Single Row Marquee Tool to add a 1 pixel white line on the top od the canvas.

Designing a gracious portfolio with a clean design

Now open a new document 12×1 pixels, unlock the background layer and hide it from the Layers Palette. Zoom to 3200%, add a new layer and using the Rectangular Marquee tool add two 1×1 pixel square, fill one with the color #fff and the other one with #000, as shown below. Then go to Edit > Define Pattern.

Designing a gracious portfolio with a clean design

We have a new pattern that we’re going to use, go back to our main document. Create a new layer and (with the Rectangular Marquee Tool) draw a selection that covers the whole canvas, fill it with a random color, set Fill to 0% then add Pattern Overlay from Layer Style.

Designing a gracious portfolio with a clean design

Now it’s time to create the clouds!
You can add 5 guides (84px – 186px – 600px – 1014px – 1118px) in order to limit the work area, then use the Ellipse Tool to add some shapes as shown to create the basic shapes. Select all the layers from the Layers Palette (Ctrl+click on layers) and then Ctr+G to group the shapes.

Designing a gracious portfolio with a clean design

Duplicate the group and convert the copy to a Smart Object – right click on the group in the layer palette, then Convert To A Smart Object – resterize it and add a subtle nois effect. Now you have to hide the excess part of the clouds using a layer mask: Ctrl+click on the “Top-background” layer thumbnail (in the Layer Palette), in order to create a selection which excludes the bottom of the clouds, then select the clouds’ layer and add a vector mask.

Designing a gracious portfolio with a clean design

Then apply the following style.

Designing a gracious portfolio with a clean design

Now we draw a nice shadow for the clouds. Duplicate the clouds’ layer and positionate the copy just below the original layer, set the fill to 0% and apply the following style.

Designing a gracious portfolio with a clean design

At this point use the same techniques to draw other clouds.

Designing a gracious portfolio with a clean design

Step 3 – Header details

Time to add the logo. Use the Pen Tool (color #79a7db) to design a billoboard (doubts on how to use the Pen Tool? Read this fantastic article written by Sebastiano), use the Line Tool to add the two white segments. Then add the following style to the billboard.

Designing a gracious portfolio with a clean design

Apply the same Drop Shadow for the two white lines too.

Add the text using the Horizontal Type Tool (T), using the Ballpark Font, then add a Drop Shadow and a soft Gradient Overlay.

Designing a gracious portfolio with a clean design

After the logo we are going to draw a nice, and simple, robot character using Zoom, Pen Tool, Ellipse Tool and Rounded Rectangle Tool. There isn’t the need to explain step by step how to create the robot, take a look to the image below and, at a glance, you’ll unbderstand how to draw our “friend”.

Designing a gracious portfolio with a clean design

Group all the shapes used to compose the robot and Add a Layer Mask, as previously done, to obtain the following result.

Designing a gracious portfolio with a clean design

Now we have to draw the bird and the badge. We use the Pen Tool, the Brush Tool an the Horizontal Type Tool. Take a look below to understand how to enhance our layout with a sweet and, I repeat, very simple illustration.

Designing a gracious portfolio with a clean design

Step 4 – First container

First of all create the box where we will insert the information of the team’s members. Use the Rectangle Tool to draw a 480×425 white box, add two grey lines as shown (Create Clipping mask to limite the segments within the white box), and add also a text (use Delicious Font).

Designing a gracious portfolio with a clean design

With the help of the Guides and Horizontal Type Tool, add photos and information about the team’s member. In this case we use Lucida Sans.

Designing a gracious portfolio with a clean design

Designing a gracious portfolio with a clean design

Draw a white “arrow” using the same technique seen for the “follow us” ribbon. Create a rectangular shape with the Rectangle Tool and then with the help of Guides, Add Anchor Point Tool and Direct Selection Tool transform it in a nice ribbon.

Designing a gracious portfolio with a clean design

Add the shadow to the ribbon. Duplicate the layer just created (you can temporarily hide the main shape), set color to #000 and opacity to 5%. Right click on the shape and go to Free Trasform Path and activate swarp modes to obtain the following result.

Designing a gracious portfolio with a clean design

Designing a gracious portfolio with a clean design

Use the Horizontal Type Tool to create a “- – - – - – - -” string, you can rasterize and trasform it to create the following effect .Also add a soft drop shadow.

Designing a gracious portfolio with a clean design

Finally add the text (using Delicious Font).

Designing a gracious portfolio with a clean design

Now create three blocks with descriptions of services that the studio provides. In this section we use the awesome icon sets, created by Asher Abbasi for WeGraphics, Wapp vol. 2 and Wapp vol. 1.
Remember: in this case the guides are really useful to fill with icons and text the section.

Designing a gracious portfolio with a clean design

Add three “dots” (with a nice drop shadow) and enhance the text with a 1px white drop shadow as shown below.

Designing a gracious portfolio with a clean design

We create also a nice menu, just below the white box, it should be clear how to realize this menu at this point. We add just a soft Inner Shadow to the “arrows.”

Designing a gracious portfolio with a clean design

Step 5 – The middle ribbon

The middle element of our design is an informative infographic that is introduced by a big ribbon that contains a slogan. In order to realize this ribbon we will create 5 custom shapes using, as usual, the Pen Tool (I remind, again, that if you are a beginner you can read Photoshop For Beginners: The pen tool to learn more about how to use this tool). Take a look below to understand what kind of shapes we need to draw (note: we will use #497287 for the main shapes and #798ea4 for the darker shapes).

Designing a gracious portfolio with a clean design

What about the style? Well, we apply the same style for the “front-shape,” as you can see below (the pattern, that we are going to use, is from Old Paper Patterns on WeGraphics).

Designing a gracious portfolio with a clean design

For the two little triangles we apply the following style:

Designing a gracious portfolio with a clean design

Finnally add the slogan.

Designing a gracious portfolio with a clean design

Step 6 – The infographic

The idea of adding a little infographic borns from the need to synthesize the creative process of our fictionary design studio. Below you can see the finale result (obvious, it’s just a simplistic example of how you can describe a creative process behind the development of a project).

Designing a gracious portfolio with a clean design

Start designing the two circles (hold down Shift to draw a perfect circumference, color #3d3d3d). Set the, for the left shape, Fill to 0%; for the right shape, set Blend Mode to vivid Light and Fill to 35%. Add the style as shown below (it is the same for both the shapes, Pattern Overlay fo the left shape apart).

Designing a gracious portfolio with a clean design

Note that the left circle use a custom pattern, we can create this pattern adopting the same technique of the Step 2.

Use Ellipse Tool (create the little white circle one time and then duplicate it to use again) and the Line Tool (Weight: 3px, color #ffffff) to design the graph on the left. Group all the shapes and the lines created, duplicate the group, convert it to smart object and then rasterize it. Now you can add the style to the layer.

Designing a gracious portfolio with a clean design

Using the Pen Tool to draw some tags (using vibrant colors: #d82f4c, #edcd59, #4d85a2, #598b3b) and then name it using Horizontal Type Tool, you can apply a soft drop shadwo to both, tag and text.

Designing a gracious portfolio with a clean design

Within the right circle add other three circles, set Fill to 20%, add text (you can apply a soft drop shadow to the string) as shown.

Designing a gracious portfolio with a clean design

Now we have to hide the excess parts of the “Design” and “Development” circles. As already seen we’ll use the Layer Mask.
Ctrl+click on the shape of the “Creativity” circle in the Layer Palette, then go to Select > Modify > Expand set the value to 3 pixels.

Designing a gracious portfolio with a clean design

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Design.”

Designing a gracious portfolio with a clean design

Repeat the operation creating a new selection and expanding it as shown. You can use Ctrl+Shift+Click when you need to add two or more selections from vector mask thumbnail; in this case we create the selection by clicking on “Design” and “Creativity” shapes.

Designing a gracious portfolio with a clean design

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Development.”

Designing a gracious portfolio with a clean design

Apply a soft Drop Shadow to the three circles to obtain the following result.

Designing a gracious portfolio with a clean design

Draw a new circle.

Designing a gracious portfolio with a clean design

Set Fill to 0% and add a white stroke (Size 3px).

Designing a gracious portfolio with a clean design

Convert to Smart Object, rasterize it and add a drop shadow (the same drop shadow applied to the graph in this “Step”). Finally, complete the infographic adding other lines and tags as shown in the following image.

Designing a gracious portfolio with a clean design

Step 7 – Bottom container

You can reproduce this section using the same techniques of the Step 4.

Designing a gracious portfolio with a clean design

Step 8 – Credits

Add a string with the credits.

Designing a gracious portfolio with a clean design

That’s all folks! I hope this tutorial can be useful to improve your skills in designing web layouts.
Stay tuned! Subscribe our RSS Feed or Follow us on Twitter, fresh tutorials and web templates are coming soon.

DOWNLOAD PSD TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

70 Comments

(+add yours)
  1. Very nice. You’re the master of web design tutorial.
    Is this tutorial continued to HTML/CSS?

    • Thank you dear Jeprie. I’ll start to code it soon!

      • Great. I just started to learn how to create wordpress themes. It will help me a lot.

      • I hope you do it soon! Looks awesome!

      • Ronald Curtis

        Fantastic Tutorial! I’d love to see the continued tutorial too. Can’t wait :)

      • Sam Mason

        Hi Piervix, I was just wondering if you had come along with coding the above template. Im just getting into coding and would love to see how this would be done.

  2. Amina

    Very cool,

    Many thanks.

  3. Wow, thats a very clean design, thanks for making this tutorial.

    • Thanks to you for the comment!

  4. Great Piervix, this is your best web layout tutorial at the time. I love this…is wonderful!!!

    Thanks to your tutorial I’m learning to use in a better way Photoshop.

    Thanks Piervix and Thanks WeGraphic!

    • Hola Fabio. Thank you very much for your great support, we appreciate! ;)

  5. One of the best web template tutorial ever seen…!

    • Too kind, thanks ;)

  6. Dude! This is sick man! You got skills!

    • Thank you Peach!

  7. Grandissimo Pier, questo è proprio il mio portfolio! Nel senso che io lavoro offrendo proprio servizi che ruotano intorno a quelle dinamiche e cioè gli ecosistemi digitali! Bello Bello! ;)

    Good mate! This is really my portfolio model! I work everyday with this kind of dynamics, i.e. digital ecosystem! So good!

    • Our “digital ecosystem”… ehehhe…

      I’m glad that you like it! Thank you for the comment.

  8. Lovely and clean layout, well explained as well.
    Bravo Pier!

    • Thank you dear Nikola!

  9. really impressive! :D

  10. I’ve learn some photoshop techniques from this you in this tutorial :D, thanks

    • Peefcrt answer! That really gets to the heart of it!

  11. vero

    Thanks new graphic for all what you give us!!!! Specially this tutorial..!!!! Great work : )

  12. Interesting tutorial, I especially like the starting point (sketching) whih should be used more in tutorials. Most ideas are born on paper with a pencil.

  13. Nice Tutorial I will become a member next month :)

  14. This is a very nice tutorial, Thank you.. bookmarked

    @mgpwr

  15. Hi

    This is a great tutorial . I like it very much.This will help me a lot in my future design related projects.I have learnt a lot from it.Thanks

  16. fatasiangeek

    nice tut. learned some new stuff there. such an inspiration!!!! booked marked and hope to see more later… thanks again

  17. Masa

    Hi!

    Very nice tutorial.
    I was wondering if you could point out any good sites, where is detailed explaination how to do the coding for the actual web page by using this type of layout?

    I haven’t done any html/css coding for a while now and almost all the things have changed since I last time I made a web page, so I think I need to start from the scratch again :/

  18. you did another excellent job. thanks

  19. pablo

    WoOooOOoooOW! One of the best tutotial about a website design. Thank you boss!

  20. Very professional (the design and the tutorial presentation). It inspires me to create creative designs. I can’t takes my eyes off in this design. Gotta try this one. Thanks a lot !

  21. Lyshun

    wow~ so nice and fashsionable tutorial
    thank to your sharing!!!

  22. We are in the process of re-desiging our website and i really like the clouds you implemented, this is a really nice & clean design. Thanks!

  23. fred

    WTF! It is amazing… thank you so much!

  24. Really good tutorial, will deffinatly consider some of the techniques you have used for inspiration when it comes to the more creative websites. Thanks for sharing!

  25. Amazing tutorial, this is a great way to put a business portfolio together, especially of past works completed and stuff.

    You have a great blog and some really good articles (not just this one) so keep up the good work and keep blogging!!!

    Thumbs up!

  26. J-effrey

    A must-see-know-try webdesign tut. thank you dude!

  27. Wow, real nice tutorial. Thank you!

  28. demous

    WOOOAOAHO! Very creative and effective. Thank you!

  29. That’s wassup.
    Nice template.

  30. Nice write-up. It’s nice to see creative illustrating in PS. Especially like the rasterizing the “——” to make it a transformable shape.

  31. that was a nice and agreat design it make learn a lot thank you for sharing =)

  32. Rush

    Almost a year later….still no template?

  33. RedKun

    Thanx piervix for you tutorial..But I got stucked in the step while excluding the cloud using vector mask..Can you help me on that one..

  34. nina

    This tutorial is fantastic, thank you!

  35. Marina

    Hey, your design is stunning – bellissimo:)
    Thanks for all the details. I love photoshop, and it looks like a lot of work. How long did it take you to design it?

  36. What a fantastic tutorial Thank you very much.

  37. You’ve done really awesome job! Fantastic website design tutorial, thanks a lot for sharing this nice post :)

  38. wawan mardian

    Hi There..
    Thanks for the tutorial.. fantastic..
    But.. when are you going to make tutorial to convert the psd to html ??
    Can’t wait to know how to slice the psd…

    Rgds

  39. Janese

    Hi there! I love this layout, and I was just wondering if the downloaded psd template includes all the layers and fonts.. Thanks for the great tutorial!

  40. In todays day and age, men and women only seem to become doing work from a single paycheck to your future. As being a matter of actuality, many people only have just the proper quantity of money inside of their financial institution accounts to be able to make a payment on their upcoming mortgage or credit card bill for the month. Lots of people hardly even see the position in placing some revenue into their savings account any more. After all, if they are continually struggling from fiscal complications because it is, why need to they start off a single, or even more the level, how can they?

  41. fish

    GOOD!!!

  42. Prateek

    Hi piervix,

    I am prateek gupta a young designer from India,thanks for share this really a great creative portfolio with us,

    In Step 2- I got stucked while excluding the cloud using vector mask.

    After create the clouds! then Ctr+G to group the shapes and Duplicate the group now what? To hide the excess part of the clouds using a layer mask: or add a vector mask
    on where ‘original cloud group’ or on ‘duplicate cloud group’? really I am so very confused on that step!

  43. Excellent beat ! I wish to apprentice while you amend your
    site, how can i subscribe for a blog website?
    The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered
    bright clear concept

  44. Olá! Pier ,
    Parabéns! Ajudou-me muito! Sou brasileira,e com muita pouca idade (13 anos) ,porém apaixonada por layouts e design(e pelo seu site u.u) , fiquei surpreendida com esse layout, muito profissional! Um dia ainda vou dar conta de criar um layout de nível profissional para ser comparado com esse …
    Obrigado, e mais uma vez, PARABÉNS

  45. Hi Piervix

    You wrote two same color (#ffc000) in the robot arm.Please check back.Thank you so much!

  46. I do accept as true with all of the ideas you’ve presented in your post. They are very convincing and will certainly work. Nonetheless, the posts are too quick for novices. Could you please lengthen them a bit from subsequent time? Thank you for the post.

  47. Its like you read my mind! You seem to know so much about this,
    like you wrote the book in it or something. I think that you could do with some pics to drive
    the message home a bit, but other than that, this is great blog.
    A fantastic read. I’ll certainly be back.

  48. Hello, yup this piece of writing is in fact nice and I have learned lot of things from it about
    blogging. thanks.

  49. Although there are those within this group who get very satisfactory results
    with one of the first at-home hair removal device that utilizes
    Home Pulsed Light technology. Such a question has popped up in the same spot.

    However, now it has become increasingly popular to not only remove
    the hair from the root. On an average, laser Hair Removal has been performed for centuries for hygiene and other reasons.
    Your hair actually needs to be heated, then applied to the skin – no tugging or pulling required
    - it simply slides right out.

  50. Excellent willing synthetic attention for fine detail and may
    foresee troubles just before they occur.

  51. Whats up! I just would like to give an enormous thumbs up
    for the good information you have right here on this post.
    I shall be coming back to your blog for more soon.

  52. I’ll right away clutch your rss feed as I can not find your email subscription link or newsletter service. Do you’ve any?
    Please let me know so that I may subscribe.

    Thanks.

  53. Hello! I simply want to give an enormous thumbs up for the nice info you??ve got right here on this post.
    I shall be coming back to your blog for more soon.

  54. Alex

    Great write up! I’ll definitely be using this today!

  55. love this blog anything that helps me learn is a real bonus and this help as explained in great detail thankyou

  56. Diana

    Hi! It’s cool lesson and very beautiful layout. thanks)

  57. I have no words to explain how happy I am. I am searching this type tutorial but I didn’t found. Here I get the full tutorial with details. Thank you so much.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team