Advice Needed On How to Convert PSD Template to HTML

4 replies
  • WEB DESIGN
  • |
Hello, does anyone have anysuggestions on how to covert a PSD Template to HTML? What tools do you use or recommend?
#advice #convert #html #needed #psd #template
  • Profile picture of the author pavondunbar
    Hi there...

    To convert a PSD to HTML, you must do the following:

    1) Use the Slice Tool in PS to slice the PSD file. Each file you slice will be saved as an image and stored in its own folder.

    2) Once you are done slicing, go to FILE-->SAVE FOR WEB AND DEVICES and save the PSD as HTML with images. Make sure you have JPG set to maximum.

    3) Open Dreamweaver or your favorite program to make the changes you need.

    4) Once you are done, upload the image folder and the new HTML file to your server.

    It seems simple but is a little complicated. If you need a tutorial, I have a 10 video tutorial on how to do it step by step.

    Let me know and I'll send it to you...free.

    Hope this helps and good luck with your endeavors.

    Pavon
    {{ DiscussionBoard.errors[775804].message }}
  • Profile picture of the author rocketsites
    Slicing and exporting the graphics from photoshop as html is probably the best and fastest way if you are a complete beginner. But it is by far not the best way to produce a good quality html template especially since it has no concept or ability to produce a "clean" template using semantically correct css, with the correct use of background images, header tags, etc. Instead it basically creates static images for eveything which is not ideal because:

    it creates more code that is necessary
    it creates images for things that dont need to be images (for example, solid background colors and text)
    does not edn itself to scalability (ie when you go to add more pages to your site)

    You will never beat hand coding of the psd template by a person experienced in css and html. My advice is to learn how to do this or go to a service that specializes in PSD to XHTML/CSS templates. Just google "psd to xhtml".
    {{ DiscussionBoard.errors[783267].message }}
  • Profile picture of the author TheCren
    That's an interesting process. Thanks, Pavon!
    {{ DiscussionBoard.errors[785171].message }}
  • Profile picture of the author thefreelancesquad
    Pavon, could you send the free video tutorials. I can't PM at this point, but contact me about the videos.

    The Freelance Squad
    {{ DiscussionBoard.errors[787682].message }}

Trending Topics