Artwork Guidelines/ru

Введение
для просмотра всех иконок(пиктограмм) в исходном каталоге смотри Художественное оформление.

Значок FreeCAD состоит из 6 элементов, которые можно запомнить по аббревиатуре SALCHO: Stroke, Alignment, Lighting, Color, Highlighting, Оutline (Обводка, Выравнивание, Освещение, Цвет, Подсветка, Контур).

Вот реальный, но совершенно условный пример:



В следующих разделах эти элементы объясняются более подробно.

Эта иконка будет отображаться следующим образом:

Цвета
FreeCAD использует палитру, адаптированную из палитры Tango. Каждый основной цвет состоит из 4-х тонов: Подсветка, Основа, Тёмный и Обводка. Обратите внимание, что обводка не полностью чёрная, а очень тёмная вариация Основы.



Смотри Палитра FreeCAD для полного обзора. Подборка некоторых ключевых цветов.

Ширина сетки и обводки
Иконки FreeCAD имеют номинальный размер 64 пикселя как по ширине, так и по высоте. При создании или редактировании иконок убедитесь, что размер вашего документа равен 64 x 64, а единицами измерения являются пиксели (px). Оставление внутреннего пространства (пустого поля) из 2-х пикселей(px) вокруг области документа очень полезно, так как это предотвращает такие эффекты, как сглаживание (размытие краев). То есть полезное пространство для значка должно считаться 60 х 60, а края должны быть оставлены пустыми.



Также настоятельно рекомендуется использовать визуальную сетку, которая имеет второстепенную сетку - каждый пиксель, и главную сетку - каждые 2 пикселя. Линии значка должны быть выровнены вдоль второстепенных пересечений сетки.

Линии должны быть не "тоньше" 2px и, в большинстве случаев, с закругленными краями и углами. Линии могут быть и "толще", но желательно, с толщиной кратной 2px, чтобы свести к минимуму размытость при масштабировании.



Обводка
Отталкиваясь от основного цвета иконки, убедитесь, что есть тёмный контур в 2px, как упоминалось ранее. Это работает в согласии с внутренней подсвечивающей обводкой, что обеспечит хороший контраст иконки на нескольких тонах заднего плана.



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.



Recommended recording format
All icons should be created in SVG format with a vector image application, such as Inkscape. This makes it easier to apply changes and derive additional icons in the same application space.

When committing icons to be used directly by FreeCAD (in a *.qrc file), save them as "Plain SVG". This will reduce the icon size and save the disk and memory space.

Closing remarks
Remember: SALCHO, Stroke, Alignment, Lighting, Color, Highlight, Outline

Here are some tips to check your work.

Checking size
Inkscape has a handy tool to check your icon at various sizes. Go to and it'll show you previews of your icon resized to 16, 24, 32 and 64 pixels.

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 the next step. If not, adjust the highlight.
 * 3) Do the same but this time using the lightest color.
 * 4) Still looks OK? Great. Outlines and highlights have been used appropriately. Otherwise, adjust the outline.



Checking your contrast

 * 1) Export your icon from SVG to a bitmap format, like  or.
 * 2) Load your bitmap in an image program, and change it to grayscale. For example, in GIMP you would go to.
 * 3) Inkscape allows you to convert the SVG directly to grayscale using.
 * 4) Can you still clearly make out any internal details? Great. The contrast is good.

A grayscale image allows you to more easily identify problems in contrast, as only a mix of black and white is present. Testing grayscale images is also good for colorblind users. If they can see the details in a grayscale image, then the contrast of the fully colored image is probably good as well.