Using Photoshop to colorize an image to match your color palette

I'm not a designer. I can make may way around Photoshop, but the majority of my time in Photoshop is spent chopping up layers to convert them into images to use in my HTML & CSS. Occasionally I need to create new graphic assets or tweak the colors in an existing image.

We have a large collection of icons at work, but occasionally I need to adjust the color of an icon to better match the graphical assets where the icons will be used. My need today was to change some blue arrows to match a specific green hue.

Photoshop actually makes this very easy to do.

1. Set the foreground color to the base color you want to colorize your image to
2. Next, we need to create an Hue/Saturation "Adjustment Layer" (Layer > New Adjustment Layer > Hue/Saturation...)
3. Give your adjustment layer a name and click the "Ok" button
   
   NOTE: If you want to limit your changes to only one layer, check the "Use Previous Layer to Create Clipping Mask" option, otherwise all layers below the new adjustment layer in your Layers Panel will have the mask applied to it.
   
4. Click the "Colorize" checkbox
   
   
   
5. The "Hue" value will now match the color of your foreground color. The "Saturation" value is preset to a value that is consistent with the elements on the current screen. The "Lightness" value is preset to zero.
6. You can now tweak the settings to get the exact colorization you're looking for. Just note that playing with the Saturation and Lightness settings can start to distort the image by losing the original white and blacks in the image.

I hope this helps someone else. I figured I better finally blog this, since I always seem to forget how to do this and end up having to rediscover the process when I need to go through the process again.