HTML and CSS from psd

Discussion in 'HTML & Website Design' started by niladri82, Jul 10, 2007.

  1. #1
    Hello, I am a complete newbie in web designing stuff, so don't laugh at my questions.:D
    My question is how to generate the html page along with it's CSS from a .psd template? I have read many forum posts on this issue, but none of the answers helped me in this regard.
    Thanks in anticipation.
     
    niladri82, Jul 10, 2007 IP
  2. ninjamuk

    ninjamuk Peon

    Messages:
    305
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1) Slice the PSD in Photoshop and export the slices
    2) Open Dreamweaver, notepad or another HTML editor
    3) Create a page with HTML and make a stylesheet with CSS (2 seperate files)
    4) The image slices you exported from Photoshop are included via <img> tags in HTML and via "background:" declarations in CSS

    You have a long way to go yet, but you can definitely learn if you're determined. I'd recommend googling "html tutorials" and "css tutorials". After reading a few of those, you'll have the basics. Then you can tinker with the languages yourself and learn more advanced techniques from more tutorials.

    I've been doing HTML/CSS for about 7 years now and I still learn new techniques all the time so don't expect to be a CSS master in a couple weekends :)

    Hope it helps.
     
    ninjamuk, Jul 10, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Don't slice the .psd file. Just lift the layers you need to use (the actual graphics), place them into their own files and save them as separate images after cleaning them up and optimizing them for the Web.

    I strongly suggest you learn HTML and CSS. Build Your Own Web Site the Right Way With HTML and CSS by Ian Lloyd is a very good way to learn (I always advocate reading books instead of trusting online tutorials because the books are subjected to a rigorous editorial and review process before even seeing the light of day, whereas anyone can write a "tutorial" and slap it onto a Web page).
     
    Dan Schulz, Jul 10, 2007 IP
  4. xeric

    xeric Peon

    Messages:
    612
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You should know how to work with html first of all.

    I am in this web field but still i get some problems while slicing.

    Slicing is a complicate thing, but best of luck.
     
    xeric, Jul 10, 2007 IP
  5. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #5
    So do you make a new file of an each layer you want to use? Or how do you the "lifting" part?
     
    HDaddy, Jul 11, 2007 IP
  6. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    One way is to use the copy/paste method. But maybe there is a better lifting method
     
    deques, Jul 11, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yup. Just copy the layer and paste it into a new file. That's what I mean by "lifting" (like "lifting a fingerprint") a layer.
     
    Dan Schulz, Jul 11, 2007 IP