Convert PSD to CSS

Discussion in 'CSS' started by g.sim, Jan 23, 2008.

  1. #1
    Does anyone know a good tutorial that can teach me this? Thanks!
     
    g.sim, Jan 23, 2008 IP
  2. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #2
    the answer is google.. first find tutorial about photoshop slicing then 2nd find tutorial about css... thats where i start...
     
    donross, Jan 23, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Wrong road. Using photoshop to build websites is like using a car's heat manifold to cook food. Slicing and dicing means you'll never really learn how to build a webpage. It's not a bunch of images pieced together! It's text and content dressed up with colours, typography and images using real CSS.

    That said, there are a gazillion tutorials for such thing floating around mostly free on teh interwebs.
     
    Stomme poes, Jan 24, 2008 IP
  4. qwertie

    qwertie Banned

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    A way you can do it (may not be the best way) is to mentally section of your psd into divs and then code it by hand. But this is time consuming and requires some html/css knowledge.

    I know its not a Photoshop tutorial, but this tutorial

    technomono.com/blog/simplyblue-web-layout-part-i/

    I think explains a good way to convert and image to xhtml/css, you might be able to use that concept on your psd..

    Remember you want all your text to be ...text, not and image.
     
    qwertie, Jan 24, 2008 IP
  5. kenbrower

    kenbrower Well-Known Member

    Messages:
    574
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    120
    #5
    So out of curiosity, should I be wary of any web design company who uses slicing for their designs?
     
    kenbrower, Jan 24, 2008 IP
  6. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Yes... Be very weary of anybody who just slices up a PSD. Might look good but just so wrong in every other way.

    Doing it properly does take time and in terms of web design/coding, most often you'll get what you pay for.
     
    webdesigner, Jan 24, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If I see a "web design" company using slices, I assume they've done it that way because they don't know how to really do it using HTML and CSS. That said, I do actually see it now and then (I can tell cause the page loads in big ugly chunks : )

    One problem with slicing is that the slices must match up pixel-perfect, which can usually be done okay in one or two browsers but is difficult for all of them.

    A second problem is that all the images together add up in filesize, making longer loading times.

    Someone on another forums posted this huge psd or whatever and asked how he could slice it. I coded it as well as possible (there was no content to speak of, which was a problem) and it looks... exactly the way he posted it, on all major browsers, and flexible width. The whole page plus css is smaller than the psd was.
    I did need to use GIMP to cut at his large image to turn pieces into bits of background etc.
    Just a better deal all around.
     
    Stomme poes, Jan 24, 2008 IP
  8. dnbox

    dnbox Peon

    Messages:
    108
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    draw and slice layout (PSD) then XHTML + CSS (dreaweaver) hehe
     
    dnbox, Jan 25, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Bleh. : )
     
    Stomme poes, Jan 25, 2008 IP
  10. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #10
    well, I think if you good at CSS or know CSS and HTML, you don't need any tutorial.
    So, I recommand you understand CSS/HTML first.
     
    EIx, Jan 25, 2008 IP