[techtrucker]

Let me start by saying that am not really an artist, I'm primarily a coder that gets roped into doing web sites here and there. I'm doing a web site for a friend, and he found a template on line that he liked and forwarded it over to me. The package contained a sample index page and it's associated images...and one PSD file that has basically the whole page in one file. Looking at the html source and the included jpgs I can see that they basically carve up the psd file into numerous jpgs and plop them into tables with zero borders/spacing/padding.
Am I wrong in thinking that I should make all the changes in the psd file, save a flattened copy, and carve it up into bits that are the same size as the sample jpgs? I know I'm asking what is probably a stupid question...but in this case I am stupid. I took one stab at it but my cropping was one or two pixels off so it didn't work out.
Any tips/advice would be greatly appreciated, TIA

[m a d r a]

you don't even need to flatten the image in photoshop. if you use photoshop's guides to mark out where you want to cut up the image and then select the slice tool, you'll see a button in the toolbar along the top called 'slices from guides'. hit this and photoshop will slice up your image along those guides. now go file>save for web and you can use the slice select tool in the save for web dialogue to pick compression options for each of the slices.

after you've done that and OKed that dialogue, when the next one comes up asking you where to save the compressed images, you'll see you've got the option to save either just the images or HTML and images. if you choose the latter option [you'll prob want to tweak the HTML settings] photoshop will write out an HTML page for you with all your image slices layed out as required.

of course you'll no doubt want to get in there and tweak the output HTML a bit to remove things like huge single flat colour images and replace them with stretched 1x1 pixel versions of same etc to optimise the page, but you should find it saves a lot of time in the initial layout.

[PS all above is true with photoshop CS but i dunno how many previous versions have the same commands available, so YMMV... as they say!]

[techtrucker]

Madra,

Thank you so much for that explanation, that's exactly what I needed. Having only really used PS for phot touch ups I never looked at the slice tool. I'm going to do myself a favor and pick up a PS book at Borders today.
I should have specified my version of Photoshop, sorry, yes it is CS.
Thanks again!

Steve W

[techtrucker]

So now I'm getting a good grasp of slices but have ran into another issue. When I export out of either PS or ImageReady as HTML and Images, I get some of the slices but not all of them. The ones I don't get are badged with the no image icon. If I change that to image it comes through but converts any of the text to part of the background image.
If anyone feels like wasting a few minutes I've posted a link to the psd file below. Whoever developed this thing managed to create an example html file that works, but for the life of me I can't figure it out.
Many TIA to anyone that takes a look at it.

Steve W

http://eagle.he.net/~sjwood/072.psd