Beautiful Watercolor Effects in Web Design

By   |  Stashed in Inspiration
22

Overview

Web design trends come and go. You should be very wary not to jump on the latest ones that have no real staying power. An over abundance of glossy-iconed 2.0 sites are sure to look really outdated, real soon. I’d argue they already do. However some trends, can look awesome long after the trend has peaked. I think watercolor designs, when done right, are one of those trends.

Recently, I’ve spotted more and more gorgeous watercolor effects in web design. I’ve created this post to serve as a bookmark for inspiration, resources and tutorials on designing these effects.

Inspiration Web Designs

Here is a showcase of some beautiful examples of watercolor effects in web design.

Agami Creative

agami

Brad Candullo

bcandullo

Viget Labs

viget

Platin

building

Matt Mullenweg

matt

Billy Hughes At War

billy-hughes

Squawk

squawk

Webstock

webstock

Happy Cog

happy-cog

blog.critical

blog-critical

Electric Pulp

electric-pulp

Resources

A bunch of awesome freebies that will help you produce the look.

Free Watercolour Brush Strokes: Hi-Res PS Brushes + Source Files

fudge-graphics

106 Delicious Water Color Illustrator Brushes

colorburned

Photoshop Freebie: Watercolor Brush Set

designblurb

Free High-Res Photoshop Brushes: Grungy Watercolor

bittbox

WaterColor .1. Brushes Pack

brusheezy

Splatter and Watercolour Brushes For Photoshop

smashing-brushes

Tutorials

A list of some great tutorials to help you learn how to create watercolor effects

Watercolor Brush Tutorial

vectips

Create a Watercolor Vector Flower Illustration

vectortuts

Create Cool Watercolor Effects in Photoshop

psdtuts

Design Watercolor Effect Menu

webdesignerwall

Create Convincing Watercolor Effects Using Photoshop

crane

Final Thoughts

This compilation could have included even more resources, but I wanted to focus on some of the best that I’ve found and not flood it with average ones. I hope you find this useful. Let me know what you think of watercolor effects in web design. Is the trend here to stay?

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://www.csharpdesign.co.uk Chris Sharp

    I keep going back to the Billy Hughes site, it’s simply stunning!

    Nice round-up, thanks for the links to brushes – can never get enough of those!

  • http://iniwoo.net T-Law

    Thanks for this useful freebies and inspiration ;)

  • http://fragments77.com/blog Silentgirl

    Absolutely beautiful & inspiring !

    Silentgirl´s last post was… Colour Inspiration : 12 Beautiful Vintage Colour Palettes – Part 1

  • http://www.clickonf5.org Sanjeev

    Ultimate collection buddy, thanks for sharing them with us

    Sanjeev´s last post was… Create dynamic forms using Zoho Creator Web Form Builder

  • http://www.wefunction.com liam

    Very good stuff, watercolor is certainly one of the best trends in web design at the moment, and has been for a while. I think, and hope this style could be around for quite a while too!

    liam´s last post was… Icon Set Giveaway Results & Some Graphic River News

  • http://www.myinkblog.com Andrew Houle

    Glad to hear the good feedback on this post!

    @Liam Yeah, I think this one has more staying power than most; and rightly so!

  • http://www.petemorley-portfolio.co.uk Pete Morley

    The web is becoming much more tactile and I like it.

    Pete Morley´s last post was… My Twitter Activity for 2009-03-11

  • http://www.eightyonedesign.co.uk/blog Lucinda – eightyone design

    Brilliant round up! I love Brad Candullo’s site and Matt Mullenweg’s site.

  • http://www.logoblog.org/ Nora Reed

    Watercolor seemed to be a media that died out, but every once in a while, it does come back and I think it should. It is very beautiful.

  • http://www.danblee.com Dan B. Lee

    Great additions. Couldn’t have come at a better time. I know I’ll be using some of this with an upcoming creative project.

  • http://www.tutorialking.eu Thomas

    Cool :), Usefull list

  • http://mondonucleosis.com MondoNucleosis

    Thanks a lot for this list. It will be very useful.

    MondoNucleosis´s last post was… MondoNucleosis now runs on Thesis!

  • http://phiredesign.net AJ Troxell

    Very nice list of websites using watercolor techniques in design, as well as some great tutorials. Thanks for posting this Andrew!

    AJ Troxell´s last post was… Hand Drawn Social Vector Set

  • Hunter

    I would have probably also mentioned http://deborahcavenaugh.com , but hey – no one’s perfect.

  • http://www.1stwebdesigner.com Dainis Graveris

    nice inspiration – illustrator watercolor brushes and effects are getting more and more popular :)

    Dainis Graveris´s last post was… 33 High Resolution And Eye-Catching Spring Desktop Wallpapers

  • http://memawsvideoblog.com Memaw

    Ohhh these are sooooooooooo pretty!!!! (; Thank you!!!

    Memaw´s last post was… Me and my googly yahooglies are famous YAYE!!!!!

  • http://www.SohTanaka.com Soh Tanaka

    Great compilation Andrew :-)

    Soh Tanaka´s last post was… Simple Toggle with CSS & jQuery

  • http://www.backcountrygeneration.com/webdesign.html Kp

    This was a really good line. Really inspiring can’t wait for this style to pick up.

  • http://www.flickr.com/photos/danielgilles/ Tanaka13 – Créations du Net

    very nice selection! very inspirative!

    Tanaka13 – Créations du Net´s last post was… The little Red Bridge

  • http://art-to-buy.blogspot.com/ Cam

    Love the blog, great stuff.
    .-= Cam´s last blog ..10 reasons to buy art =-.

  • http://www.pvmgarage.com/en piervix

    Hey, awesome compilation. I love the watercolored websites.

    In this article on PV.M Garage I shared other nice examples…

    http://www.pvmgarage.com/en/2009/06/roundup-of-watercolor-in-web-design-25-amazing-examples-50-resources-and-tutorials/

    Thanks Andrew!
    .-= piervix´s last blog ..Cut and Paste styled websites for inspiration =-.

  • http://lazeralliance.com Marketing Club

    Thanks for the tips, you have some really cool designs, photoshop is so awesome.