From PSD to HTML
basixvideos

Converting a Design From PSD to HTML

Jeffrey Way on Dec 10th 2008 with 273 comments

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

Just like last time, I’ll take you through the process step by step – even through the tedious parts. Enjoy!

The PSD

The PSD

The 100% HTML and CSS

The PSD
Website With Markup Notes

Thanks again to Collis for allowing me to use his design for this week’s screencast. If this screencast helped you, please do us a favor and subscribe to the RSS feed, and/or leave a comment. See you next week! :)

P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.

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


 
Enjoyed this Post?

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

By Jeffrey Way

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

I'm the editor of Nettuts+, and help out on the Envato marketplaces.. I also (very infrequently) blog on my personal site. Feel free to check that out as well...if you're bored. Follow us on Twitter, and subscribe to the official Nettuts+ YouTube page if you want to live.  

Plus Premium
 
 
Add Comment

Discussion 273 Comments

Comment Page 8 of 8 1 ... 6 7 8
  1. sagar says:
    August 3, 2011 at 7:27 am

    I want more download able tutorials

    Reply
  2. waqas ali says:
    August 10, 2011 at 4:00 am

    nice post, thanks for sharing use full information….

    Reply
  3. anisur rahman says:
    August 27, 2011 at 5:15 am

    why post is not given

    Reply
  4. Q says:
    September 8, 2011 at 10:46 am

    Thanks for this tuto! Great job! :D

    Reply
  5. Sam says:
    September 22, 2011 at 9:26 am

    very nice article…thanks.

    Reply
  6. Musa Sheikh says:
    October 6, 2011 at 6:44 am

    thank uuuuuuuuuuuuuuuuuu very very much

    Reply
  7. Susan says:
    October 8, 2011 at 3:43 am

    Thanks for share tip :)

    Reply
  8. Asaduzzaman says:
    October 24, 2011 at 12:05 am

    Great tutorials. All tips is helpful. Thanks a lot.

    Reply
  9. poonam says:
    November 7, 2011 at 8:57 pm

    very nice …thanks.

    Reply
  10. a la caprice says:
    November 28, 2011 at 7:21 pm

    thank you – my first dive into this subject – great overview!

    Reply
  11. arpan says:
    December 3, 2011 at 1:59 pm

    thanks bro

    Reply
  12. mayank says:
    December 15, 2011 at 12:26 am

    nice post……very explanatory..!!!

    Reply
  13. udi says:
    January 16, 2012 at 6:59 am

    THANKS!! GREAT

    Reply
  14. Diego Ferreira says:
    January 19, 2012 at 5:30 pm

    Great tutorial J. Way,

    I enjoyed the whole 53 minutes spent watching your tutorial. Keep up the good work, and you will always have me coming back as an avid reader of your articles.

    Reply
  15. Saba says:
    February 4, 2012 at 11:35 am

    This is a really good & quite descriptive. thank u :)

    Reply
  16. the pilatesbiz says:
    February 8, 2012 at 10:40 am

    Wonderful cool. Great concept and execution. Love the popular principles you incorporated into the dexterity creation.Regards, JoshuahCheck up on my place as understandably

    Reply
Comment Page 6 of 6 1 ... 4 5 6

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.