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!

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.

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.

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.

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!

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%.

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

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

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%.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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 Portfolio Complete Tutorial

• Part One: Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop
• Part Two: WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial