1.12 Создание иконок

Интерфейсная иконка — это…

Маленький значок, который обозначает действие или функцию (поиск, закрыть, камера). Максимально простой и однозначный; типичные размеры 16, 20, 24, 32 px.

В отличие от иллюстративной иконки, которая украшает и может быть детальной

Интерфейсная иконка: задача

Обозначить действие или функцию (поиск, закрыть, камера)

Иллюстративная иконка: задача

Украсить, привлечь внимание, работать как маленькая иллюстрация

Детали: интерфейсная vs иллюстративная

Интерфейсная — минимум, максимально просто; иллюстративная — больше деталей, градиенты, тени

Размеры интерфейсных иконок

16, 20, 24, 32 px

С чего начинается любая интерфейсная иконка?

С фрейма-контейнера

Рекомендуемый размер контейнера

24 × 24 px

Зачем давать контейнеру цветную заливку при рисовании?

Чтобы видеть границы; в конце заливку убрать

Что такое охранная зона?

Охранная зона — пустое поле между рисунком иконки и краем её контейнера (обычно ≈ 2 px при контейнере 24 × 24). Нужна, чтобы иконка не обрезалась в вёрстке, а иконки разной формы выглядели уравновешенно

Размер охранной зоны

≈ 2 px с каждой стороны (рабочая область 20 × 20)

Зачем охранная зона?

Чтобы иконка не обрезалась в вёрстке и иконки разной формы были уравновешены

Охранная зона для вытянутой по горизонтали иконки (глаз)

Можно 1 px по бокам

Обязателен ли контейнер 24?

Нет (20, 28, 40…), но у всех иконок набора одинаковый

Обернуть рисунок во фрейм

Ctrl + Alt + G (Frame selection)

Единый стиль: толщина обводки

Одинаковая во всём наборе — например, 2 px

Единый стиль: скругление

Одно значение везде — ровно 2, не 1,5 и не 2,1

Единый стиль: концы линий

Одинаковые — например, Round у всех

Единый стиль: линейные или залитые

Все линейные или все залитые

Откуда в 99 % случаев берут иконки?

Из готовых наборов и плагинов (например, Phosphor Icons)

Когда рисуют свои иконки?

Когда нужной нет или её надо доработать

Глаз: как сделать форму?

Два больших круга внахлёст → Intersect → Flatten

Как скруглить только часть углов (камера)?

Flatten → режим редактирования → выделить нужные точки → Corner radius 2

Как сдвинуть объект на 0,5 px?

Вписать дробное значение в X/Y (например, 8,5 вместо 9)

Диалог: как сделать зазор между облачками?

Рамку чуть больше второго облачка поднять наверх и вырезать через Subtract

Как собрать набор иконок?

Убрать служебную заливку, выделить все → Shift + A (Auto Layout)

Зачем набор в Auto Layout?

Одинаковые отступы, новые иконки встают с тем же шагом

Где должны стоять точки для чётких линий?

В начале или в середине пикселя

Snap to pixel grid — что и клавиши

Привязка точек к целым пикселям; Ctrl + Shift + '

Pixel grid — что и клавиши

Показывает сетку пикселей при приближении; Shift + '

Pixel preview — что и клавиши

Показывает, как иконка будет выглядеть на экране; Ctrl + Shift + P

Перо «не попадает» в пиксели — почему?

Выключен Snap to pixel grid

Сдвиг на 1 px / 10 px

Стрелки / Shift + стрелки

Ошибка: иконка без контейнера (20 × 16)

Всегда фрейм 24 × 24 вокруг рисунка

Ошибка: размытые линии

Snap to pixel grid, точки на целых или половинных пикселях

Линейная иконка — это…

Нарисована обводкой (outline)

Залитая иконка — это…

Нарисована заливкой (filled)