PSD to HTML.

Discussion in 'HTML & Website Design' started by lolage, Jan 18, 2008.

  1. #1
    Is this effective? Because i love making templates in photoshop but people tell me to split it up into little bits and manually code it with html+css.

    Any opinions on this?
     
    lolage, Jan 18, 2008 IP
  2. SecureWebDev

    SecureWebDev Active Member

    Messages:
    677
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    80
    #2
    well personaly ive started out making layouts in photoshop that were insane but uncodable or just a pain in the a** to code. So after coding simple css and xhtml layouts i was able to create a medium between the two and think over how i am going to code the layout while designing it. So overall i keep the coding in mind when designing.

    Hope that helps - Khaled
     
    SecureWebDev, Jan 18, 2008 IP
  3. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #3
    So instead of making the design first, write the code and do the images seperaty and add them into the code?
     
    lolage, Jan 18, 2008 IP
  4. Valve-Hosting

    Valve-Hosting Peon

    Messages:
    1,071
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It depends. Sometimes I use Photoshop first as the coding isn't really a problem.
     
    Valve-Hosting, Jan 18, 2008 IP
  5. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #5
    Instead of manually coding it, can i code it with Dreamweaver?
     
    lolage, Jan 18, 2008 IP
  6. SecureWebDev

    SecureWebDev Active Member

    Messages:
    677
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    80
    #6
    no not really, i usually make sure my designs are code-able, if not flash is probably the way to go.
     
    SecureWebDev, Jan 18, 2008 IP
  7. Valve-Hosting

    Valve-Hosting Peon

    Messages:
    1,071
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Dreamweaver is manual, unless you have a version thats automated. ;)

    ps:if you do, i'll buy it.
     
    Valve-Hosting, Jan 18, 2008 IP
  8. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #8
    I've found myself a lot of the time just doing both at the same time. I'll start out creating my banner and sides of the design (top and bottom too if needed), go on to creating the buttons and other things.

    I've found that if you do the whole design in the psd, unless you know what you want it to look like and have a vision you copy a lot of layers and text around that you will never actually need to pull from the psd. Instead, you can just create your menu headers background, and do the text in CSS (unless it is some special text). Kind of hard to explain my method I suppose. But hopefully it makes sense.
     
    PHPGator, Jan 18, 2008 IP
  9. James Gober

    James Gober Guest

    Messages:
    40
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9

    I believe by automated he / she meant using it as a wysiwyg. manually coding it would be typing not click and drag.
     
    James Gober, Jan 18, 2008 IP
  10. Valve-Hosting

    Valve-Hosting Peon

    Messages:
    1,071
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Yeah, sorry I was being a smart ass, I din't mean any harm by it though ;)

    Dreamweaver is a very very powerfull tool in the right hands, in the wrong hands it's just a very heavy text editor though.
     
    Valve-Hosting, Jan 19, 2008 IP
  11. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Hand-coding and software are so different !
     
    EIx, Jan 19, 2008 IP
  12. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #12
    Is it possible to code a PSD without knowing much knowledge of html/css?

    (Using dreamweaver)
     
    lolage, Jan 20, 2008 IP
  13. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Well yes, but the site you will make will most likely SUCK.
     
    nicangeli, Jan 20, 2008 IP
  14. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #14
    Only a proxy..?
     
    lolage, Jan 20, 2008 IP
  15. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #15
    Dreamweaver is a good tool to try while learning CSS and XHTML. I usually design whatever I want in Photoshop and the think at how I should code it. After you get used to XHTML and CSS you don't need to start coding then 'drawing'.

    I'd recommend you to learn CSS and XHTML, do a lot of mini sites only in CSS and XHTML, try to learn how to work with the positioning of the elements like divs, paragraphs etc. If you can make the divs stay where you want them to, then coding isn't a problem anymore.

    Good luck!
     
    agilius, Jan 20, 2008 IP
  16. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Thats good advise, but I wouldn't worry about the X in the HTML. Just learn to code valid 4.01 HTML as we will all be reverting from xHTML to HTML 5 soon enough.

    Nick
     
    nicangeli, Jan 20, 2008 IP
  17. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #17
    I simply like to call it XHTML. I think it's cooler :p I don't see any difference between the two anyway.. only a few declarations are changed :p
     
    agilius, Jan 20, 2008 IP
  18. SalahStudios.com

    SalahStudios.com Well-Known Member

    Messages:
    169
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #18
    i try to design whatever i'm inspired to do and then just learn what i have to if its tricky turining it into light css
     
    SalahStudios.com, Jan 20, 2008 IP
  19. papaman

    papaman Well-Known Member

    Messages:
    240
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #19
    the best way to convert a PSD to HTML is to slice the PSD to small pieces and then custom code the xHTML and CSS files.

    We provide that kind of service so you might want to follow the link on my sig or PM me.
     
    papaman, Jan 20, 2008 IP
  20. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #20
    i can code any PSD designs into css tableless... im an old school coder .... i use notepad when coding... and of course photoshop for slicing ... i never used dreamweaver coz i think it'll make me dumb and lazy ... its cool when you memorize all css tags property ... since its hard for notepad to trace your error but it will make you a strict and neat coder once you get used to it ...
     
    donross, Jan 21, 2008 IP