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 (97)»
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.
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
Great Job, I will be using in the near future!
It’s a fantastic photoshop job…waiting for HTML and CSS!
WOW thats Cool… thanks! It
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!!!!!
hello, when with the css tutorial be up? thanks
I really like the result. Also think your site is stunning!
thats a realy nice man and have very helpful content
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
Genial muy bueno, Les recomiendo cheken esta pagina es de unos morros exitosos en el norte de mexico | TrompoDesign. saludos!
you are so cool~
i dont see how its soo dang nice
I HAD EXPLOSIVE DIARRHEA AFTER THIS TUTORIAL… THANKS AGAIN !
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.
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
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.
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!
Oilpaintingnow.com specializes in oil painting, original oil paintings, fine art reproduction, art, & oil painting reproductions. Find that perfect piece of art today!
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!
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..
thanks man very very helpful to me
Hello. Great Job, I did not expect this on Friday. This is a great story. Thanks.
In search for sites related to web hosting and comparison hosting plans, your site came up.
hey, discovered this post on a Google search while looking for something entirely different. That’s the end of my schedule today, thanks.;)
no matter what you are saying, you got it
Great article. Waiting for more.
There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM
clear list or reset lists?
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.
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!
Thank you for taking the time to write this!
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!
I just book decided your blog on Digg and StumbleUpon.I enjoy reading your commentaries.
free drug rehab if you have insurance check this link out to see if you qualify http://abttc.net/insurance
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