PDA

View Full Version : Please Help - How to Slice PSD Layout into working (x)HTML



aejacks8
Dec 18th, 2008, 04:50 PM
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:
http://eden.rutgers.edu/~jcener/slice/practice.jpg

VIPStephan
Dec 18th, 2008, 04:57 PM
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 (http://boagworld.com/technology/semantic_code_what_why_how/) 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.

BoldUlysses
Dec 18th, 2008, 05:17 PM
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 (http://phrogz.net/css/WhyTablesAreBadForLayout.html), among other things. So resist the urge, if you should be tempted by that route, and use semantic HTML and CSS, as recommended above.

aejacks8
Dec 18th, 2008, 07:35 PM
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!

itsallkizza
Dec 18th, 2008, 08:10 PM
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.

Excavator
Dec 19th, 2008, 10:09 AM
Hello aejacks8,
Here's one way to get your #sidebar to come up:


#main {border: 1px solid red; width: 67%; float: left;}

abduraooft
Dec 19th, 2008, 10:40 AM
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)

aejacks8
Dec 20th, 2008, 02:03 AM
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!

aejacks8
Dec 20th, 2008, 02:03 AM
Hello aejacks8,
Here's one way to get your #sidebar to come up:


#main {border: 1px solid red; width: 67%; float: left;}

Thanks so much! Worked like a charm!!! :D

aejacks8
Dec 20th, 2008, 02:12 AM
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.