How do you turn a one-piece .psd Template into many sliced images and Html

**chrissy** · 07-28-2004, 07:12 AM

How do you turn a one-piece .psd Template into many sliced images and Html with a place to write your text?

I import the .psd Template into Photoshop and then click on "Save for Web" and there is an option to turn it into either a .gif or a .jpg and then save as an image and as html. But it saves the whole thing as one image.

How do you properly slice the whole thing up and then have it turn the html to accomodate all the images so that people can write their text on the Template just as you would any Html Template in their html editor?

Thanks

**chaka42** · 07-28-2004, 08:08 AM

this tutorial should help out, Eyes on Design Photoshop Tutorial

it is not recommended to use the html derived from imageready however, so save only the images you have created. then create your page in html and insert the slices where they go. the main and only reason never to use the html from imageready is that it's sloppy with unneccessary code and can slow down loading time.

good luck.

**judyb** · 07-31-2004, 05:48 PM

Does a fairly simple image, say a banner, with lettering and small photo load noticeably faster for those with dial up if slices are done?

**samson** · 07-31-2004, 07:38 PM

hmm, what I do is crop up the images I need and save them.

I then start from there

**lotrgamemast** · 08-01-2004, 05:17 PM

Well PS7 comes with stuff for slicing and generating xhtml for it, Irs called Adobe ImageReady. Ive never done any layouts with PS but a mate of mine does and it works good for him.

Im not sure if slicing will make it faster as if you dont include the height and width for the extra images then the browser has to spend time working them out, all though thats more CPU spped and not BPS :P

**judyb** · 08-01-2004, 07:16 PM

I guess I'm not too sure why one uses slices. I can see why on an oddly shape object you might get the size smaller that way rather than if it was in essence enclosed in a rectangle. Also, I know if it enables you to use gif for those things it is best for and jpg for those things it is best for, presumably you could end up with faster load times. Any other uses you can see?

**marengo** · 08-19-2004, 02:53 PM

more advanced and very well written tutorial:
http://www.heathrowe.com/tuts/slices.asp

Nat

**WxChat.com** · 08-20-2004, 02:51 PM

PS Image ready is a great tool for this.. Not only is it a WYSIWYG type interface but moding the code after the TML page is created is simple and effective as well.
I use PS to create my site template then I export it into IR and slice it to my liking. Export it as HTML along with the slices and take it into Dreamweaver MX and mod it from there.

Aaron

**reli4nt** · 08-22-2004, 10:47 PM

One of the more important benefits for slicing images is because it makes it easier to change out one portion of the page without having to change the whole image. It allows you to hyper link certain portions of the page also.