Slicing layout in photoshop

Discussion in 'Web Design and Development' started by mikepro44, Oct 31, 2008.

  1. mikepro44 macrumors member

    Joined:
    May 18, 2008
    #1
    Made up a tentative layout, still needs lots of work..

    Wondering if anyone has tips on slicing it in photoshop, basically I want to make the page dynamic so it expands with content...

    [​IMG]
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    I agree, so this is just some personal insight into the OP's request.

    Folks here know I am a proponent of a liquid layout, mostly in headers and footers and only when sensible. I often slice using Adobe PS, and here is what I've learned, hope it helps the OP:

    Let's say I've created a header that has a logo on the left, words in the middle and a couple of merged images on the right, with a uniform gradient top to bottom as the background all the way across mostly visible around the edges of the other images and highly visible under the words of course.

    When designing the image I make sure I have some space between, say, the end of the words and the start of the merged images on the right. This is to imply 20 pixels across and whatever height, just showing the gradient, so if I "stretched it out" it would not matter. This area will be my "dynamic" slice. The logo will be another slice, and the merged graphics on the right the third and final slice.

    In Adobe, you use the Slice tool to create the slices, right click on any slice (or use the slice select tool and click) and set the "dynamic" slice type to be "No Image". Name it something like "slice_dynamic" so you can easily identify it when exporting slices to HTML.

    To export, File -> Save for Web -> Save

    Change "settings" to "Other" in the save dialog
    In the dialog that pops up select "Custom" settings in the top pulldown
    Select "Slices" in the next pulldown
    For "Sliced Output" be sure to select "Generate CSS" Referenced by "ID"

    This generates XHMTL with CSS styles, no need to worry with pixel shims or spacer images when you save using HTML. But if you do, edit the HTML cell holding the dynamic image slice to use the image as a background and set width and/or height to 100% only for that cell. In the CSS version, edit the associated ID using background-image: url('whatever.gif'); without any width or height settings and the most appropriate styles, such as "background-repeat: repeat-x" or whatever works for you.

    Not all versions of Adobe are the same, but you get the idea. Consult your Adobe help index for further assistance using your version.

    -jim
     
  4. mikepro44 thread starter macrumors member

    Joined:
    May 18, 2008
    #4
    k so

    [​IMG]


    I made a new layout, any tips on slicing it up, i think the code is easy enough..

    just have no idea how to slice it for html :confused:
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    It default slices to HTML, I just don't recommend it as the first choice. But I did supply help if you opt to do that.

    I've nothing to add beyond that and it applies to any layout you could conjure up. Angelwatt also supplied very helpful links as well for a generic tutorial. Have fun and start slicing!
     

Share This Page