View Full Version : Slicing Question

02-04-2010, 01:29 AM
I really don't understand how you are supposed to go about slicing a PSD to prep it for coding. When it comes to things such as navigation bar slicing, backgrounds, etc. I really get confused. The example I am currently working with is: http://tinypic.com/view.php?pic=2ij3r6q&s=6

Code is something that is straight forward... I can look at a book and find things I need, but slicing has given me the most trouble. For example, How do I capture the background of this PSD? Do I remove ALL text besides the navigation and then cut it up in parts, and then just arrange the text in my XHTML/CSS code later?

Thanks for the help!

02-04-2010, 04:11 AM
What would be really cool would be to see the source PSD to know how the layers are arranged. I suppose you have that gradient background (the brownish color) on a layer and the “abstract” graphic on another one?

First you would export a one pixel wide strip of the brown gradient. You could make a slice (one pixel wide) at the right side, where nothing is in the way of the background from the top down until the end of the gradient is reached (i. e. where the color stays what it is). This would be the “back-background” that repeats horizontally across the top.

You would then hide all layers except the one that has the abstract background graphic (you can even leave the gradient layer visible). Then you export that image. This would eventually be layered over the “back-background” in the HTML document. For example the 1px gradient image could be applied to the <html> element (repeat-x and background color set to the color of the bottommost pixel of the gradient (i. e. gradient end color)) and the abstract graphic can be applied to the <body> element.

Next, you export a 22 image with that semi-transparent layer which you use for the navigation background (repeating bg). This wouldn’t quite work in IE 6 which doesn’t support alpha transparency natively but there are workarounds. In all other browsers this is no problem.

And that’s it for this one. The rest looks like solid colors.

02-04-2010, 05:29 AM
Can't find the PSD to that one... but I think I see what you're saying.