#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2006
    Location
    New York
    Posts
    3
    Rep Power
    0

    Changing a .PSD into HTML?


    How do you change a .psd file into HTML?

    I'm kind of new to this, if anyone would be kind enough to assist me it would be great! Contacting me via email would be best(stormi2ider@yahoo.com). Thanks!
  2. #2
  3. from the lab...
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2004
    Location
    the land of wind and ghosts
    Posts
    1,844
    Rep Power
    560
    do you mean creating a page layout in photoshop, and then using the 'save for web' feature to create the HTML?

    There are many tutorials out there about this...check out pixel2life for starters.

    Hope that's what you're after.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2006
    Location
    New York
    Posts
    3
    Rep Power
    0
    um not sure... i have to slice up the .psd file into smaller pieces and then convert into an html. have any clue?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Manchester, UK
    Posts
    129
    Rep Power
    16
    Originally Posted by stormi2ider
    um not sure... i have to slice up the .psd file into smaller pieces and then convert into an html. have any clue?
    If you want to do it that way, just use the slice tool (the icons is represented with an artists blade, shortcut is 'K' in windows), then File > Save for Web > Save > Select "Save as type" dropdown box > HTML and Images.

    Et voila, you have your HTML and your images. Personally, I like using guides, and exporting images individually. The only thing is, for mass amounts of "white space", ensure that you remove the blank images from the HTML after it's been generated
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    united
    Posts
    1
    Rep Power
    0
    I am also trying to convert PSD to HTML for two days. I have tried many solutions but failed. Hopefully, posting here can sort out my problem upto a greater extent.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    new york
    Posts
    10
    Rep Power
    0
    you can do that with a little understanding of Dreamweaver and you just need to slice your psd and just using div you can make html page.
  12. #7
  13. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    620
    Photoshop's native save for web capability will work but I personally use a plug in called sitegrinder. It is much more robust than save for web, is well documented and has a free trial. This plug-in saves me about 6 hours of css/html coding per website. I don't have any interest in the company, I am just a consumer who uses it and genuinely recommend the product.
    */
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    You can use tools to generate HTML (and CSS) for you, if you don't mind shoddy markup, that is. I recommend you learn to write your own code or partner with a front-end developer to take on the task of writing the code.

    Here are some videos that show some of the techniques for converting a PSD to HTML and CSS:
    http://css-tricks.com/video-screenca...ss-conversion/
    here's another that's a little older:
    http://css-tricks.com/video-screenca...p-part-1-of-3/
    http://css-tricks.com/video-screenca...p-part-2-of-3/
    http://css-tricks.com/video-screenca...p-part-3-of-3/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0
    Originally Posted by Kravvitz
    You can use tools to generate HTML (and CSS) for you, if you don't mind shoddy markup, that is. I recommend you learn to write your own code or partner with a front-end developer to take on the task of writing the code.

    Here are some videos that show some of the techniques for converting a PSD to HTML and CSS...
    Thanks for the interesting links.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    There are many tutorials out there about this...check out pixel2life for starters.

IMN logo majestic logo threadwatch logo seochat tools logo