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

From FreeCAD Documentation
This page is a translated version of the page Artwork Guidelines and the translation is 100% complete.

Введение

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

Значок 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, как упоминалось ранее. Это работает в согласии с внутренней подсвечивающей обводкой, что обеспечит хороший контраст иконки на нескольких тонах заднего плана.

Тёмное ребро у иконки - это контур

Зачем нужен контур? Контур-это скелет, на котором держится всё остальное, добавляя контраст формы. Использование цвета Контура или Тёмного цвета зависит от ситуации, но без этой линии диапазон фонов, на которых виден значок, резко ограничен
Как мне это выполнить? Просто добавьте линию размером 2 пикселя вокруг каждой части ярлыка, которая будет прилегать к цвету фона, то есть контур предназначен для внешних линий. В случае фигур, которые имеют отверстие посередине, например, пончик, контур также должен быть добавлен к внутреннему отверстию. Привязывайте узлы вашего контура к сетке, когда это возможно, стремясь к незначительным пересечениям сетки.

Подсвечивающая обводка

Настоятельно рекомендуем

Используя цвет Подсветки, добавьте внутренний контур размером 2 пикселя, чтобы сделать этот контур всплывающим. На тёмном фоне именно эта подсветка будет придавать иконке форму.

Светлая подсветка помогает на тёмном фоне.

Зачем использовать подсветку? Подсветка работает в унисон с контуром, чтобы улучшить контраст, особенно на тёмном фоне. Это никогда не бывает плохой идеей, но если у вас нет пространства, например, у вас очень тонкая линия, вы можете отказаться от неё, если вы обеспечили достаточный контраст между основным цветом и контуром.
Как мне это выполнить? Точно так же, как с контуром, просто проведите линию в 2px вокруг внутренней стороны контура, привязывая узлы к сетке, когда это возможно, стремясь к незначительным пересечениям сетки.

Освещение

Необязательно

Согласно рекомендациям Tango, если вы добавляете градиентный световой эффект, постарайтесь сделать так, чтобы он выглядел так, как будто свет исходит из верхнего левого угла. Это делается путём добавления цвета подсветки вверху слева и базового или темного цвета внизу справа. Обратите внимание, что используются только цвета палитры.

Лёгкий световой эффект, идущий сверху слева.

Зачем использовать освещение? Освещение-это просто ещё один способ связать значки вместе и гарантировать, что существуют различные уровни "яркости", чтобы улучшить их читабельность. Однако при условии, что контур и подсветка присутствуют, это можно считать необязательным
Как мне это выполнить? Установите заливку в виде линейного или радиального градиента. В Inkscape это доступно в настройках штриха и заливки; с помощью "F2" можно перемещать узлы градиента вокруг, чтобы убедиться, что они находятся под прямым углом.

Рекомендуемый формат сохранения

Все иконки должны быть созданы в формате SVG с помощью приложения векторной графики, например Inkscape. Это облегчает применение изменений и получение дополнительных значков в том же приложении.

При регистрации иконки для непосредственного использования в FreeCAD (в файле *.qrc) сохраните их как "Обычный SVG". Это уменьшит размер иконки и сэкономит место на диске и в памяти.

Заключительные замечания

Запомните: SALCHO, Stroke, Alignment, Lighting, Color, Highlight, Outline (Обводка, Выравнивание, Освещение, Цвет, Подсветка, Контур).

Вот несколько советов, чтобы проверить свою работу.

Проверка размера

Inkscape имеет удобный инструмент для просмотра вашего значка в разных масштабах. Перейдите в раздел Вид → Предварительный просмотр иконок, и он покажет вам предварительный просмотр вашей иконки в размерах: 16, 24, 32 и 64 пикселя.

Проверка вашего контура

  1. Поместите свою иконку на большой прямоугольник того же цвета, что и самый тёмный цвет вашей иконки.
  2. Всё выглядит нормально? Здорово. Переходите к следующему шагу. Если нет, то отрегулируйте подсветку.
  3. Сделайте то же самое, но на этот раз используя самый светлый цвет.
  4. Всё выглядит нормально? Здорово. Контуры и Подсветка были использованы соответствующим образом. В противном случае отредактируйте контур.

Тестирование иконки на фоне самых тёмных и светлых цветов в качестве фона

Моя иконка едва заметна. У вас плохой контраст формы. Дважды проверьте контур и подсветку, один из них, вероятно, отсутствует или неправильно применён.

Проверка вашего контраста

  1. Экспортируйте иконку из формата SVG в растровый формат, например .png или .jpg.
  2. Загрузите растровое изображение в графическую программу и измените его на оттенки серого. Например, в GIMP перейдете в Image → Mode → Grayscale.
  3. Inkscape также позволяет конвертировать SVG непосредственно в оттенки серого с помощью Расширения → Цвет → Оттенки серого.
  4. Можете ли вы всё ещё ясно различить какие-либо внутренние детали? Здорово. Контраст хороший.

Изображение в оттенках серого позволяет легче идентифицировать проблемы с контрастом, так как присутствует только смесь черного и белого. Тестирование изображений в оттенках серого также полезно для дальтоников. Если они могут видеть детали на изображении в оттенках серого, то контраст полностью цветного изображения, скорее всего, тоже хороший.

Проверка контрастности иконок в оттенках серого

Я не могу разобрать всех деталей. Цвета, которые вы выбрали, имеют плохое значение контрастности. Попробуйте использовать цвета, которые находятся дальше друг от друга в вашей 4-х тоновой палитре, то есть Подсвечивающий зелёный рядом с Подсвечивающим жёлтым будет трудно увидеть, сбросьте один из этих цветов до базового или тёмного.