Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Colorizing the Blog Icons

It’s easy to colorize the icons in graphicPUSH’s free icon blog pack. By using non-destructive Layer Styles, we can create fast, easy and accurate colorization.

Since their initial release in December of 2004, graphicPUSH’s blog icon pack has received a very warm response from the development community. However, one question I do get over and over is why I only released them in grey. There are two reasons.

  1. Grey is a neutral color and 99% of the time fits right into a design. Sebastian Schmieg’s Blix template uses several bright colors, including blue, green and orange, so the grey icons fit perfectly in the design.
  2. Because grey is a neutral color, they can easily be colorized in Photoshop. This is what this tutorial covers.

OK, first thing first. Go the icon page and download the blog icon set if you have not already done so. The graphics are saved as transparent GIFs with no compression.

Open Photoshop, then open whichever icon you would like to start with. In the example, I will be using “speech_bubble.gif.” These files are small (only 11 pixels square), so feel free to zoom in all the way (1600%) so you can see what you are doing.

zoom in all the way to see better

Next, we need to convert the graphic to RGB color. GIFs by nature are index color, which means they don’t have new-fangled technology like variable opacity and layers. Click Image > Mode > RGB Color.

In the layers palette, you will notice you now have a “Layer 1.” Right click “Layer 1” and hit “Blending Options.” This will open up the lovely layer styling dialog that allows you to completely alter what the layer looks like without actually affecting the pixels—also known as non-destructive filtering.

While we can perform all kinds of neat shadow, highlighting and beveling tricks, today we concern ourselves with only one option: Color Overlay. Click on this (fourth from the bottom) and make sure the little checkbox on the left is checked to enable the effect.

The Color Overlay option is very simple. You have the standard blend mode dropdown, a color picker and an opacity slider. First, we need to pick a color. The default is pure red (#FF0000), which I am assuming is not what you want. Click the color chooser (the red square) and find the color that matches your website’s motif. For this example, I will use #7193BA, the dark blue on the top bar of graphicPUSH.

After you have your color, hit the blend mode dropdown and choose “Color,” the second from the bottom. “Color” tints everything below it, so your icon will now be a monotone version of that color.

choose your color and then the color option from the blend mode dropdown

If you have “Preview” checked on the right, you can immediately see the change. For some interesting tones, play with the opacity slider. If you find the colors too bright, simply drop the opacity to 50%. Also play with other blending modes. “Soft Light” will offer a much more subtle tint, while “Color Burn” creates a drastic, hard-edged look. Mixing these up might produce some interesting rollover effects down the road.

the icon after applying a color tint

Click “OK” to close the Layer Style dialog. To save the new image as a GIF, go to File > Save For Web. In the right-hand menu, choose GIF and make sure transparency is on. Since there are already so few colors, do not worry about compression or color reduction since it will not save any memory. Click “Save” and call it whatever you want. Once done, save your open file—the one with Layer Styles—as a PSD so you can come back and tweak whenever you want.

There are, of course, other ways to accomplish colorizing. For instance, apply an adjustment layer of Hue/Saturation, check the box that says “Colorize” and play with the sliders. You can get a variety of results, but it’s difficult to match a specific color since there is no way to input a direct hex number.

You can also accomplish much more interesting results just by playing with Photoshop. But for those looking for a quick colorization method, using Layer Styles is fast, easy and accurate.

commentary + criticism


wrote the following on Monday January 16, 2006

I was using the hue/sat sliders, but never thought of doing it the other way, thanks!


wrote the following on Wednesday January 17, 2007

I think that overlay blending mode does a much better job.
But nice tutorial anyway.
And thanks for the icons!