Slicing PSD into html/css

Discussion in 'HTML & Website Design' started by UCDaZ, Mar 11, 2009.

  1. #1
    I have a PSD file, does anyone have any good tutorials for slicing up the image for html/css?
     
    UCDaZ, Mar 11, 2009 IP
  2. kkobashi

    kkobashi Peon

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yeah slicing isn't one of the most talked about topics in Photoshop. There's some planning for sure.

    Basically slice things up going top, left to right into rectangular regions and attempt to minimize the cuts so they don't overlap. Use theh slice tool and zoom in/out tool to get exact. Each region is a DIV that you will float and z-index at say 1 and overlay everything else over it:

    #header {
    background-image: url(img.png);
    background-attachment: fixed;
    background-position: left top;
    float: left;
    width: 200px;
    height: 300px;
    z-index: 1;
    }

    It'll be like putting a puzzle together with CSS and DIVs. I rarely use the output that Photoshop generates and prefer to CSS and put it together myself.

    Good luck

    P.S. I see you are in Silicon Valley - me too.
     
    kkobashi, Mar 11, 2009 IP