Web Design Need help with slicing the soap and salt template

Hi all,

So I downloaded the soap and salt template (its so pretty, haha), and I went ahead and edited it in photoshop...

And then I realized that I don't know how to slice it. At least, i don't know how to slice it so that index.html doesn't end up to be one HUGE table (I hate having the edit that, and I think the code is pretty messy).

So, if anyone could either give me a really good tutorial or just help me out, then that would be fantastic.

BTW, I am actually NOT done with the .psd file -- I'm waiting on my friend (for whom I am designing the site for) to send me the photos to put in the 8 boxes located in the bottom of the site. The part where I need to edit on index.html would be the left menu/navigation bar, the center body text, and the 8 boxes -- to make the images links.

Here's an image of what I need help with:


Download the .psd file here:
http://dl.dropbox.com/u/8408681/bomball.psd

 

You typically create tiny slices of areas repeated, so you aren't dependent on dimensions. Or when a sliced area should dynamically function/change.

So the left nav section (pink color) could consist of 5 slices, of which 4 for the round corners and one for the gradient effect of the mid section. The bottom end of the nav section that has a different color could then included in a div separately to create the effect.

The background decoration on the left behind the the pink column can be an image file on its own as doesn't have function and can be placed in a separate div during integration.

For the main section you can make 3 divs one for the heading/title another for the main text and finally one for the images.

Now where I mention divs you don't need slices. It's part of the template integration process with the site, but you need to understand it a bit so you won't create unnecessary slices.

Keep in mind that the final images you export from the psd is better to include the fade-out effects as it's much harder to do that with CSS/HTML.

About the fonts, servers will use a handful of standard fonts and for better content exposure consider using text for titles not images. You can approach the current font decorations to a certain degree using the basic fonts and their properties.

The section with the 8 images could be 8 divs or a table with a couple of rows at the end this can be part of the integration again and you shouldn't need to create slices there.

One other thing to check is what happens with the layout when the height of the page is long. If the template is not going to use a scroll for the content then you need to think about the ending part of the page (above the footer). On the right there is a background that needs to probably fade out and the light blue color to take over.

 

I'm not a designer but trying to implement the changes you want to this template. As you can see here I only got little success. Perhaps we can work together and follow enigma1's suggestion and see if we can put this together once your friend finished the design requirement.

 

...I'm going to try what enigma1 suggested...because I figure after four years of web design, I should probably learn how...and not just use photoshop and edit the images, haha!

Thanks, enigma1, for giving me that tutorial, and thanks, tomw, for helping me out

 

It's was me who was trying to do that but it didn't not come out right. I use your and it's not better.

 

Hey all,

Yes, I was going to do something like what CovertPea suggested, but I have the frozen yogurt image in the background on the left, and I have another little thing on the right...

So I just decided to go with the boring, typical me-photoshop-web way...so that it's one big table. :/ One day though. I'll learn. The better way. Haha

Thanks for helping though

 

Thanks, here how it looks now