Blog: Secrets from the Chef

How to draw recolorable icons

Denis KortunovAuthor: Denis Kortunov
18 June 2009

How to draw recolorable icons What is a recolorable icon? It is a picture which is capable of changing its color, hence is the world recolorable. There are several ways of getting there. I will tell you about a simple technique that we used while developing Iconza. In essence it’s a web application that provides for changing colors of icons followed by generating the required files.

For example, we want to draw a recolorable folder. We take our favorite vector graphics editor and draw a folder.

Recolorable folder

How do we go about making this picture recolorable? The secret is that the picture contains two bitmap files: semitransparent flashes/shadows and a color backing at the bottom. So we have the color backing shine through the semitransparent mask. The mask should look like this:


How do we draw such mask? It is quite easy. You take the colored backing and put flashes and shadows on top.

Components of recolorable icon Shining mask (shown against black background for the purposes of demonstration), shading mask, and color backing

The shining mask uses only the white color with various transparencies and the shading mask — only black. The color of backing is not important — pick any color you like, it will change anyway. If you draw several icons, pick a single test color.

Why do we need shining and shading layers at the same time? We do not know what color will be selected by the user and the icon should always look good. Here, for instance, we drew just the shining layer and the user picked the white color for backing. Catastrophe! We got a flat absolutely white icon. The same story only reversed will repeat with the black color. And with shining and shading colors the result will be rather good:

Icons with backings Icons with absolutely white and black backings

It is better, of course, to select almost white (light gray) and almost black (dark dray) — the icons then will gain more volume and appear neat. But even with the extreme values we get good results.

As the shading and shining layers are located in the same file, there is a risk that your icon will appear smudgy — white overlays black giving gray, which blocks the color of backing. You have to take this into consideration while drawing to avoid the multiple layer overlays. Here is the sequence of layers of an Iconza’s icon:

Sequence of layers of an Iconza's icon
  1. Shadow from the folder’s half. The shining layers have a hole shaped as this shadow. (Color: black, 10% opacity)
  2. The lower shading volume layer. It should be higher than the backing and overlapping it. This way the outline becomes darker at the bottom. (Black, 40%)
  3. Flash on the half of the folder. (White, 40%)
  4. Shining volume layer. Edge feathering (3 pt) (White, 65%)
  5. Icon’s outline. It’s a very important thing that guarantees that any color will have an outline (Gray, 50%)
  6. Light outline around the perimeter. It makes the icon more crisp and vivid. (White, 25%)
  7. Upper shining volume layer. Coupled with the shading makes the icon lit from above. (White, 40%)
  8. Shadow from the icon. (Black, 25%)
  9. Color backing. (Any color, 100%)

If you are not completely pleased with this boring sketch, feel free to download the source in AI format.

Next step is removing the backing from the icon (placing it next to it) and bitmapping the vector file in Photoshop. We got the magic pics that the secret mechanism of Iconza glues together into a single file simply by bonding them together.

Related entries

Terms of Use

These materials can be used for any purposes with obligatory indication of the author.

Leave a comment

You can log in with your twitter or facebook accounts. After authorisation on one of this sites, you'll be able to leave comments here.

Connect with Facebook

If you have an OpenID (for example, use it to authorise.

Log in with your Turbomilk account or register a new one.