How to Build a Gorgeous Watercolor Website
plus

How to Code a Gorgeous Watercolor Website: New Premium Tutorial

Download Source Files

This tutorial is a useful guide for both expert and noob designers/developers who wants to learn more about how to convert complex designs to standards-compliant websites. We’ll learn the basics of slicing a PSD design, how to convert it into a 100% functional HTML+CSS+JavaScript mockup, and more. Help give back to Nettuts+, and join Premium!

Final Preview

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!


Tags: Premium
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://design-fury.com/portfolios/ Anthony

    Isn’t this a repeat? I’m sure I have seen this before, but I can’t remember where…

    • Josh

      I think they had the tutorial on PSDtuts, on how to design a watercolor website.

    • http://www.jeffrey-way.com Jeffrey Way

      There was a PSD design tutorial on Psdtuts+. Is that what you’re thinking of? This one is about the coding process.

    • http://www.techmadly.com Nitesh Patel @techmadly

      NO way man this is Unique and it is coding tute .
      amazing tute …

  • pablo

    me too

  • Ash Smith

    Just wet myself with joy. Days like this make me glad I’m a plus subscriber! Been dying to redesign my site with some sort of watercolor effect, definitely going to read this!

    • http://laranz.com lawrence77

      all the best!!

      @jeff Running time of this tut?

  • Webfreak05

    Does this plus tutorial include a screencast

    • http://laranz.com lawrence77

      no :(

      But it written well ;)

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    beautiful isn’t it

  • http://www.belajarbersama-neki.blogspot.com/ neki chan

    awesome (:

  • Ben

    Thanks guys been waiting for something like this, you have a new subscriber!

  • http://sonergonul.com Soner Gönül

    Looks like colorful ;)

    Thanks !

  • http://www.aravindtemplates.com Aravind

    looks pretty…good

  • http://parenting.pl Marcin

    I tried to download the tutorial, but everytime the server disconnects after about 10 MB – are you sure the file was uploaded correctly?

    • http://laranz.com lawrence77

      I already finish downloading, maybe its right!

  • http://www.builditdigital.com Robert

    Very cool – love it!! Beyond my skills though.

  • Wierdthingy

    hmm… this is wierd this tut was on psdtuts+ and it was free and now here we have a same plus tut why is that?

    • http://www.jeffrey-way.com Jeffrey Way

      Psdtuts = Design. Nettuts = Coding the design.

  • http://www.jordanwalker.net/index.php Jordan Walker

    That is one good looking layout!

  • http://www.newarts.at Drazen Mokic

    Looks really kickass, nice!

  • Reggie

    This is a repeat, you can find the same tutorial at psdtuts and he fully goes over it…. just type in watercolor in search, scroll down and bam right there.

    • http://www.jeffrey-way.com Jeffrey Way

      That’s about designing the PSD. This is about writing the code.

  • Per Wikman

    I think the title is a bit confusing, I also thought this was a repeat from PSDtuts. The title should be “How to code..etc” imo.

  • http://spotdex.com/ David Moreen

    I remember seeing this from I think it was PSDTuts+, I was pondering wether or not a net tut would be done on it. It’s beautiful!

  • Wajdi

    thanks the tutorial is nice i will be jone

  • Alinoor Rahman

    As a new learner I really don’t have enough knowledge about it. But simply I can say it’s really wonderful!

  • http://www.ninjacrunch.com Bono Calacal

    Nice design. So the design is in psdtuts? I’ve got to go check it out :D

    Thanks for sharing!

    cheers

  • Jason

    Forgive the noob question but I’m pretty new to web development. In the css for this site mockup why are the #page_bg, #header, and #page_body floated to the left. I have seen other sites that do that as well. Like they will float the entire wrapper div that holds all the content. I am just trying to figure out why you would do something like that? Thanks in advance for any explanation.

  • http://www.lektira.me lektire

    hey, nice tut, also,i must say, this site have AWESOME!! design, i love it,.hmm… can i steal this design? ;)

    thanks man, keep good work

  • http://www.dekowebtasarim.com web tasarımı

    Thanks for tutorial..

  • http://www.theaero.wordpress.com Aero X-Ray

    I’ve found this tutorial in other site building tutorial web… this’s just a repetition..

  • mario46

    I can download the source file but i dont see a written tutorial about coding the site ?

  • http://www.urduit.net Asad

    great tutorial, i like it

  • http://practicaltuts.com/ Practicatuts.com

    man you are superb. i like this tutorial. its amazing.