In a web application that I'm building, I'm going to need several disabled buttons. I already have the enabled buttons and I want to know what the best and easiest way of creating a disabled version of that button. For example, when a user clicks the login button, I want to disable the button to show that the click has been registered.

I have paint and paint .net and if I had no other option I could use a friend's photo-shop.

Here's an example of one of the buttons: alt text

Can someone tell me the quickest, easiest way to create a disabled greyscale version of a button like this?

  • 3
    What specific characteristics do you want the disabled buttons to have? Without any specifics all we can give you is what we assume you would want, such as just a grayscale of your image. – squillman Jan 14 '11 at 20:03
  • cool, that's exactly what I want, let me change the question, thusly. – Mark Rogers Jan 14 '11 at 20:10

In Photoshop it's very simple. Here are the steps (in CS5, may be slightly different for other versions):

Image -> Mode -> Grayscale


alt text

  • +1, thx for great answer. I know this sounds stupid, but could you include the directions to do this in windows 7 paint. Nobody has to pay for it and it's really primitive, which many programs are. – Mark Rogers Jan 14 '11 at 20:32
  • 1
    It can't be done simply in MS Paint, unfortunately. You'd have to recolor everything by hand using shades of grey, which would be terrible around the edges of the button since there's also no way to defringe in MS Paint. – Matthew Read Jan 14 '11 at 20:35
  • Thanks, I just tried to do it myself and had the same results. – Mark Rogers Jan 14 '11 at 20:36
  • 1
    An alternative is Paint.NET which is a great image editor that is totally free. – Aᵂᴱ Jan 17 '11 at 12:42

Control+Shift+G or clicking Adjustments -> Black And White does the same thing in Paint.NET.

  • 3
    Paint.NET can be downloaded here. – Aᵂᴱ Jan 17 '11 at 12:44

My general impression of 'disabled' looking elements is they should be more a tone (added gray giving a dulled looked) or a tint (added white) of the original than a straight desaturate. (though they should probably be desaturated too)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.