How to Build a Gorgeous Watercolor Website
plus

How to Code a Gorgeous Watercolor Website: New Premium Tutorial

Alvaro Guzman on Jan 27th 2010 with 33 comments
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


Final Preview

example

example

example

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!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.


Tags: Premium
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Alvaro Guzman

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Add Comment

Discussion 33 Comments

  1. Anthony says:
    January 27, 2010 at 2:19 pm

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

    Reply
  2. pablo says:
    January 27, 2010 at 2:33 pm

    me too

    Reply
  3. Ash Smith says:
    January 27, 2010 at 2:37 pm

    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!

    Reply
  4. Webfreak05 says:
    January 27, 2010 at 5:48 pm

    Does this plus tutorial include a screencast

    Reply
  5. Bloggerzbible says:
    January 27, 2010 at 6:19 pm

    beautiful isn’t it

    Reply
  6. neki chan says:
    January 27, 2010 at 9:09 pm

    awesome (:

    Reply
  7. Ben says:
    January 27, 2010 at 9:30 pm

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

    Reply
  8. Soner Gönül says:
    January 28, 2010 at 12:14 am

    Looks like colorful ;)

    Thanks !

    Reply
  9. Aravind says:
    January 28, 2010 at 12:48 am

    looks pretty…good

    Reply
  10. Marcin says:
    January 28, 2010 at 1:07 am

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

    Reply
  11. Robert says:
    January 28, 2010 at 2:17 am

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

    Reply
  12. Wierdthingy says:
    January 28, 2010 at 6:26 am

    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?

    Reply
  13. Jordan Walker says:
    January 28, 2010 at 7:03 am

    That is one good looking layout!

    Reply
  14. Drazen Mokic says:
    January 28, 2010 at 7:44 am

    Looks really kickass, nice!

    Reply
  15. Reggie says:
    January 28, 2010 at 8:31 am

    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.

    Reply
  16. Per Wikman says:
    January 28, 2010 at 8:34 am

    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.

    Reply
  17. David Moreen says:
    January 29, 2010 at 4:47 pm

    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!

    Reply
  18. Wajdi says:
    January 30, 2010 at 4:04 am

    thanks the tutorial is nice i will be jone

    Reply
  19. Alinoor Rahman says:
    January 31, 2010 at 8:00 am

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

    Reply
  20. Bono Calacal says:
    February 3, 2010 at 6:38 am

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

    Thanks for sharing!

    cheers

    Reply
  21. Jason says:
    February 25, 2010 at 9:23 pm

    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.

    Reply
  22. lektire says:
    March 20, 2010 at 2:25 am

    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

    Reply
  23. web tasarımı says:
    August 30, 2010 at 1:55 pm

    Thanks for tutorial..

    Reply
  24. Aero X-Ray says:
    September 1, 2010 at 2:25 am

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

    Reply
  25. mario46 says:
    January 31, 2011 at 2:00 pm

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

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.