Three Minute Tip! An Easy Way to Create an Inactive-state Button in Photoshop

For today’s Three Minute Tip, we will once again take a look at a very effective technique in Photoshop that just about anyone could master.
Many sites are adorned with wonderful looking, full color button sets (look for some possible freebies in the future!). A popular and effective practice in interface design is to have a button that has multiple states (hover, inactive, down, visited, etc). These different states help the user understand how they are interacting with the interface.

One of the easiest ways to create a color state is to use an adjustment layer in Photoshop. In basically one step, you can create great looking buttons for your interface!

Let’s get it done.

Open your color button in Photoshop. It is important that your button has a transparent background; you will likely be opening a png image unless you have a layered PSD file. If you do have a layered PSD file, it would be easier to put the button layers into a layer folder.

Next, click the “Create a New Fill or Adjustment Layer” button at the bottom of the Layers Palette. This will give you a flyout menu with multiple options, some of which you may be familiar with from the Image > Adjustments menu. For this tutorial, we will select the Hue/Saturation option.

Adjust the settings in the Hue/Saturation window (the screenshot is of Photoshop CS4, but the options are very similar in other CS versions) until you are happy with the result. I’ve chosen to desaturate the button entirely, and add a bit of lightness into the button (value for saturation: -100; value for lightness: +20). These aren’t the only settings possible, of course; perhaps you only want to desaturate the button slightly, or even just add lightness? This is the place where your discretion is in play.

So your final result will look something like this if you chose the options suggested.

The Best Part is…

But wait! It gets better. There are a few perks with using this technique. Adjustment layers are non-destructive; this basically means you can always change your values later if you don’t like the result. This also means you always keep the original button underneath the adjustment layer.

Also, you can always drag adjustment layers between multiple Photoshop documents; you can even take all of your buttons and place them beneath a single adjustment layer in one Photoshop document, and voilà! You’ve created another button state for all of your buttons with just one layer. From there, all you have to do is save as a PNG with transparency, and you’re set!

We could go on, but…

There are a million things we could say about adjustment layers in Photoshop, and how effective and time saving they are; but hey, we’re trying to get this done in three minutes, right? Don’t worry, you can always come back for more FYI tips in the future. Follow use on Twitter for the latest information!