The Quick Way to Creating Disabled State Icon With Photoshop

For an internal demo, I had to make my own disabled and :hover states of some buttons.

In Photoshop (Elements) it was dead easy by adjusting the color in each layer.

I found that the following settings worked very well:

In Photoshop, create a new layer for each button state. Select the layer and choose “Enhance” > “Adjust Color” > “Hue/Saturation”

Disabled state background-image:

  • Saturation: -80
  • Lightness: +40


Hover state background-image:

  • Saturation: +15

You have each icon defined now with several states in the same file. Perfect for using the CSS sprites technique for showing them as background images on the buttons.

The final result:


What are your best settings for this type of task?

3 Responses to “The Quick Way to Creating Disabled State Icon With Photoshop”

  1. mr.The Says:

    Thanks! I’s realy quick and easy!

  2. Roland Says:

    Nice tutorial. Photoshop is one of my favourite graphic programs too.

  3. Kasper Says:

    Excellent tip! This makes it a snap to create disabled states from existing graphic elements.