Photoshop and webpage layouts

I was talking to a friend online and he said when he creates a webpage he makes the layout in Photoshop and slices the images into small pieces. Then pieces them together in HTML.

What is the purpose of this and are there any tutorials on it.

Thanks

[Creatures]

purpose, it's easy and simple

and it loads instead of one big picture a lot of small pictures

and to be honest i have no idea how i would do this! (except with Dreamwaver )

Creatures

TUT: EDIT

thanks creatures, i will have to check the link out when i get home as Websense is blocking it. hrmmmm

im taking a class in dreamweaver mx 2004 right now, and the book she is teaching us is for just mx. LOL

appericate it

[Creatures]

hm yes it's blocking because i just found out that it's not for this board some kind of portal site, sry

i'll get another one

Creatures

[Creatures]

ok not that colorful but it looks good to me:

http://www.arraich.com/ref/aatool_slice6.htm

Creatures

[taije]

It is actually quite simple - take the layout in Photoshop and cut it up wth the slice tool. I suggest you have the "snap to" options enabled - (if you have rollover buttons you will need to do this twice, once in the up state and once in the down state [That way the images will fit perfeclty, use the same slices])

After you have got the slices set up, save the image for the web "ctrl+shift+alt+S" - optimize each slice the same way you would for a regular image - do not mix Gifs and Jpegs when doing this however. save the images to your html folder in your root folder of your local website. Photoshop will automatically write the html for the table you are about to use and will drop the images in a folder called "images" within your html folder. if your default images folder is inthe html folder they will go there by default.

Open the html file you just created in Dreamweaver. Most likely the images will be missing when you do this - do not worry - all you have to do is adjust the path in the code.

Voila! you are ready to go!

I prefer to leave this file as is and create a template in Dreamweaver to pop it into. I do this buy copying the code into another table on the template page and then setting the editable regions. if one of your slices in the photoshop html needs to be editable (if you want to put text over it in Dreamweaver) simply set that slice as a background. be sure you are using abslute values if you do this so your table will not collapse.

Good Luck

[StayingOccupied]

the way i do it.. is slice it up in photoshop (leave no open slices) the click the Jump to Image Ready button and click the optimize tab and change the quality setting on all the sizes to get good looking pictures and low file sizes. Then save optimized as. the save as .html... then you can just open it up in GoLive and it creates teh tables and everything for you. Then go back into image ready to add your rollovers and stuff..