Creating a rollover, need to figure out the best way to do it.

DM
Posted By
dave milbut
Jul 13, 2003
Views
270
Replies
1
Status
Closed
use image ready. create a layer for each rollover state. open the rollover palette. turn layers on and of while adding rollover states like mouseover mouseout click etc. also see the help file and manual. i don’t really use this feature, but it’s pretty easy to figure out…

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

DP
Daryl Pritchard
Jul 14, 2003
Hi JR,

I’ve got a pretty simple example of creating a rollover button on my website. Maybe if you browse it you’ll find something you’ve missed. You seem to have the right concept of the approach so I think you’re just missing some basic element. The example I have provided is at <http://jazzdiver.com/photoshop/rollover.htm>

For what you’re describing, you need an image of two layers, one the duplicate of the other but with the yellow highlight applied to the text. If there are other layers that add any offset effects and such, be sure they are all linked together. Make one rollover state (normal) for the image layer that doesn’t have the highlighting, while hiding the other. Then reverse that, hiding the non-highlighted layer and revealing the highlighted one, and create another rollover state (mouseover).

As for the JPEG question, I think that should work just fine and can’t think of anything special you need to accomplish it. If you’re trying to avoid using multiple images, that may be your pitfall. Ultimately, each rollover state will have a single image created for it. Using layers in a parent image just facilitates that process, turning on/off the layers that you want saved as the web image for a particular state, be it in GIF or JPEG format. The advantage of GIF is the ability to maintain transparency and thus have less concern for your background and any creating ragged-looking edges of your image, otherwise caused by the aliased edges of an opaque image format such as JPEG.

Hope that helps,

Daryl

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections