If you want your image layer to have a modified rollover state, you will need to create a simple “sprite” image.
- First, create your image twice as wide as you actually want it to display.
- Then, put the rollover state of the image on the right side of the image.
It is crucial that the left and right halves of the image be exactly equal in dimensions.
After you set this double-width image as the image for a Button layer, select the second option: “split for hover/non-hover states”. This will cause ProPhoto to use the left half for the normal state, and the right half for the hover state.Remember, hover states for text layers can be added in the text layer customization area. The only time you need to create a sprite image like this is if you want an image layer to change to a different image upon rollover. The example below shows a non-hover (regular) state and a the hover state for one of the buttons used in the “Lulu & Co.” design.
To achieve this effect three separate layers were used, an image layer containing just the image of the woman, a text layer, and a sprite image containing a transparent png on the left half and a gray partial opacity layer with the arrow and line on the right half.