Adobe Image Ready

[Guest papacita]

Does anyone know how to make a rollover image using Adobe Image Ready? I've been trying for an hour but can't figure it out.

[Guest areacode212]

Yes. It's easy. Use a different layer for each "frame" of the rollover (it's how I did it for the links for the site). There's a little tool palette for rollovers (it's on the same thingie as the animation palette).

[Guest areacode212]

OK, I'll try and whip up a quick tutorial

[Guest areacode212]

Try this:

 

a) In Photoshop, create a new 200x100 file, black background

 

B) Using the text tool, type "Papacita" in 30 pt. Verdana. Give it a blue color

 

c) Copy the text layer (drag the layer onto the New Layer button)

 

d) Select the Papacita copy layer (it should be on top), and give it an outer glow.

 

e) Now click on the "Jump to ImageReady" button, or hit CTRL-SHIFT-M

 

f) In ImageReady, hide the copied layer (click on the eye icon on the layer palette), so that you see the original blue "Papacita", without the outer glow.

 

g) click on the Rollover tab. If you don't see it, click on Window-->Show Rollover

 

h) In the Rollover palette, click on the "New Rollover State" button (it looks just like the "New Layer" button)

 

i) You should now have two states shown. "Normal" and "Over". Now, unhide the Papacita copy layer (click on the eye icon again). The Normal state should now show the original "Papacita", and the "Over" state should show the one with the outer glow

 

j) Now go to File-->Preview In-->Internet Explorer (or whatever browser it thinks you have). It will open up a browser window with the image, and when you move your mouse over it, it should switch from the plain version to the glowing version.

 

k) Back in ImageReady, do a File-->Save Optimized As..., and save both HTML and Images. It will generate an HTML file containing the rollover code, along with both states of the Papacita images in .gif format.

 

l) That's it!!

 

BTW, ImageReady's HTML sucks ass, especially if you're doing complex rollovers in a single image. Get ready to clean up Adobe's HTML.

[Guest papacita]

It works. Thanks again.