WEB 2.0 layouts-Need help converting from PSD to HTML

Discussion in 'CSS' started by ICE_monky, Jun 11, 2007.

  1. #1
    I just got started on designing WEB2.0 layouts in photoshop, and now I'm in the process of trying to figure out the easiest way to convert them into html. If anyone can give me a cheaters way to do it, then kewl, if not then some tutorials would help. I have about 2 years html and about 8 months CSS knowledge. I'm currently downloading various templates and disecting the CSS from them to help me better understand CSS and div layouts. thank you in addvance for whoever is of help to me.
     
    ICE_monky, Jun 11, 2007 IP
  2. demonhale

    demonhale Peon

    Messages:
    352
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you have adobe imageready? You can cut up a photoshop flat layout to an html and css through it... or just make the template in photoshop with the layers, and export to HTML...
     
    demonhale, Jun 11, 2007 IP
  3. ninjamuk

    ninjamuk Peon

    Messages:
    305
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sounds like you're off to a great start. Once you've got a design ready, just slice and code the page. I recommend coding without the use of a 'designer view' or WYSIWYG editor. You'll get much better results this way. If you run into any problems, PM me... I've been taking PSD and PNG to HTML and CSS for years.
     
    ninjamuk, Jun 11, 2007 IP
  4. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I have just about the entire photoshop suite. how do I transfer into the IR and everything?
     
    ICE_monky, Jun 11, 2007 IP
  5. demonhale

    demonhale Peon

    Messages:
    352
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Just save the PSD, open in image ready, I think theres a menu link is PS that automatically opens the image to IR...
     
    demonhale, Jun 11, 2007 IP
  6. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm sorry, I said my last reply wrong. I know how to switch between PS and IR, I'm just trying to code the page with DIV layers and define everything thru CSS. I'm trying to stay away from slicing the whole thing into a table. and demonhale, what did you mean by this "You can cut up a photoshop flat layout to an html and css through it... or just make the template in photoshop with the layers, and export to HTML"
     
    ICE_monky, Jun 12, 2007 IP
  7. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It would take a lot of putzing around. I could code it for you for some money and help explain exactly what it is doing.
     
    LeetPCUser, Jun 12, 2007 IP
  8. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    First of all, you don't need imageready for slicing, it work in PS aswell.
    Second, you can't slice if you want to code it with divs and css and all that.. it will make tables of it.
    So just learn CSS, it's your best shot imo. (assuming you know html already)
     
    Mooseman, Jun 12, 2007 IP
  9. demonhale

    demonhale Peon

    Messages:
    352
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yeah as mooseman said and as I already said you can use either PS or export to IR... You can use the generated table codes and easily replace them with div containers, as long as you know some CSS... it would require some work on your part, and this is a good time to practice it...
     
    demonhale, Jun 12, 2007 IP