draw icons with iconfu

Simple drawing tasks are easy with iconfu: choose a colour, select the Pen tool, and draw by clicking on the canvas. Use the eraser to change your mind.

Advanced drawing tasks are possible by combining tools and drawing modes: draw a background "behind" your image, replace the colours of your image without changing its shape, change the shape without affecting the colours.

When drawing, iconfu considers how to combine the source colour (the colour that will be drawn on the image) with the destination colour (the colour of the pixel already in the image), to produce the final colour (the colour of the pixel after the drawing operation is completed). The way the source and destination colours are combined is determined by the current Drawing Mode.

The Drawing Mode allows you draw colours "on top of", or "behind" the current image. You may also use the drawing mode to apply the RGB values of the source colour and the opacity value of the destination colour (or vice-versa), enabling cookie-cutting operations.

Read on for more, or go back to the about page.

drawing with the pen

The Pen Tool draws the current colour on each pixel you click, using the current drawing mode. Ways of using the Pen Tool:

• With "replace" drawing mode: sets the target pixel to the current colour and opacity.
• With "over" drawing mode: creates shades of the current colour if it is semi-transparent.
• With "under" drawing mode: draws "behind" the current image. No effect if the target pixel is 100% opaque (the target pixel effectively blocks the new colour).

the sampler tool

The sampler tool sets the current colour to the colour of the touched pixel. In other words, click on the image you are editing, and the current colour will be the colour of the pixel you clicked on.

The sampler tool automatically reverts to the pen tool so you can continue drawing without an extra click.

the ellipse tool

The ellipse tool draws ellipses. Hollow, filled, round, elongated, and at an angle.

To draw a filled ellipse, set the "inside-x-radius" and "inside-y-radius" to zero. To draw a hollow ellipse, give these two a non-zero value less than the outside radius.

To draw a filled circle, set the x- and y- radii to the same value. For an "O", set a value for the inside radii.

To draw an ellipse at an angle (ie instead of plain horizontal or vertical), set a value for θ in radians. If you can't be bothered with radians, then specify a multiple or fraction of π where π is 180? thus:

• "0.25p" is equivalent to 45?,
• "0.33p" is approximately 60?,
• and so on.

The ellipse tool uses the current Drawing Mode. Here are some typical applications:

• use "over" to simply draw the ellipse over your current icon.
• use "cookiecut-new" to change the shape of your icon to the shape of the ellipse, without changing any colours.
• use "under" to draw an ellipse behind your current icon.
• use to replace your entire icon with the ellipse.

the fill tool

The fill tool draws the current colour on adjacent transparent pixels.

The fill tool starts by drawing the current colour on the touched pixel; then it considers each neighbouring pixel in turn, drawing on any neighbour pixel whose opacity is not less than that of the previous pixel.

In simpler terms, the fill tool fills empty spaces in your icon.

The fill tool uses the current Drawing Mode although the most sensible use is with "under", so the fill tool effectively draws a background on the icon without losing anti-aliasing provided by semi-transparent pixels around the edge of the original.

drawing with the eraser

the gradient tool

The gradient tool draws a radial gradient from the touched pixel to the edge of the canvas.

The gradient tool will draw the "centre" colour on the touched pixel, and will draw the "edge" colour on the corner of the canvas furthest from the touched pixel. The colour drawn on all other pixels will be a shade between the "centre" and "edge" colours depending on the proportional distance of the pixel in question from the touched pixel and the furthest corner pixel.

To set the "centre" and "edge" colours, choose the current colour then click respectively on the "centre" and "edge" buttons in the gradient panel which appears above the canvas once the gradient tool is selected.

The gradient tool draws using the current drawing mode and applies the alpha (opacity) value of the "centre" and "edge" colours. This means you can use the gradient tool to fade out the edges of an icon (using the "cookiecut-old" drawing mode); give your icon a spooky glow from behind (using the "under" drawing mode); or create shading to give an icon a 3D effect, using the using the "over" drawing mode.

the select tool

The select tool selects a rectangular area of your icon to restrict certain operations to that area.

The most useful application of the select tool is to create a copy of a small part of your icon.

To create a selection, click on the select tool, and a box with a dashed yellow border will appear. The area covered by this box is the selected area. Drag the box to change its position; drag its borders to adjust its size.

Other applications of the selected area are:

• the blur action applies only to the seleced area;
• ditto for the clear action;
• and for the custom transform action;

the replace tool

The replace tool replaces every pixel with the same colour as the touched pixel with the current colour. Use this as a part of early icon prototyping to quickly modify an image.

This tool only replaces pixels with the exact same colour and opacity values, so it is ineffective after gradients or shading have been applied.

the alpha pen