Руководство по художественному оформлению

From FreeCAD Documentation
Revision as of 20:47, 9 April 2021 by AMK (talk | contribs) (Created page with "Отталкиваясь от основного цвета иконки, убедитесь, что есть тёмный контур в 2px, как упоминалось...")

Введение

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

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

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

A Цвет подсветки используется для всей этой поверхности, чтобы указать на свет, падающий сверху.
B Обязательный тёмный контур окружает форму значка, чтобы обеспечить контраст очертаний.
C Непосредственно внутри контура подсвечивающая обводка (цвет грани А) обеспечивает контраст на тёмном фоне.
D Эта грань, как правило, имеет базовый цвет, и лёгкий градиент, от лёгкой подсветки (вверху слева) к затемнению в основании (внизу справа), что создаёт впечатление света, падающего сверху слева.
E Изюминкой здесь является базовый цвет обводки (на один тон ниже), чтобы создать впечатление, что эта грань , наиболее удалена от света.
F Эта грань похожа на грань D, но идёт от Светлого основания (вверху слева) к более Тёмному (внизу справа), чтобы указать, что это грань, наиболее удалённая от света.

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

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

64 px, исходный размер, крупные кнопки.
32 px, средний размер, стандартные иконки.
16 px, маленький размер, так будет отображаться в древе проекта.

Цвета

ОБЯЗАТЕЛЬНО

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

Пример 4-х тонового цветового семейства (Хамелеон)

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

Используйте жёлтые тона для инструментов, создающих объекты; например, смотри Верстак Part и Верстак Draft.
Используйте синие тона для инструментов, изменяющих объекты; например, смотри Верстак Part и Верстак Draft.
Используйте бирюзовые тона для инструментов, связанных с представлением на экране; например, смотри Меню Вид.
Используйте красные тона для инструментов, связанных с ограничениями; например, смотри Верстак Sketcher.
Зачем ограничивать себя этими цветами? Ограничение цветов определенной палитрой помогает избежать неоднородной иконографии и улучшает читабельность при наличии большого количества иконок
Как использовать палитру FreeCAD? Установить палитру так же просто, как и скопировать её в папку с палитрами в Inkscape.

Ширина сетки и обводки

ОБЯЗАТЕЛЬНО

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

Рисуйте иконку внутри синей области, и всё будет работать правильно.

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

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

Сетка с линиями, кратными 2px.

Зачем использовать эту сетку и размер линий? По историческим причинам FreeCAD использует значок 64x64, который затем масштабируется. Не идеально, но добавляет характер. В результате выравнивание объектов по сетке, в степени два, с толщиной, равной степени два, помогает избежать или, по крайней мере, смягчить проблемы сглаживания при повторном масштабировании.
Как мне это выполнить? Если вы используете Inkscape, перейдите в меню Файл → Свойства Документа и подтвердите правильность ширины, высоты и единиц измерения вашей страницы. Затем перейдите на вкладку Сетки(Grids), нажмите Создать(New), установите единицы измерения в px, а Интервал(Spacing) X и Интервал(Spacing) Y в значение 1, а Основную линию сетки(Major grid line) - каждые 2.

Обводка

ОБЯЗАТЕЛЬНО

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

The dark edge of the icon is the outline.

Why is the outline needed? The outline is the skeleton on which everything else hangs by adding form contrast. Using the Outline color or the Dark color depends on the situation, but without this line, the range of backgrounds on which the icon is visible gets drastically limited
How do I comply with this? Simply add a stroke of 2px around every part of the icon that will be adjacent to the background color, that is, the outline is for external strokes. In case of shapes that have a hole in the middle, for example, a donut, the outline should also be added to the interior hole. Snap your path's nodes to the grid whenever possible, aiming for the minor grid intersections.

Highlight

Strongly advised

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.

The light highlight helps in dark backgrounds.

Why use the highlight? The highlight works in unison with the outline to improve form contrast, especially on dark backgrounds. It is never a bad idea, but if you don't have the space, for example, you have a very thin line, you can opt out of it provided you have ensured enough contrast between the main color and the outline.
How do I comply with this? Just like the outline, simply trace a stroke of 2px around the internal side of the outline, snapping nodes to the grid when possible, aiming for the minor grid intersections.

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 only palette colors are used.

Subtle lighting effect coming from top left.

Why use lighting? Lighting is just another way to tie icons together and ensure that there are varying levels of "value" to improve their readability. Provided the outline and highlight are present though, it can be considered optional
How do I comply with this? Set the fill to be a linear or a radial gradient. In Inkscape this is available in the stroke and fill settings; with "F2" it is possible to move the nodes of the gradient around to make sure they are at the right angle.

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 View → Icon Preview 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.

Testing the icon against the darkest and lightest colors as background

My icon is barely visible. You have poor form contrast. Double check the outline and highlight, one of these is probably missing or improperly applied.

Checking your contrast

  1. Export your icon from SVG to a bitmap format, like .png or .jpg.
  2. Load your bitmap in an image program, and change it to grayscale. For example, in GIMP you would go to Image → Mode → Grayscale.
  3. Inkscape allows you to convert the SVG directly to grayscale using Extensions → Color → Grayscale.
  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.

Testing the icon's contrast in grayscale

I can't make out all the details. The colors you've chosen have poor value contrast. Try using colors that are further apart in your 4 tone palette, that is, a highlight green beside a highlight yellow will be difficult to see, knock one of those colors down to Base or Dark.

Template:Artwork