PS6 and Slices 1

[MadMango]

I've never used Slices before and the info in the Help Files is a bit confusing to me. I have an image that I want to Slice so I can place different parts of the image in different sections of a table on a website so the entire image can load faster.

Can some please explain how I can make my individual Slices seperate image files? The PS6 Help Files constantly talk about ImageReady... is this the only way to do this? I've never used used ImageReady, and would like to stay with only PS6.

 

[z35]

Hi,

I'm not sure ow to do this. I would also like to find out because I want to slice an image and make individual parts rollovers...but have it look like one connected image.

Good Luck. I hope someone responds with an answer.

 

[askIllustrator]

In ADOBE We Trust​

​

​

Fear not evil doers. Image ready is sent from adobe and is to be trusted. It can really help you focus on animated rollovers and animated gifs and such.

But for now you're fine in photoshop. Grab your slice tool and go OJ on your image. Now grab the slice select tool and adjust each slice so its just right (notice how PS renumbers the slices automatically as you make adjustments). You can use the delete key here to get rid of slices that arent needed. Now double click on the number of any slice you want to link to something. After inserting all the URLs (I recommend setting the image to none for any slices that contain no art) goto File->Save for web... Click on Output Settings to make further adjustments. You can even preview in the browser of you choice right from the Save for web... dialoge.

 

[M3Fan]

Yeah, slices rule. To clarify, they are basically a portion of your picture that has been cut up. Let's say you've designed your whole web page's top banner portion in photoshop. Everything looks perfect, and you want to do some rollovers. Choose File>Jump to Imageready. Bam! Your image is now magically opened in Imageready. Now, there are different types of slices. You can cut your own slice, or, even handier, are layer-based slices. So, let's say that you have a menu that you want to change the look of the text on a rollover; each item on the menu is its own layer.
1. Go to the Layers palette, right click on the layer that has the text that you want for the rollover.
2. In the pop up menu, choose "Create layer-based slice" (or something close to that)
3. Now, use the slice selection tool to click on that area of the picture that has the text
4. Notice towards the bottom of the screen is the rollover palette for that slice
5. The rest is pretty easy- the tutorial has a good explination of how to get your rollover states.

The layer-based slice option in PS/IR is fantastic. When you are done with all your rollovers, right click on your layers in the layers palette and make an imagemap based on the layer so that your layers are links as well. Then save optimized. It will create an images folder for you and store the slices of your image in there. Then it will create an HTML page containing a borderless table that perfectly holds your sliced image together, pointing to the Images folder. It (imageready) will also write crispy clean javascript to handle the rollovers. Very handy for the beginning web programmer. Enjoy!!!