easiest way to make rollover icons in imageready

Somebody want to explain how to do this?

I just want a simple, paragraph tutorial. I'll figure the rest out for myself. I understand the rollover pallete but not the slicing that's involved (not even sure if there is any involved) or the [button next to slice in imageready - forget what its called]. Is it best to make all of the icons as seperate shapes in photoshop? Or can you get by without doing so? Little explanation would be wonderful, thanks.

tom

Slicing is a way to take a larger image and break it up into smaller and more usable images, doesnt matter whether its for a roll-over or not. Basically, eg, if you have a larger image with 4 buttons on it, you can create individual slices for each of the buttons, give them their own properties (maybe you want them gifs, eg.) and when you save for web you will see an intact image, but the buttons are their own images.
Now with the rollover pallet, you can choose different states, depending on the cursor/link status. I would recommend using the show/hide layer function to show/hide the appropriate roll over state. So maybe you have a layer folder called "buttons". Within that you have designed 2 states for each button - Over and normal. Now show or hide which state you want. That way you dont get any anomilies (sp?), like shifting, on the rollover state. The button is the same slice.

What if my buttons are not rectangular? How should I slice the image for rollovers if this is the case? It seems to me that the image map tool (P) might work but I'm not sure exaclty what for or how I would use it. Help appreciated.

tom

Images cannot be anything but square/rectangle - same goes for slices. You can use image mapping to set coordinates for where the "hot" are is on the link. But your image will still be square.

Think of your screen as x-y coordinates (z-indexing in CSS makes it 3-d in the sense of layers.) but you are only looking at one section of the x-y coordinate. Your upper left corner in 0, 0. So Top and left are defined as 0. If your resolution was 800 x 600, your bottom rigth corner would be 800, 600. eg. Now when you are plotting image maps, its easiest to do it in an IDE or WYSIWYG program, but you can do it by hand by mapping on paper. I would draw the dimensions on your paper, of the image, and it 's relationship to it's place on the screen, then figure out apporximately where the mapping would be.

eg.

If you had a 100 x 100 px image, you would know that 50 px would be half the width. so 0 -50, then 50-100 would split the image in half, as long as this was in the upper left corner you would know that you could create two image areas with these coordinates.

I hope this makes sense. It is easy to show, but maybe difficult to explain. Someone else may know how to explain this better.

**** edit ****
I realised I didnt make that very clear:

You would need to apply the coordinates for each plot, so if you are making a square/rect. image map = 4 coordinates. Also I was confusing layer positioning and image map positioning. In Image Mapping you mark the coordinates from upper left corner based on the image and not the screen. Hope that makes it clearer.

There are also 3 types - Rect, Round (or circle?), and Poly.

You should look up the precise wording because I cant recall it from memory.