Artwork Guidelines

Introduction
for all icons in the source tree, see Artwork.

A FreeCAD icon is composed of 6 elements which can be remembered easily using the awkward acronym SALCHO: Stroke, Alignment, Lighting, Color, Highlighting, Outline.

Here's a concrete, yet arbitrary example:



The following sections explain these elements in a more structured way.

Colors
FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.



See FreeCAD palette for the full range. A selection of some key colors.

Grid and stroke width
FreeCAD icons have a nominal size of 64 pixels both in width and height. When creating or editing an icon, make sure the document size is 64 x 64 with the units being pixels (px). Leaving an inner 2px margin of empty space all around the document area is useful as it prevents effects like anti-aliasing (blurring of edges). That is, the usable space for the icon should be considered 60 x 60, and the edges should be left empty.



It's also strongly recommended to use a visual grid that has a minor grid line every pixel, and a major grid line every 2 pixels. The strokes of the icon should be aligned along the minor grid intersections.

Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thicker, but they should preferably be a multiple of 2px in order to minimize scaling fuzziness.



Outline
Basing yourself on the main color of the icon, ensure that there is a dark outline of 2px, as mentioned earlier. This works in unison with the highlight to ensure good form contrast on multiple background tones.



Highlight
Using the Highlight color, add an internal stroke of 2px to help make that outline pop. On dark backgrounds, it's this highlight what will be providing the form to the icon.



Lighting
As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Dark color bottom right. Notice that only palette colors are used.



Closing Remarks
That's it - that's all there is to making sure that there's a unified look to all the icons. Remember: SALCHO Stroke, Alignment, Lighting, Color, Highlight, Outline

Here's a collection of tips to be able to check your work:

Checking Size
Inkscape has a super handy tool to check your icon at various sizes. Go to "View > Icon Preview..." and it'll show you previews of your icon resized to 16,24,32 and 64px!

Checking Your Outline
1. Put your icon on a big rectangle that is the same color as the darkest color in your icon.

2. Still looks OK? Great! Go to step 3. If not, see the frowny face

3. Do the same but this time using the lightest color.

4. Still looks OK? Great! Outlines and highlights have been used appropriately!

Checking Your Contrast
1. Get your icon and export it to either .png or .jpg, whichever you prefer

2. Open an image program and change it to grayscale. In GIMP for example you would go to "Image > Mode > Grayscale" (This is excellent for testing for color blind users)

3. Can you still clearly make out any internal details? Great! You have good contrast!