How to slice images apart and put them back together again for rollovers.
You will notice as you move your mouse over the buttons above that each one changes color individually. This is accomplished by breaking the image apart so that you can work with each part by itself. But then you need to put them back together again on the page so that they look like one piece even though they are actually three. You accomplish this with a table. But first, let's see how I go about making the buttons for the rollover.
First I made two different pictures for each button. As you can see below, I made dark buttons for the 'off buttons' and lighter ones for the 'on buttons'.
Using the layers in Photoshop, I created one set of buttons and then duplicated the layer and adjusted the color to make it lighter for the 'on buttons'. That way they look exactly alike except for the change in color and are positioned exactly in the same place to make cutting them up as exact as possible.
Then I pull guides to exactly where I want to divide up the picture.
Making sure I've got the 'snap to guides' option turned on, I select a button.
Copy the selection and then create a new file. When you select to create a new file, it will create one that matches the size of the file you just copied.
Then go ahead and paste your file into the new window. Save and repeat the same process for each button. If you keep the same selection but turn off the layer and turn on the other layer, you will be in position to copy the other button image exactly like the first to make a perfect match.
Now, you can go to my tutorial on tables to learn how to put the pieces back together on your page.
Then go ahead and paste your file into the new window. Save and repeat the same process for each button. If you keep the same selection but turn off the layer and turn on the other layer, you will be in position to copy the other button image exactly like the first to make a perfect match.
