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

PSD to html??? huh

Discussion in 'General Programming Chat' started by jake454, Jul 12, 2012.

  1. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    I was asked to turn a PSD(photoshop) sales page into html? does this mean I just take the pictures and turn it into basic html or do I need to recreate everything?
     
  2. devil157

    devil157 Registered Member

    Joined:
    Jul 3, 2012
    Messages:
    84
    Likes Received:
    55
    Location:
    Netherlands
    Home Page:
    You need to slice the images in photoshop and make it in HTML & CSS
     
  3. Heisenberg_

    Heisenberg_ Junior Member

    Joined:
    May 13, 2012
    Messages:
    186
    Likes Received:
    69
    Location:
    Czekistan
    Slice it and then save for web&devices:

    [​IMG]
     
    • Thanks Thanks x 2
  4. OriginalEXE

    OriginalEXE Power Member

    Joined:
    Feb 6, 2012
    Messages:
    634
    Likes Received:
    664
    Occupation:
    WordPress developer
    Home Page:
    WRONG lol. You cant just export to web, the code will be mess.

    It is expected of you to manually create everything. Otherwise, quality will be low.
     
    • Thanks Thanks x 1
  5. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    sooo... slicing is a go or no? and if I manually htmled it would I just slice the images and call them up and position it with css?
     
    Last edited: Jul 12, 2012
  6. OriginalEXE

    OriginalEXE Power Member

    Joined:
    Feb 6, 2012
    Messages:
    634
    Likes Received:
    664
    Occupation:
    WordPress developer
    Home Page:
    Yes, crop out images and do the rest using html + css. Use css as much as you can (shadows, gradients etc.), less images = faster loading.
     
    • Thanks Thanks x 1
  7. ironiK

    ironiK Registered Member

    Joined:
    Dec 9, 2011
    Messages:
    74
    Likes Received:
    102
    Location:
    MoneyWorld
    Google and Youtube are free to use =P
     
  8. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    I went there first, I must no have searched the right terms because I found nothing...
    when I used the slice message, wordpress made the tables have space and shitty borders, other than that it was looking fine, ill try and do it myself. any suggestions?
     
  9. geist7

    geist7 Newbie

    Joined:
    May 1, 2012
    Messages:
    31
    Likes Received:
    4
    Heisenberg is right, ironik is just confused about what the slice tool and save for web and devices are used for.

    1) Slice the psd up with the slice tool.
    2) Save for web and devices, select your slices, and compress them. This does NOT create code like irionik is saying
    3) build the site using the images with css and html. try to keep file size down by not using too many images

    done!
     
    • Thanks Thanks x 1
  10. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    nvm fixed it, thank you for your help!
     
    Last edited: Jul 13, 2012
  11. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
  12. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
  13. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    lol funny enough, I do have a fair amount of css/html knowledge but there was some dumb hidden margin css, that I wasnt seeing. First time turning PSD to html though, I just made it into 12 images or so. Later I may turn all the text into html depending on loading times, etc.
     
  14. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    ah, my bad. Didn't mean any offense by it!

    One thing I like to do for each site when I'm converting PSD to HTML is save every image first and write down the name / dimensions in a little notebook. It takes a little bit of time at first but it sure is helpful when you're building the site.
     
  15. jake454

    jake454 Junior Member

    Joined:
    Jun 4, 2012
    Messages:
    145
    Likes Received:
    110
    Location:
    Canada
    I tried the image style on his website and it just does not work nicely, lol no offense taken, in reality I know crap all about css.
    I guess I will have to do it by hand, piece by piece but I do not even know how. anyone have a good tutorial on how to do this?
     
  16. xFBxx

    xFBxx BANNED BANNED

    Joined:
    Apr 20, 2012
    Messages:
    263
    Likes Received:
    530
    very useful thread, thx for the info!
     
  17. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I used lynda.com to learn, it's very useful info, organized tutorials and easy to follow. I tried looking on youtube but it's hard to find a series of good videos in a row. I found myself scavenging through a bunch of crappy vids to find that one good one. Lynda tutorials is my recomendation if you want to learn how to CSS yourself.
     
  18. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,391
    Likes Received:
    1,513
    Location:
    Proudly romanian
    You need to slice it. Period.
     
  19. hawke

    hawke Power Member

    Joined:
    Nov 14, 2008
    Messages:
    644
    Likes Received:
    534
    Location:
    Ohio
    There's a plugin for PS, its called SiteGrinder, makes it super easy, after you learn to use it... You'll still need to know some basic coding though...
     
  20. redfoxhound

    redfoxhound Newbie

    Joined:
    Sep 4, 2009
    Messages:
    6
    Likes Received:
    1
    One word... google boilerplate