• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

Photoshop/Image Ready rollover text colour change

I have an image (.psd) file that i want to use as the main navigation for my website. On this image, are 4 or 5 text words that I want for the links. These have their own layers. I have managed to turn them into links fine, but now i want to creat rollover states for them aswell. For example, when the mouse pointer rolls over them, I want the text to change colour. When I try and change the colour in the rollover state, it changes it in the default state too...
2 Solutions
If you are just changing colors, you'll want to look at using CSS for this.

dunkjonesyAuthor Commented:
But, I'm not using CSS. I'm asking if this can be done within Photoshop/Imageready.
okay have your navbar open in adobe image ready
first you must have two layers for each rollover  eg the standard layer has what you want it to look like when it's hasn't got a mouse over (default) and the second layer with the changes named buttonname rollover  
if you havent sliced your image up do it now

open window > Slice  now name all your slices - just makes finding things easier
when your doing the rollovers  

open "window > web content" - select the "normal" mode and make sure all your rollover layer visibilities are turned off in the layer window

now select your fist button slice that you have called say "home" in the "web content window" then right click on that slice layer select "Add Rollover State" go to the "layers" window and turn the rollover visibility layer on for that button.
keep repeating till all buttons are done
than save optimised as a html.... then view in your browser and you should have cool looking rollovers
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

try this.

i have created a quick tutorial for you to have a look at.

let me know if you have any questions.

dunkjonesyAuthor Commented:
thanks people - sorry for the delay. i will try them out this week.
Name your slices. Add rollover states to each - one by one. In that rollover and NOT your original slice, go to your text layer, and select "color overlay" and pick which color you would like it to change to. You can fiddle with opacity as well for a cooler look.

Save optimized get the images and code your rollover method (you may use javascript - flash - photoshop method etc....) - there are many ways to do this.

That should do it.

no objections this has been open forever

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now