1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to code PSD?

Discussion in 'HTML & Website Design' started by Faint, Mar 30, 2008.

  1. #1
    What is the best way to code a Photoshop file to a site?
     
    Faint, Mar 30, 2008 IP
  2. iScott

    iScott Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Slice the image then code the rest with CSS and HTML.
     
    iScott, Mar 30, 2008 IP
    Faint likes this.
  3. Skinzeeteam

    Skinzeeteam Peon

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    After you designed it, you have to plan how you are going to divide the website, slice it and save the images for web. Then you use a software like I do, Dreamweaver and you can code it or use the Design section where you code it by using the images if you dont how to code directly. Then get someone to do the CSS if you dont know hw to do it.
     
    Skinzeeteam, Mar 30, 2008 IP
    Faint likes this.
  4. ruffneck119

    ruffneck119 Active Member

    Messages:
    1,082
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    80
    #4
    Do a search for Photoshop html tutorial. You will find a lot of help that way, easy to follow stuff.

    Another way is to pay me to do it LOL :p

    -ruff
     
    ruffneck119, Mar 30, 2008 IP
    Faint likes this.
  5. Faint

    Faint Well-Known Member

    Messages:
    663
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    145
    #5
    Thanks guys. I applied rep to all of you for your help!
     
    Faint, Mar 30, 2008 IP
  6. LongHaul

    LongHaul Peon

    Messages:
    670
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #6
    As someone said, the key is to understand CSS and HTML enough (yes, divs!) to know how you need to cut up the PSD, and in what format(s) your files need to be. Then it's a matter of measuring your padding/margins around the boxes, images and text, and writing the CSS to match that.

    One great tip is to always add this first in your CSS document:

    * { padding: 0; margin: 0; }
    Code (markup):
    That sets all margins and padding for every element in the document to 0, and you can override this on an individual basis to make it match better.

    The other thing is to realize, when writing the CSS and deciding how to slice the PSD up, that some browsers (meaning MSIE ;) compute certain things differently, like auto margins and floated div space, so you have to think of ways of coding that look right everywhere.
     
    LongHaul, Mar 31, 2008 IP
    Faint likes this.
  7. digital_sc4rz

    digital_sc4rz Guest

    Messages:
    95
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I slice in Photoshop Cs3 and code in dreamweaver Cs3 :cool:
     
    digital_sc4rz, Mar 31, 2008 IP
  8. bob25

    bob25 Well-Known Member

    Messages:
    1,519
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    128
    #8
    correct me if i'm mistaken but psd files tend to be huge, people on dialups have to wait several minutes for your site to load. i just convert the finished psd to a jpeg image and save the psd in case i need to edit.
     
    bob25, Mar 31, 2008 IP
  9. mori

    mori Peon

    Messages:
    400
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    lol you cant even open a psd in your browser:p. You have to download it... Good website for photoshop tutorials is www.good-tutorials.com
     
    mori, Mar 31, 2008 IP
  10. digital_sc4rz

    digital_sc4rz Guest

    Messages:
    95
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You make your layout in .psd form then you slice it up into .jpg then you code the html/css for it for your website -- ;) You dont use the main .psd file on your website lol
     
    digital_sc4rz, Mar 31, 2008 IP
  11. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #11
    I sort of slice it up.

    With a layout, I'll slice up the menu, and other items that need to be graphical, but I'll make sure anything that can be repeated as a background, or any 'space' is just done with css to keep the size as small as possible.

    Whilst I don't really cater for dial up anymore, I still try to keep the page sizes reasonable - if and only if to keep bandwidth down..
     
    iamben, Mar 31, 2008 IP
  12. me4you

    me4you Well-Known Member

    Messages:
    1,989
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    155
    #12
    you need a software like photoshop to slice the image.

    then go w3cschools to learn the html elements. & CSS also..
     
    me4you, Mar 31, 2008 IP