From PSD to HTML - Site Build over at NETTUTS

Jun 19th in Interface by Collis
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!

Author: Collis

Hello! I started PSDTUTS because years ago reading Photoshop tutorials was how I got into design. I hope the site helps and inspires others! You can find me on Twitter!

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! :-)


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. godonholiday June 19th

    great work!! get some sleep!


  2. Sean C. June 19th

    EXCELLENT!!


  3. Qbrushes June 19th

    checking it out now


  4. Ben Griffiths June 20th

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


  5. Callum Martin June 20th

    I was waiting for this!! Thanks so much!


  6. Nate June 20th

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


  7. Lamin Barrow June 20th

    Thanks.


  8. MONSTER June 20th

    Great! I will check it out.


  9. D. Carreira June 20th

    Thanks Collis!

    David Carreira


  10. FrankCrank June 20th

    :)


  11. crazyhunk June 20th

    :))

    thanx


  12. Wouter June 20th

    thank you (k)


  13. Shivanand Sharma June 20th

    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


  14. Shivanand Sharma June 20th

    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.


  15. Ariful Alam Khan June 20th

    It should be great as usual. Let me check out


  16. ZaFaR June 20th

    I was waiting for this!! Thanks so much!


  17. lll June 20th

    i dont like the lastest tutorials… those are bored!


  18. goldenthunder June 20th

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


  19. Danny June 20th

    Awesome looking forward to the read!


  20. Mark June 20th

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


  21. Ali June 20th

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


  22. Joefrey Mahusay June 20th

    Simple and clean design. Awesome as always!


  23. Andrei Constantin June 20th

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


  24. skut June 21st

    @ andrei

    yeah me too :)

    thanks for great tutorials


  25. Web Designer June 21st

    I hope i can see the tutorials..


  26. Stefan June 23rd

    Thanks!!


  27. Braden Keith June 24th

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


  28. Paul August 7th

    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.


  29. Bryan Grajales August 18th

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


  30. Bryan Grajales August 18th

    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…


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name January 8th

Arrow