Artwork/it

Questi oggetti grafici sono stati creati per FreeCAD. Sono utilizzabili liberamente anche in altre applicazioni.

Per contribuire alla realizzazione di icone, si prega di leggere prima le linee guida alla fine di questa pagina.

Draft WB: Draft Menu Icons




FEM WB: FEM Menu and Toolbar Icons


png



Emot icons




Schermate di avvio


















Da \src\Gui\Icons


Lo sfondo è stato ridimensionato per una larghezza di visualizzazione di 480 pixel:



Da \src\Mod\Drawing\Templates


L'immagine seguente è "A4_Simple.svg":



Da \src\Mod\Sketcher\Gui\Resources\icons\small
I file in questa cartella non possono essere caricati a causa della loro estensione.

Da \src\Mod\Start\StartPage


Le seguenti icone sono state ridimensionate per una larghezza di visualizzazione di 600 pixel:













Introduction
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
[Obligatory] FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.

Grid & Stroke Width
[Obligatory] FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px. This gives you 60px * 60px of useable space.

It's also strongly recommended to apply at least one grid to the document that has a grid line every pixel and a major grid line every 2 pixels. Feel free to add other grids to help out, but you should have at least that one. You're strokes would then be aligned along the minor grid intersections. (See image)

Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thicker, but aim for a multiple of two to minimise scaling fuzziness.

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

Highlight
[Strongly Advised] Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.

Lighting
[Optional] 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 I haven't played around trying to use a non-palette color)

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!