1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

What is the best way to transfer a Photoshop design onto HTML?

Discussion in 'Web Design' started by ShadeDream, Feb 8, 2012.

  1. ShadeDream

    ShadeDream Elite Member

    Joined:
    Nov 27, 2008
    Messages:
    2,209
    Likes Received:
    5,230
    Location:
    He who laughs last, laughs longest.
    I've seen various tutorials online but I've always wondered how the professionals actually do this?
    How do they design sites and then put them into reality?
     
    Last edited: Feb 8, 2012
  2. buntzi

    buntzi Newbie

    Joined:
    Feb 22, 2011
    Messages:
    12
    Likes Received:
    3
    Occupation:
    Counter strike #1 PGL RO
    Location:
    Bucale
    If you saw tutorials regarding this why are you asking? They have inspiration, make template in photoshop, slice it and then convert to xhtml. You can see one at tutsplus just search the magic words on google.
    Code:
    How to Convert a PSD to XHTML
     
    • Thanks Thanks x 1
  3. endgeek

    endgeek Regular Member

    Joined:
    Jan 7, 2012
    Messages:
    245
    Likes Received:
    117
    Occupation:
    Web- & Graphicdesign
    Location:
    Germany
    Send it to me, with a few bucks :D

    You just have to slice the design (cutting into pieces) and code it with html/css .. not a big affair..
     
    • Thanks Thanks x 1
  4. zacamore

    zacamore Registered Member

    Joined:
    Nov 1, 2010
    Messages:
    53
    Likes Received:
    14
    We use the slicing tool in photoshop to cut it up then hand code the site.
     
    • Thanks Thanks x 1
  5. ShadeDream

    ShadeDream Elite Member

    Joined:
    Nov 27, 2008
    Messages:
    2,209
    Likes Received:
    5,230
    Location:
    He who laughs last, laughs longest.
    Meh, I had something slightly different in mind but I guess with time and experience it gets easier and faster. Thanks anyway.
     
  6. Malazath

    Malazath Newbie

    Joined:
    Jan 25, 2012
    Messages:
    28
    Likes Received:
    4

    You take a PSD in Photoshop or some sort of Image editing software that supports PSD files. Slice the PSD file and code it with your favorite text editor or IDE.

    The design portion is done with xHTML, Html4 or HTML5 and CSS2/CSS3. Those are the most up to date at this moment. I would even take the time to learn HTML5 + CSS3 and make sure to use JavaScript HTML5 API like html5shiv. As well learn Browser support.

    Make sure to always check your website in all browsers to make sure everyone gets the same experience.
     
    • Thanks Thanks x 1
  7. dirtbag

    dirtbag Senior Member

    Joined:
    Jul 24, 2008
    Messages:
    990
    Likes Received:
    525
    This is the way I've always done it. (Or for a long time now at least, lol) I'm pretty sure that's the standard method of designing a website layout.
     
    • Thanks Thanks x 1
  8. hawke

    hawke Power Member

    Joined:
    Nov 14, 2008
    Messages:
    644
    Likes Received:
    533
    Location:
    Ohio
    • Thanks Thanks x 1
  9. lineskier

    lineskier Newbie

    Joined:
    Jul 19, 2011
    Messages:
    40
    Likes Received:
    5
    On the internet you can find tons of free tutorials "how to slice psd to html" or "how to code psd". I was learning from net tutsplus, but there are a lot other good sites which provide you free knowledge.
     
  10. The_Cat_In_The_Hat

    The_Cat_In_The_Hat Registered Member

    Joined:
    Feb 7, 2012
    Messages:
    73
    Likes Received:
    21
    Occupation:
    Copywriter/Content
    Location:
    Nowhere man!!!
    Hmmm interesting, I have often wondered this myself...
     
  11. sommax

    sommax Junior Member

    Joined:
    Feb 11, 2012
    Messages:
    112
    Likes Received:
    27
    Occupation:
    Jackle of all Master of none...! Does that worth s
    Location:
    Nepal
    better have a look at this man...

    www dot w3schools dot com
     
    • Thanks Thanks x 1
  12. bigwhite

    bigwhite Regular Member

    Joined:
    Sep 27, 2011
    Messages:
    473
    Likes Received:
    54
    I second this. Very good resource.
     
  13. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    • Thanks Thanks x 3
  14. ShadeDream

    ShadeDream Elite Member

    Joined:
    Nov 27, 2008
    Messages:
    2,209
    Likes Received:
    5,230
    Location:
    He who laughs last, laughs longest.
    That's very true. I personally have never really liked W3Schools. Whenever I read up on anything web related I usually try to stay away from them.
     
    • Thanks Thanks x 1
  15. nativepro

    nativepro Power Member

    Joined:
    Jan 30, 2010
    Messages:
    536
    Likes Received:
    533
    Ditto what everyone else said - slice & code with css/html. I've always found it more efficient to just outsource it for around $50-$150 on Elance or Freelancer. Just search for "convert psd to html" or something like that to see current projects and prices.
     
  16. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Okay this is going to sound dumb, but by slice it up everyone just means save each image, bg, etc and write it in html -not slice up whole sections of the design, right? ><
     
  17. NeoPat

    NeoPat Power Member

    Joined:
    Oct 29, 2011
    Messages:
    641
    Likes Received:
    164
    I personally slice ir up like literally the header, footer sides, and then arrange them in dreamweaver using html/css, divs etc
     
  18. Irukichan

    Irukichan Registered Member

    Joined:
    Jan 19, 2010
    Messages:
    75
    Likes Received:
    40
    This is an old topic, but I find that building an entire layout in PS and then slicing it is extremely outdated at this point.

    With web standards as they are now, I prefer designing directly in the browser. I have a basic "boilerplate" that helps me with cross browser implementation and also a place to begin the design. It's so much easier to render typography in browser than Photoshop (which seems to be unrelenting in its hatred of type). Also, the browser makes responsive and mobile design much easier.
     
  19. Metadigs

    Metadigs Newbie

    Joined:
    Jul 5, 2012
    Messages:
    5
    Likes Received:
    1
    I used to slice the design and then puts it on Dreamweaver and used HTML.
     
  20. ugjunk

    ugjunk Jr. VIP Jr. VIP Premium Member

    Joined:
    Jan 1, 2011
    Messages:
    2,340
    Likes Received:
    721
    Location:
    Los Angeles
    Home Page:
    It's very easy. As long as you are comfortable coding with HTML, css and JS, you will find it very easy.