guide

Icon Making Howto

I've been asked to write down how I make my icons, so I'll try to put together a basic howto here, and maybe expand on it later. I'm assuming basic familiarity with the GIMP, especially layers.

Let us start with the anatomy of an icon:

LAYER A: The black and white base, pretty straightforward.

LAYER B: "Color" The color blend, usually using ''multiply'' mode, at full opacity. I almost always use a color blend here, sometimes linear, sometimes radial, usually RGB but sometimes HSV.

LAYER C: "Grain" I usually call this layer "grain" - it usually has some kind of noise. This is where most of the variation takes place. Sometimes it's several layers, sometimes I do stuff like adding noise in the color layer instead of here.

LAYER D: "Lite" Light. This one on the other hand is pretty straightforward: a radial blend from white to gray (#666666), and selecting soft light as the layer mode. This will shift light colors toward white and make darker colors more vibrant in the white areas, but make everything in the gray area more muted. Useful to emphasize part of the icon, also makes it look less flat. Very tempting to overdo it though.

Let's look at Flux Control from the Chronomancy/Flux tree as an example. These are my notes for the tree:

FLUX

flux green: 5cdd5e

color:
blend (HSV counterclockwise): 5cdd5e -- white
rgb noise (independant)
distort: value prop (black)
gaussian 2px
goo:
blend white -- black
rbg noise (correlated)
distort: value prop (black)
gaussian 2px
glow:
blend (HSV counterclockwise): 5cdd5e -- black
distort: value prop (white)
gaussian 2px

So for the first layer we start with a color blend, HSV in this case. I didn't write it here, but it's a radial blend - sometimes I have linear and radial blends for different icons in the same talent tree. HSV blends as opposed to RGB blends are a bit weird in that they're asymmetrical; whether you want clockwise or counterclockwise actually depends a bit on which direction you're blend is set up to go. If you flip your color blend direction, you also have to switch your HSV direction, while with RGB it doesn't matter.

Anyway, the next step here is independent RGB noise - it's under Filters->Noise->RGB noise. Usually I use correlated, which gives me a random scattering of black pixels, but here I used independent, which gives red, blue and green pixels instead. The filter has values for how many pixels you get, preset is .2, I usually use .3

After the noise I use a distortion filter called value propagate to make it more pronounced - this is a combo I use a lot. Filters->Disort->Value Propagate is how you get it in GIMP. Select "more black" or "more white" depending on what you're going for.

Last touch is a gaussian blur to smooth it a bit - otherwise value propagate leaves squarisch shapes (which can look good too...). It's under Filters->Blur->Gaussian Blur. I usually use it with 2 pixels blur radius, the smallest possible.

This is what the end result (for that layer) looks like, and next to it the merge (using multiply) with the black and white base icon:

The next layer I've called "goo" instead of "grain" in this case.

I started with a blend again, although here it's in shades of gray and white.

Next step is, again, RGB noise, although now it's correlated instead of independent. This produces lots of black and white speckles.

As before, we make the speckles more pronounced with value propagate and smoothen things with gaussian blur.

This is the resulting layer, which we then combine with the other two with the grain merge mode. Basically, with grain merge, any color value above medium lightness makes the result lighter, while any value below medium makes the result darker.

+ =

For reference, this is the complete icon, the "goo" layer, and the icon without the "goo" layer:

- =

The last layer is another grain merge more layer, but this time in color; starting off with another HSV blend. It goes by the name of "glow", and like the "goo" layer, is in grain merge mode.

Here I don't bother with the noise filter, but instead directly go to value propagate and the gaussian blur.

Here's the three other layers without the "glow" layer, the "glow" layer by itself, and the final icon again:

+ =

So here I didn't use a "lite" layer, stuff was glowy enough already.

Hope it's somewhat helpful - I could also share my .xcf files and text files with notes (those are in short hand and not always complete though).

Ask questions, or tell me if there's some icons where you're particularly interested in the style...

Syndicate content