Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Please Help - How to Slice PSD Layout into working (x)HTML

    Hi, I am trying to figure out how to slice this sample PSD into working (x)HTML. I've read a ton of tutorials, but I must just not understand the overall concept. I want this to be a sort of template for other "news articles" so the overall layout is most important. I can't figure out how to get this to work. I'm especially confused with the right side news items - it is important for it to be a space where text can be inserted as it will be different text each time. If anyone can help, I'd be so grateful. Thanks!

    PSD File:
    http://eden.rutgers.edu/~jcener/slice/practice.psd

    JPG File:

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,879
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    It’s not so easy to explain the slicing process. But before you start slicing the graphics you should mark up your plain content with semantic HTML and only then you start thinking of slicing the graphics.

    For example, I usually divide my page into header, content, footer, and in the content section i put sub sections like “main” for the main (in your case left) column and “info” for the sub column (in your case that would be the narrow sidebar). And in those sub sections I put more divisions for each “sub sub section”, i. e. a div for each news entry in your case. Then you would cut out the background image for these sub sections in the sidebar once, extend it to the top (graphically) and align it to the bottom of each div (with CSS), so when there’s more content in them the dark gradient stays at the bottom and it’s extending to the top as necessary.

    Hard to explain, as I said. I hope you can image a little what I mean.

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Agreed. Learn semantic HTML first, and then the whole slicing process will make a lot more sense. I've found when I learn a skill focused on the sole purpose of accomplishing a specific task, I miss fundamentals that would actually make accomplishing that task a lot easier.

    Also, many tutorials will likely tell you to slice your PSD into a grid and use HTML tables to lay out everything. You should know that the overwhelming consensus among those who do web design is that this is an obsolete technique and a generally frowned-upon shortcut that makes many compromises in terms of usability and clean code, among other things. So resist the urge, if you should be tempted by that route, and use semantic HTML and CSS, as recommended above.
    matt | design | blog

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for the pointers. I've been going pretty well so far. I have 2 problems that I have encountered. One is slicing related while the other is probably some basic code that I forgot.

    Here is a working slice:
    http://eden.rutgers.edu/~jcener/slice/

    1) Thin slice of gradient ends before the entire section ends.

    In the header, the entire background should be a gray gradient. You can see it ends about 3/4 of the way but doesn't extend to the right. If I took a bigger (wider) slice, would this solve the problem?

    2) Sidebar Column (far right, outlined in yellow) is not in line with the Left Main Column (outlined in red)

    I have always been confused on the floats/clears, so I assume I did something wrong here. How can I make it so #main and #sidebar are aligned?

    Thanks so much!

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    1) Your header (specifically the background behind "The Black List Project") appears to have a non-linear gradient (which means you can't take a thin slice and repeat it horizontally or vertically).

    The easiest way is to slice the background of your header to the actual width/height of the gradient (appears to be approx 1200x100). If you save that as a png-8 (as opposed to a gif) it will remain small in size despite the inability to repeat a pixel.

    Another way of doing it, which is much more difficult but would save you a kilobyte or two, is to cut the left and right gradients out (approx 160x100 - hard to see how much width you need without the PSD), set up a 3-layered html container for your header, and for the innermost element (probably your h1 tag) you can set a repeat-x (1x100) of that middle gradient.
    Last edited by itsallkizza; 12-18-2008 at 08:12 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    aejacks8 (12-20-2008)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello aejacks8,
    Here's one way to get your #sidebar to come up:
    Code:
    			
    #main		{border: 1px solid red; width: 67%; float: left;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    aejacks8 (12-20-2008)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi aejacks8, have a look at http://www.bonrouge.com/2c-hf-fluid(r).php, to see how to make a good 2-column layout. (You may set a width to the #wrap in that sample layout, if you wish to make a fixed width layout)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    1) Your header (specifically the background behind "The Black List Project") appears to have a non-linear gradient (which means you can't take a thin slice and repeat it horizontally or vertically).

    The easiest way is to slice the background of your header to the actual width/height of the gradient (appears to be approx 1200x100). If you save that as a png-8 (as opposed to a gif) it will remain small in size despite the inability to repeat a pixel.

    Another way of doing it, which is much more difficult but would save you a kilobyte or two, is to cut the left and right gradients out (approx 160x100 - hard to see how much width you need without the PSD), set up a 3-layered html container for your header, and for the innermost element (probably your h1 tag) you can set a repeat-x (1x100) of that middle gradient.
    Thanks, the first suggestion worked perrrfectly!

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello aejacks8,
    Here's one way to get your #sidebar to come up:
    Code:
    			
    #main		{border: 1px solid red; width: 67%; float: left;}
    Thanks so much! Worked like a charm!!!

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Hi aejacks8, have a look at http://www.bonrouge.com/2c-hf-fluid(r).php, to see how to make a good 2-column layout. (You may set a width to the #wrap in that sample layout, if you wish to make a fixed width layout)
    Thanks for your input. I really appreciate it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •