User:Agryson: Difference between revisions

From FreeCAD Documentation
(Created page with "=Public Notes= ==Artwork Guidelines== TODO: will lay out my notes on FreeCAD guidelines / Tango guidelines and application notes")
 
No edit summary
Line 1: Line 1:
=Public Notes=
=Public Notes=
==Artwork Guidelines==
==Artwork Guidelines==
===Icon Anatomy===
TODO: will lay out my notes on FreeCAD guidelines / Tango guidelines and application notes
====Colors====
FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline. There is no good reason to ever use a color that is not on this palette, at least no good reason that I've come across so far!
====Grid & Stroke Width====
FreeCAD Icons are 64px*64px nominal size. When creating or editing an icon, make sure your document size is 64 x 64 with the units being px. 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.
Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thinner, but aim for a multiple of two to minimise 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 union with the highlight to ensure good form contrast on multiple background tones.
====Highlight====
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====
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.

That's it - that's all I do to make sure that there's a unified look to all the icons.
Remember: '''SALCHO'''
Stroke, Alignment, Lighting, Color, Highlight, Outline

Revision as of 16:12, 17 January 2017

Public Notes

Artwork Guidelines

Icon Anatomy

Colors

FreeCAD uses a palette adapted from the Tango palette. Each main color comes in 4 tones: Highlight, Base, Dark and Outline. There is no good reason to ever use a color that is not on this palette, at least no good reason that I've come across so far!

Grid & Stroke Width

FreeCAD Icons are 64px*64px nominal size. When creating or editing an icon, make sure your document size is 64 x 64 with the units being px. 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. Strokes should be no thinner than 2px, with rounded caps and corners in most cases. Strokes can be thinner, but aim for a multiple of two to minimise 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 union with the highlight to ensure good form contrast on multiple background tones.

Highlight

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

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.

That's it - that's all I do to make sure that there's a unified look to all the icons. Remember: SALCHO Stroke, Alignment, Lighting, Color, Highlight, Outline