iconfu iconfu iconfu is the world's largest collection of free, open-source icons and it comes with a handy image editor, so you can tweak icons to suit your needs exactly or even draw your own from scratch
invert blue resize move up verbose drawmode lighter previews remove swap animator library library draw shift up make a copy large editor explorer your icon contract agreement tag

16 February 2009

[iconfu] manipulate colour levels

Up to today, a sorely missed iconfu feature was the ability to make an icon brighter or darker, or to adjust contrast in a controlled way.

For example, suppose you decided you like the stop-process icon from the Tango Icon Project. But it happens to be a little too dark for the colour scheme you're working with. Wouldn't it be nice to lighten it up a bit?

Head over to iconfu, and use the library browser to find the icon you need: fill in your required dimensions and try searching for icons tagged "stop". Let's say the dark, red, octagonal Tango "stop-process" icon is the one you want. Click on it, and you'll see this:

Now, it's open in the editor. Here's how it looks:

You can brighten this up using the "levels" panel. Click on the brightness control, then click and drag on the red channel display, following the red arrow in this image:

Adjust the green and blue channels to taste:

Now, the original and brighter icons side by side:

The brightness controls also manipulate contrast. Low-contrast looks something like this:

- all the red is bunched around the same place, so each pixel in the image has more or less the same amount of red. This is how high-contrast looks:

- some pixels have a high level of red, other pixels have a low level of red. So, to manipulate contrast directly, choose spread distribution and again click and drag on the channel where you want to create contrast.

The spread distribution tool spreads the distribution of light and dark pixels, leaving a hole where the mouse was dragged.

Finally, the original, brighter, and high-contrast icons side by side:

For the opposite effect (reduce contrast), use narrow distribution - this bunches the distribution of bright and dark pixels together, reducing contrast.

0 comments:

Post a Comment