Adjusting Hue/Saturation

The Hue/Saturation controls allow us to make changes to the color in a very hands-on, real-time way. This feature consists of three sliders, which adjust Hue, Saturation and Lightness of pixel data. The panel looks like this:

The sliders affect your image, or parts of your image and you can see it happening as you move the controls. It's very intuitive and extremely useful. I use this feature all the time when deciding what colors I should make things, in relation to other colors that are present. Particularly towards the end of making an illustration. When I choose colors for anything in the first place, I know already that I may be adjusting the Hue/Saturation, and probably the Levels controls as well at some later point. This makes choosing colors to start with a breeze because it doesn't matter all that much. I try to make it into the ballpark, but sometimes my final colors are nowhere close to the colors I thought I wanted to start with. By experimenting with the Hue/Saturation controls you may find color combinations that are much more exciting than the ones you started out with.

I use this selectively though, usually on one color at a time. I'm not talking about changing the Hue of the whole image at once, which creates very odd results, although sometimes I will do that. More likely I'll make holistic changes with the Saturation or Lightness, or with the Levels controls. Experiment with different combinations for yourself.

Exercise 11: Changing colors using Hue/Saturation and Levels

I'll also touch on Adjustment Layers of these same sorts. Use whatever image you like, as long as you have pixels to adjust somewhere. Try it with a photo even. Hue/Saturation and Levels are great to use on photos.

First, select a Layer with pixel data on it. Open the Hue/Saturation controls with "COMMAND" + "U" on Mac, "CTRL" + "U" on PC. Or, choose "Image" > "Adjustments" > "Hue/Saturation" in the menu up top. Now, adjust the slider controls. Colors change magically before your eyes! Play around with the sliders to your satisfaction until you see what they do.

You can adjust the contents of entire layers, or choose specific elements of a Layer using the Selection tools. The Hue/Saturation controls will adjust only within selected areas if Selections are present.

I sometimes check the "Colorize" option. This turns the image monotone, with values intact. Colorize usually only makes sense to try when there's more than one color that you're adjusting at one time. I'll demonstrate this quickly on this image of Rat from our game Ratmaze hanging out with an assortment of cheeses. Note: All of these pixels are on the same layer.

The original Image	I checked the "Colorize" box. It defaults to a lightly-saturated Red like this.
I adjusted the "Hue" of the colorized version a little, and pushed "Saturation" all the way up.	I slid the Saturation all the way down. Instant Greyscale.

But what if all of the graphics are on separate Layers and you want to do this? This Hue/Saturation control is also available as an Adjustment Layer. This is really beyond the scope of this Pixel Art Tutorial, but I'll mention Adjustment Layers briefly. Let's say I wanted to change the Hue/Saturation of an image that had a lot of layers, and I wanted all of the Layers to be affected. I would add a Hue/Saturation Adjustment Layer to the top of my Layers Palette.

To do this, go to your Layers Palette (you'll have to have an image open to try this). Select the top layer, so that the new Adjustment Layer will be at the top, affecting every layer below it. Now in the main Photoshop menus, choose "Layers" > "New Adjustment Layer" > "Hue/Saturation..." (there's no keyboard shortcut for that). Before the Adjustment Layer appears, you'll get this box:

If you click "OK", this will open up the Hue/Saturation controls, and the changes you make will affect all Layers in your file. When you finish with your adjustments, the Adjustment Layer will appear in your Layers Palette. If you select the "Use Previous Layer to Create Clipping Mask" option, the Hue/Saturation Adjustment Layer will affect only the layer below it. Below is what it looks like in the Layers Palette for both options:

Will affect all Layers

Will affect only the Layer below itself

Adjustment Layers are really great and are non-destructive, meaning they only affect your Layer(s) as long as they're turned on. You can turn them off, change the opacity decreasing their effect, go back into them to make adjustment changes, choose any of the range of blending options in the Layers Palette, etc. And there are other Adjustment Layers you can choose as well, including Levels.

Adjusting Levels

Just like the Hue/Saturation controls, there are Levels adjustment controls. If you have an image open and some pixel data to manipulate, open the Levels controls with "COMMAND" + "L" on Mac, "CTRL" + "L" on PC. Or, choose "Image" > "Adjustments" > "Levels". You'll get this control panel:

Levels are my other most-used controls. In the same way the Hue/Saturation is real-time, so is Levels. See the changes right before your eyes. I usually just stick with the 3 sliders for the main "Histogram" area. Dragging the Black one will darken the darkest parts of your graphics. The White one will lighten the light areas of your graphics. The Grey slider will affect the mid-tones. I'll use the Rat & cheese image again as my example.

Original image. Rat doesn't know what he's in for.	Some increase in the lights and the darks.
Extreme dark & contrast, sliders all very close to each other.	Extreme light & contrast, sliders all met at a point.

And of course, you can make a Levels Adjustment Layer just like we did with Hue/Saturation. Choose "Layers" > "New Adjustment Layer" >" Levels..." There are other adjustment types as well, but these are the ones I use most. Some people like Curves a lot, but I like these more. Hue/Saturation and Levels together really allow great control over color. Note to Adobe: It would great to see the Levels sliders within the Hue/Saturation panel as well. It would also be great to be able to zoom in well beyond 1600%.

Exercise #12: Playing With Pixels