Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop
  • 20 June 2009
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Piervincenzo Madeo
  • Comments (98)»

In this step by step tutorial I explain how to realize a nice Web Portfolio Design with a Watercolored Background using two brush sets, a icon pack and some basic techniques.
The context is clear: a web/graphic designer’s portfolio… fresh, simple and expressive.

Final Image and PSD Document

Below there is the final result (click image to see large preview). If it is interesting for you, read the tutorial!
Watercolored Web Portfolio

STEP 0 – The PSD document

Open new PSD document with the dimensions 1280×900 pixel.
Make sure that the general container is centered on the document. Use Photoshop Guides to limit width of layout in 995px. Below there is an explicative image.
Watercolored Web Portfolio

The Background

Step 1 – Watercolored Background

With Ctrl+Shift+n create the first layer, over general background layer of Photoshop, and draw a selection for general background. Fill it with a blank tint and after add a Gradient Overlay from #e8e9ec to #ffffff, or, better, use the gradient tool.
Watercolored Web Portfolio

Now download these high resolution brushes: High Resolution Watercolour Photoshop Brushes, High Resolution Watercolour Photoshop Brushes Set Two. Choose a round watercolor brush and resize it if necessary. Create a new layer and draw with the Brush Tool a stain (main color of the brush #c1dfe5). Choose another brush and repeat the previous step in new layer with a different kind of sky-blue. Iterate the operation and stop when have a good header background to add our logo.
You could also add some light-yellow (#e8f1a7) splatter stains using 122Room Splatter Watercolor Brushes. I’ve added a Bevel and Emcoss effect at the splatter layer with Depth 100%, Size 0px and Soften 6px.
Below my final result.
Watercolored Web Portfolio

Step 2 – Adding Halftones

Add (with Brush tool) on top-right side in a new layer an halftones effect using one brush from these packages: Halftones Brushes for PhotoShop. Use #bad7df color, but now set the opacity at 25%. You can mix many halftone layers for a good result, but remember: not exaggerating!
Watercolored Web Portfolio

The Header

Step 3 – Logo

Using Rounded Rectangle Tool (Radius 15px) to add a round corner shape approximately of 475×145 pixel. Add this style at the form: Drop Shadow (Multiply with #3c6d7a, Opacity 56%, Distance 2px, Spread 0%, Size 2px); Gradient Overlay (white-to-transparent, Opacity 8% and Scale 53%); Stroke (1px, color #acc4cb and Opacity setted at 62%) at last load this pattern pack and add a 1px black square pattern with the opacity at 8%.
Watercolored Web Portfolio

Right-button-click on rectangle and choose free trasform to move it as shown in the following image.
Watercolored Web Portfolio

Add a white text (60pt, color #f2faff) using Days Free Font. Insert the same style previously used for the rectangle. Position it as shown.
Watercolored Web Portfolio

Now add a second layer of text (55px) with #38555c color, after set the Blend Mode at Color Burn (Opacity 82%) and add the following style: Gradient Overlay from #20515c to #ffffff, Opacity 31%, Scale 46%.
Watercolored Web Portfolio

Step 4 – Menu

To create a menu use the same technique that we have see for the rectangular background of logo. Use Rounded Rectangle Tool to draw a bar and apply the same style of the first rectangle.
Over this layer insert the textual menu using Lucida Sans font at 25pt with # d8ebf7 color.
Watercolored Web Portfolio

Featured

Step 5 – The Basic Box and the Title

This section is the most elaborated of the tutorial.
First create, ever with rectangle tool, the box to insert the featured element, use #dbeaee color and set the style as the previous rectangles (logo and menu). However in this case we adjust the Drop Shadow and Stroke. For the shadow set Multipy #3c6d7a, Opacity 50%, Distance 3px, Spread 0%, Size 4px; while for the stroke use #516e75 color at 62% of opacity.
Make sure the alignement is correct on the left as for the logo.
Watercolored Web Portfolio

Repeat the previous operation to draw another shape with the same style and put this layer down the main. Add title for the box as we have made for the logo, but now use #89b6c1 color. Below the result after these operations.
Watercolored Web Portfolio

Step 6 – The Tabs

Right now create a little rectangle with a radius of 10 pixel to insert tabs. The tecnhique to create is ever the same, but at this point you can modify the basic color playing with the Fill of layer. Only one difference: we add a Inner Shadow (Multiply #3c6d7a, Opacity 25%, Angle -90°, don’t use global light, Distance 24 px – depending of the shape height – Size 5px) to emphasize the superimposition of the main shape.
Set number for each tab.
Watercolored Web Portfolio

Step 7 – The Content

Fill the box. Insert the text and title as shown (font Lucida Sans, color #516e75), I’ve also added icon from Tutorial9 Watercolor Icon Pack. I’ve resized and desatured the original png img. Go to Image–>Adjust–>Hue/Saturation and set Saturation at -30. Below the result.
Watercolored Web Portfolio

Sidebar

Step 8 – Bookmark

Now we add a sidebar as if it is a bookmark. To create the basic shape use Pen Tool and draw a side background as shown.
For this operation is essential utilize the Photoshop Guides. See the image to understand how to draw the big bookmark.
Watercolored Web Portfolio

Close the line and we’ll have a #516e75 color tint for the bookmark shape (see the setting of pen tool on previous image).
The style for this layer is the usual (Drop Shadow, Gradient Overlay, Stroke, Pattern Overlay). Attention at the Drop Shadow, infact for this option we set Angle 60°, don’t use global light, Multiply with #3c6d7a, Opacity 71%, Distance 4px, Spread 0%, Size 5px.
Watercolored Web Portfolio

Step 9 – The Sidebar Content

Now fill the sidebar with some contents as we have made for the Featured box (in this case use Lucida Sans using #c4dfe6 for title and #c4dfe6 for normal text).
Watercolored Web Portfolio

To add division lines for title use Line Tool and draw a 1px line, set the Fill of the layer at 0% and then add the style: Gradient Overlay (Linear from #e6f1f8 to transparent, Opacity 100%, Angle 180% and Scale 108%). For the post content division lines I used reflected overlay and not linear.
Watercolored Web Portfolio

Footer and Down Container

Step 10 – Finalize Layout

To finalize add two text box down Featured box and the footer with a rectangular shape for background and text with credits.
Watercolored Web Portfolio

Conclusion and Source File

End! See your work and drink a cold beer. It’s a good work!
This is an intermediate PhotoShop tutorial and we realized a nice portfolio home-page, but the next step is the PSD to HTML conversion. So stay tuned!

The complete layered PSD file is released under a Creative Common License also for commercial/public use.
Watercolored Web Portfolio

Download Source

WaterColored Portfolio Complete Tutorial

Author: Piervincenzo Madeo

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.

website design and development

98 Comments

  1. Markus

    Great Job, I will be using in the near future!

  2. SmithWebLover

    It’s a fantastic photoshop job…waiting for HTML and CSS!

  3. everybodyweb

    WOW thats Cool… thanks! It

  4. JacOB

    Only ten step for a great web design… I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial I love this tutorial!!!!!

  5. Jason

    hello, when with the css tutorial be up? thanks

  6. photo retouching services

    I really like the result. Also think your site is stunning!

  7. nice web styles

    thats a realy nice man and have very helpful content

  8. David Bolton

    Excellent tutorial, learned a lot from it, especially the use of textures and the subtle, (but effective) use of gradients. Added my version on my blog at: http://www.djbolton.com/item.php?i=168

    Oh and now follow you on Twitter

    Thanks

  9. TrompoDesign

    Genial muy bueno, Les recomiendo cheken esta pagina es de unos morros exitosos en el norte de mexico | TrompoDesign. saludos!

  10. Melissa

    you are so cool~

  11. lol

    i dont see how its soo dang nice

  12. jimmy swag

    I HAD EXPLOSIVE DIARRHEA AFTER THIS TUTORIAL… THANKS AGAIN !

  13. thebulfrog

    This is great – one of the steps I feel that’s left out is the back and forth process every designer goes through in iterating their designs. No one starts with the finished polish. I posted a video showing my own back and forth in creating a website in a time-lapse format. http://www.youtube.com/watch?v=AOJlQRTbLpM if you’re curious.

  14. http://www.mostinspired.com/blog/2008/08/27/managing-inspiration/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  15. http://cafedegeek.com/2600/evolution-iphone-infographic/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  16. http://txhoudini.com/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  17. Rachel Shifferd

    I’ve been here a few times and it seems like your articles get more informative every time. Maintain it up I appreciate reading them.

  18. online options trading

    I like the helpful information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I’m quite sure I will learn lots of new stuff right here! Best of luck for the next!

  19. jackbo

    Oilpaintingnow.com specializes in oil painting, original oil paintings, fine art reproduction, art, & oil painting reproductions. Find that perfect piece of art today!

  20. las drogas

    I was recommended this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You’re amazing! Thanks!

  21. Posicionamiento Seo

    hey there and thank you for your information – I’ve certainly picked up anything new from right here. I did however expertise some technical issues using this web site, since I experienced to reload the site a lot of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and could damage your quality score if advertising and marketing with Adwords. Anyway I’m adding this RSS to my email and can look out for a lot more of your respective fascinating content. Make sure you update this again soon..

  22. Rusty Wubnig

    thanks man very very helpful to me

  23. Free Articles

    Hello. Great Job, I did not expect this on Friday. This is a great story. Thanks.

  24. Free Articles

    In search for sites related to web hosting and comparison hosting plans, your site came up.

  25. Delinda Bothman

    hey, discovered this post on a Google search while looking for something entirely different. That’s the end of my schedule today, thanks.;)

  26. pregnancy nausea remedies

    no matter what you are saying, you got it

  27. Lovie Farace

    Great article. Waiting for more.

  28. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  29. weight loss tips

    clear list or reset lists?

  30. Francina Knowiton

    Hey I am so delighted I found your webpage, I really found you by accident, while I was searching on Aol for something else, Anyways I am here now and would just like to say thanks for a tremendous post and a all round interesting blog (I also love the theme/design), I don抰 have time to read it all at the moment but I have bookmarked it and also added your RSS feeds, so when I have time I will be back to read more, Please do keep up the fantastic job.

  31. Hiedi Macomb

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this outstanding blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this blog with my Facebook group. Chat soon!

  32. do follow list of lists

    Thank you for taking the time to write this!

  33. Prada outlet Online

    What i will not recognized is if in all honesty exactly how you’re no more a real lot more smartly-preferred compared to you could be today. You are very intelligent. You understand consequently substantially in relation to this particular subject, created me for my part consider it through a lot of varied angles. It’s just like men and women are certainly not interested besides it is something to do with Lady gaga! Your personal stuffs excellent. Constantly look after up!

  34. Discount Cartier Jewelry

    I just book decided your blog on Digg and StumbleUpon.I enjoy reading your commentaries.

  35. treatment centers alcohol

    free drug rehab if you have insurance check this link out to see if you qualify http://abttc.net/insurance

  36. advertising agencies london

    Excellent blog here! Also your site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as yours lol

Trackbacks

  1. C

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US