Buttons rollover images

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.wp38_buttons split for hoverRemember, 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.wp38_hover demo

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.

A text layer that stays the same for both states

A text layer that stays the same for both states

Image layer applied to both states

Image layer applied to both states

A sprite image used to create a rollover effect

A sprite image used to create a rollover effect


If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us