Try Tuts+ Premium, Get Cash Back!

From PSD to HTML – Site Build over at NETTUTS

on Jun 19th 2008 with 38 comments

As many of you will remember some weeks ago we posted a PLUS members tutorial here called Designing a Family of Websites and promised an upcoming PSD->HTML tutorial on it. Well I’m happy to say, that after a 10 hour marathon, the tutorial is ready!

From Psdtuts+ to NETTUTS

The tutorial called From PSD to HTML – Building a Set of Website Designs Step by Step is the longest tutorial we’ve published over at NETTUTS and in my completely biased opinion (I wrote it) is pretty good!

You can of course still get access to the PSD part of the tutorial which comes with 4 layered Photoshop files as well as a tutorial on designing websites via our Psdtuts+ Plus membership. But even without the tutorial will still make sense and you can follow it from beginning to end with no issues.

This is actually our second cross over tutorial, the first one being a much simpler site build. You can start the trail on that one by reading Create a Sleek High-End Web Design from Scratch.

For my next trick I’m planning a tutorial that spans VECTORTUTS, Psdtuts+ & NETTUTS … though who knows how long that one will take me! :-)

 
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.

Hello! I started Psdtuts+ because years ago reading Photoshop tutorials was how I got into design. You can find me on Twitter or on my blog theNetsetter.  

Plus Premium
 
 
  • godonholiday

    great work!! get some sleep!

  • Sean C.

    EXCELLENT!!

  • http://qbrushes.com Qbrushes

    checking it out now

  • http://www.ben-griffiths.com Ben Griffiths

    This article looks great, gonna have a thorough read tonite :)

  • Callum Martin

    I was waiting for this!! Thanks so much!

  • http://www.ndezigns.com Nate

    Dude, this is sweet. LOL I sound like a surfer.

  • http://laminbarrow.com Lamin Barrow

    Thanks.

  • http://designographic.com MONSTER

    Great! I will check it out.

  • http://davidcarreira.com D. Carreira

    Thanks Collis!

    David Carreira

  • http://frnkcrnk.cgsociety.org/gallery/ FrankCrank

    :)

  • crazyhunk

    :))

    thanx

  • http://www.designwouter.be Wouter

    thank you (k)

  • http://binaryturf.com Shivanand Sharma

    Great Stuff. I knew how difficult it could be to write, edit, review, add pics.. etc and then finally publish a post. And I realized it only after I did one myself.

    The tutorial is great and exactly the kind I was looking for. Could you write a post of the phases of website design? Perhaps like creating a comp then… and finally testing and release. How does it all work in the business?

    Many thanks for this post.

    Regards

  • http://binaryturf.com Shivanand Sharma

    Sorry for a second one… but I think it would work better if split in 2-3 posts. I too have flagged it for a full read tonite. Not the one you can rush through.

  • Ariful Alam Khan

    It should be great as usual. Let me check out

  • ZaFaR

    I was waiting for this!! Thanks so much!

  • lll

    i dont like the lastest tutorials… those are bored!

  • http://www.goldenthunder.com goldenthunder

    sweet – can’t wait to take a look at it!

  • http://pickysurfer.com Danny

    Awesome looking forward to the read!

  • http://www.logandesigns.co.uk Mark

    Nice work. Looking forward to getting enough time to read through it all!

  • Ali

    Great! I actually liked the final result of it, looked fairly nice, Im truley going to be getting Premium membership, this tutorial site by far is much better then the rest :], I just hope to see more advanced tutorials..

  • http://inspirationup.com Joefrey Mahusay

    Simple and clean design. Awesome as always!

  • http://im.mindtripping.net Andrei Constantin

    I was expected to see your technique of cutting the layout, was interesting to see that covered.

  • skut

    @ andrei

    yeah me too :)

    thanks for great tutorials

  • http://www.jonathansace.com Web Designer

    I hope i can see the tutorials..

  • http://shockmotion.de Stefan

    Thanks!!

  • http://www.bradenkeith.com Braden Keith

    I went through this and it was awesome. Thanks, very helpful I”ve been wondering about this for a while.

  • Paul

    Another great little snippet from the above link -

    http://www.wpdfd.com/editorial/basics/mypage9.html

    Helps understand positioning very well, hope you dont mind Collis, I think that this tutorial and these links go very well together.

    If its not allowed, please feel free to delete.

  • Bryan Grajales

    OMG THATS BEUTIFUL, I WISH THERES A TUTORIAL WITHOUT SIGNING UP!!

  • Bryan Grajales

    Ohh and We’re still waiting for your tutorial that spans VECTORTUTS, PSDTUTS & NETTUTS …

    I think its enough No?

    Just tell us when it is going to be posted!

    Ohh and i just want you to make sure that people wont be interested to see it if you need to pay to see a tutorial!

    That makes the site looks MmM…

  • tycoo choti

    I was looking for this type of tutorial. Thanks

  • chandan Kapoor

    You are Grrrrrrrrrrrrrrreeeeaaaaaaaaaaatttte!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • chandan Kapoor

    You R awesome!!!! :)

  • john mcleod

    Yeah awsome untill you made loads of the tutorials private!!

  • Yoshi
  • http://inprogress Luke

    Great tutorial, still in progress right now on my dual screen setup (one solely dedicated to video tuts from envato network :D). Thanks for the hard work, very informative tutorial.

  • Ross

    Broken Link – “From PSD to HTML – Building a Set of Website Designs Step by Step”

  • http://porzila.com Yasin308

    Thank u
    Training was very useful