PSD to HTML

Discussion in 'HTML & Website Design' started by om39a, Apr 24, 2011.

  1. #1
    Hi, Greetings

    How to convert a psd to HTML. Do we have any automated tools for doing it? Is there any specific editor which I can use to do this? How long will it take to convert a psd to html?
     
    om39a, Apr 24, 2011 IP
  2. shackz

    shackz Active Member

    Messages:
    264
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Automated Tools sucks a lot when it comes to converting a PSD to a clean working HTML. Best way to do so is using Photoshop and doing it by hand. If you not contain the needed know-how to do so, there are a lot of tutorials out there. Just ask Mrs. Google ("psd to html howto"). Here´s a quick starter for you:

    http://dzineblog.com/2009/04/tutorials-psd-to-html.html

    good luck to you.
     
    shackz, Apr 24, 2011 IP
  3. prince11

    prince11 Banned

    Messages:
    169
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    35
    #3
    the best is to use photoshop :)
     
    prince11, Apr 24, 2011 IP
    unclevyom12 likes this.
  4. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    To use photoshop? But I suppose photoshop is only for making designs right. How to convert psd inot HTML with links? If it is possible in ps then can you please tell me how to do it.
     
    om39a, Apr 24, 2011 IP
  5. dakshhmehta

    dakshhmehta Active Member

    Messages:
    220
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    85
    #5
    Hello,

    Actually, the Photoshop is only used to slice up the psd into different part. however, to make it fully function, you have to use CSS, and XHTML by your own hand.

    In case if you need for your project/client, just to inform you that, there are lot's of freelancers who are willing to convert your PSD into valid Xhtml/css for $15-50 bucks depending on freelancer.

    Personally, i do for $20.

    Thank you,
    Daksh
     
    dakshhmehta, Apr 24, 2011 IP
  6. MH-Stefan

    MH-Stefan Active Member

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #6
    Slice the PSD and manually write an HTML file using the sliced images. All automated tools will deliver you a bloated HTML code that isn't SEO-friendly and non-compliant to the W3C standards.
     
    MH-Stefan, Apr 24, 2011 IP
  7. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    SEO-friendly ==> Wat dose this term actually mean? Any thing related to search engine ranking? If we use this tools we wont get search engine ranking?
     
    om39a, Apr 24, 2011 IP
  8. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I found this in google. We can use PhotoShop CS3 to convert PSD to HTML using "Save/Export for web". I am not sure How efficient it will be.

    Have any one tried it?
     
    om39a, Apr 24, 2011 IP
  9. MH-Stefan

    MH-Stefan Active Member

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #9
    It means that an automatic tool usually generates a layout with tables, deprecated HTML elements, tons of images, etc. Search engines don't like this at all. Your site will list on search engines, but with a much lower ranking than an optimized site that fully complies to the W3C standards. If you're not experienced in this field you should hire a professional for around $30-$50. The investment may be worth it.
     
    MH-Stefan, Apr 25, 2011 IP
  10. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I found this tool. "Divine" plugin for PS. It looks prety decent for me. Any comments on that tool from professional designers??
     
    om39a, Apr 27, 2011 IP
  11. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #11
    Tools only make things worse when it comes to automated PSD to XHTML.
     
    radiant_luv, Apr 28, 2011 IP
  12. Straight234

    Straight234 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Use photoshop slices. Its not automatic at all but is a good way
     
    Straight234, Apr 28, 2011 IP
  13. NeVerTrYFoRME

    NeVerTrYFoRME Peon

    Messages:
    133
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Make slicing as per your ease to maintain in HTML. Then export as HTML.

    Consider Photoshop or Fireworks.
     
    NeVerTrYFoRME, Apr 28, 2011 IP
  14. djdestruction

    djdestruction Peon

    Messages:
    863
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Slices are the best way to go
     
    djdestruction, Apr 29, 2011 IP
  15. maybaby

    maybaby Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I do it manually... I sketch up how the pieces will work on the site, slice them on photoshop and then build the html.

    Automated tools tend to convert things into tables, they slow down your site
     
    maybaby, Apr 29, 2011 IP
  16. ken.sweet

    ken.sweet Active Member

    Messages:
    683
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    93
    #16
    Automated tools may not give the desired output correctly. It is best to use Photoshop to slice images and then any html editor like Dreamweaver, notepad++ or html kit to convert it to html. Usually it takes only 1hour for me to convert psd to html. For beginners it may take 3hours.
     
    ken.sweet, May 1, 2011 IP
  17. johny321

    johny321 Member

    Messages:
    293
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #17
    I have never done this but i have a little idea to slice it in photo impact or photo shop tool then combine it in dream weaver.
     
    johny321, May 1, 2011 IP
  18. markup

    markup Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I do not recommended to use conversion tool for this process. You can use hand-coded method to convert your psd to valid HTML

    These are the some of drawbacks if you use conversion software
    (a) lack of accuracy of the code. you can not get pixel perfect HTML for complex designs
    (2) software can not count the Aesthetical value of your psd design. It can not guarantee when you use the conversion software
    (3) When changes come, you can nor use it, You have to know manual way properly
    (4) You can not generate SEO friendly code
    (5) You can not use CSS framework
    (6) You can not generate semantic code
    (7) Optimization of the code is difficult task with machine generated code

    This is why hand coding is best because you have full control
     
    markup, May 1, 2011 IP
  19. aguswgs

    aguswgs Peon

    Messages:
    93
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    You can use photoshop slices
     
    aguswgs, May 2, 2011 IP
  20. Oxyden

    Oxyden Greenhorn

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #20
    You have to know how to design somewhat alongside being obviously able to code well in HTML and CSS. Then you'll need to manually slice all of the layers of the PSD and then export them as your various formats and then re-construct the layout in a HTML page, this is why you need programmer experience so you know where to slice each section to make it easier for the coding side.

    Once you've done all of that for more complicated layouts you may need to create new images to make the layout look flush and perfect.

    With fluid templates things get even harder because you have to slice many of the sections to repeat elegantly. You'd be better of paying someone if you were trying to use the layout on a professional site and then ask the person who is coding the layout for you to watch over some form of screen sharing service, I've done this before and would be willing to again for you if you're interested.
     
    Oxyden, May 2, 2011 IP