Photoshop/Image Ready rollover text colour change

Posted on 2004-11-30
Last Modified: 2008-02-26
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...
Question by:dunkjonesy
    LVL 10

    Expert Comment

    If you are just changing colors, you'll want to look at using CSS for this.


    Author Comment

    But, I'm not using CSS. I'm asking if this can be done within Photoshop/Imageready.
    LVL 3

    Accepted Solution

    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

    Expert Comment

    try this.

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

    let me know if you have any questions.


    Author Comment

    thanks people - sorry for the delay. i will try them out this week.
    LVL 2

    Assisted Solution

    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.

    LVL 3

    Expert Comment

    no objections this has been open forever

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
    In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
    In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…
    Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now