41 thoughts on “Converting a PSD to HTML — Part 1 of 3

  1. Gabi Linko Post author

    Excellent tutorial, will certainly be passing these along!

    Reply
  2. Birdazoid Post author

    Great tutorial. I really appreciate when you explain what the pieces of the code means as well as what it does. Not enough people explain thoroughly. Tutorials should assume the viewer knows nothing and I think you did great with that. Thanks.

    Reply
  3. Jhonas Opada Post author

    Thanks dude for explaining it deeply it really help a lot like me that just starting to learn the coding.

    Hope to see more tutorials from you! tHanks………

    Reply
  4. Cloud797 Post author

    You lost me when you got into html.
    Is it normal to want to shoot yourself when you see coding?

    Reply
  5. MrWufa Post author

    how can you combine the html,css and images in one document,so that they relate to each other?I don`t get it.It`s right at the beginning.Thank you for your help!

    Reply
  6. AJax Post author

    what's the best dimension to use for the psd file? thx x

    Reply
  7. DiabetusFetus Post author

    u dont download it you save the PSD file from photoshop

    Reply
  8. Andy8422 Post author

    For the purpose of this tutorial is there any way to get this exact psd file

    Reply
  9. Shah90022 Post author

    PSD file for this tutorial is at:

    css-tricks [dot] comvideo-screencasts1-converting-a-photoshop-mockup-part-1-of-3

    Reply
  10. Mike Marc Post author

    nice one! it's really a big help for my project. keep up..I hope you're gonna post more advance and different design out there. Thanks!

    Reply
  11. Sourour Post author

    hi, from where can i downald this psd please !! thank you for the video 🙂

    Reply
  12. z0mgrugbyREUP Post author

    Changing the margin to -8px fixed it for me. Still though I don't know why I needed to do that and would like to find out why the image was starting 8 pixel down the page rather than at the very top…

    Reply
  13. Md. Raihanul Ihsan Post author

    Pls give 1 video file in all tutorials.

    Reply
  14. Zakaria Chefi Post author

    He cant do 1 video. Cause he care about seo… For now 55000 view. X 3

    Reply
  15. Rich Brooks Post author

    I may be mistaken. But, do you add a reset.css to your style routine? It makes everything start from a very basic starting point. Try it and let me know.

    Reply
  16. Юрий Пикин Post author

    Soo many mistakes… How do you teach people?!

    Reply
  17. Lewis Robert Post author

    I make $3550 from just $15 in Liberty Reserve account using this way. MAKEMONEYATHOME.COMYR.COM

    Reply
  18. sandryc leonard Post author

    the system relies on you NOT having to drive any traffic (or affiliates drive you traffic) whatsoever. Google Sniper is true autopilot income. And is now infamous for being known as the one system where you really do set something up once, and get paid forever.Everything you'll need to know is right here RNMONEAEYATHOME.HOSTEI.COM

    Reply
  19. Alona Pavlenko Post author

    I like your tutorial and layout and I want to try to do the same with my hands to have a practice. Could You, please, upload the psd file for this video?

    Reply
  20. Gentlesmith80 Post author

    WHAT is the width of the centered sections combined

    Reply
  21. Jo G Post author

    I noticed the crop tool is being used over the slice tool. Is that just so you don't have to deal with saving the slices?

    Reply
  22. ratnakar muramalla Post author

    Great Tutorial…. Thanks dude it helps me alot….!

    Reply
  23. Laith Post author

    why it doesnt work with me? WHY ????

    * {
    margin: 0;
    padding: 0;

    }

    body{
    font-size: 62.5%;
    font-family: helvatica, sans-serif;
    background: url(images/body-bg.png) repeat-x top #f4ebcb;
    }

    ul #nav {
    margin: 0 auto;
    ` background: url(images/header-bg.png) no-repeat;

    }

    Reply
  24. Laith Post author

    haha.. anyone tried to remove the height??
    it will not change the dimensions, it will make the image under the body-bg.png image.. 

    SOMETIMES HTML IS STUPID AND USELESS

    Reply
  25. Noxid The Gamer Post author

    I'm having troubles getting my header to show up in the back

    Reply
  26. Federico Vázquez Post author

    World of Warcraft icon CAN'T be missed !!! 😛

    Reply
  27. suvankar Mondal Post author

    Can i convert PSD to HTML without any coding?????? please reply me…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *