How to Build a Gorgeous Watercolor Website
plus

How to Code a Gorgeous Watercolor Website: New Premium Tutorial

on Jan 27th 2010 with 35 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!


Tags: Premium
 
Enjoyed this Post?

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

By

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