Иконки в Illustrator: один стиль за 5 шагов

Статья создана при поддержке магазина Usoftware.
Единый стиль — это не «магия кисти», а дисциплина: сетка, ограниченный набор приёмов и строгие правила. Ниже — минимальный, но рабочий конвейер из 5 шагов, который позволит быстро и последовательно делать наборы иконок.

Шаг 1. Задаём правила стиля (мини-гайд)

Перед рисованием за 10 минут определите «законы мира» ваших иконок.

Холст и сетка

• Размер фрейма: 24×24 px или 32×32 px (универсальные стандарты).
• Включите View → Pixel Preview и View → Snap to Pixel (иконки станут резкими на экране).
• Поставьте Preferences → Guides & Grid → Gridline every: 1 px; Subdivisions: 1.
• Нарисуйте невидимую рамку-поля (например, 2 px внутрь), чтобы важные детали не прилипали к краям.

Линии и углы

• Базовая толщина контура: например 2 px (или 1.5 px — но одна на весь набор).
• Концы/соединения: Round Cap / Round Join для мягкого стиля или Butt/Miter для строгого.
• Радиусы скруглений: фиксированные значения (напр. 2 px и 4 px), ничего «на глаз».

Цвет и заливки

• Палитра: максимум 3–5 цветов + нейтральный (чёрный/тёмно-серый).
• Создайте Global Swatches (в палитре Swatches отметьте Global), чтобы менять цвет набора за один раз.
• Используйте tints (оттенки глобальных цветов), а не отдельные произвольные HEX.

Геометрия

• Уголовые допуски: разрешены 0°, 45°, 90° (избегайте случайных наклонов типа 17°).
• Масштаб: детали кратны сетке (1 px). Никаких 0.3 px, полу-пикселей, дробных координат.

Хитрость: соберите это на одном артборде «Style Guide»: образец линии, угла, скругления, палитра и пара эталонных иконок.

Шаг 2. Строим каркас: сетка, ключевые формы и символы

Сетка и направляющие

1. Создайте артборды 24×24/32×32 (Artboard Tool Shift+O).
2. Проверьте Align to Pixel Grid (в современных версиях — через Snap to Pixel и целочисленные координаты в Transform).

Ключевые формы

• Сохраните часто используемые фигуры (круги 16/12 px, квадрат 14 px, стрелки, точки) как отдельный слой «Building Blocks».
• Для повторяемых элементов применяйте Appearance: один объект — несколько штрихов/заливок.

Symbols / Components

• Окно Symbols: превратите повторяющиеся элементы (например, маркер уведомления, пин) в символы.
• Измените символ — обновятся все его вхождения. Это страховка от расползания стиля.

Шаг 3. Рисуем быстро и чисто: инструменты и приёмы

Базовый набор

• Прямоугольник (M), Эллипс (L), Линия (****), Перо (P) — но старайтесь собирать из простых форм.
• Shape Builder (Shift+M) или Pathfinder для сложения/вычитания.
• Corner Widgets (маленькие кружки на углах) для точных скруглений с заданным радиусом.

Правила чистоты

• Все координаты целые: в Transform X/Y/W/H без дробей.
• Контур один на всю иконку (или кратно базовому): 2 px везде — и точка.
• Если используете и контур, и заливку: сначала заливка, сверху контур (управляйте в Appearance).
• Малые детали минимум 1×1 px, иначе их «съест» рендеринг.

Скоростные фишки

• Копирование стиля: Eyedropper (I) работает и для Appearance.
• Точный повтор: Cmd/Ctrl+D (повтор последнего трансформирования).
• Выравнивание: Align по ключевому объекту (клик ещё раз по опорной фигуре).

Шаг 4. Унификация: графические стили и вариативность

Graphic Styles

• Сохраните набор стилей: «Stroke 2 px Round», «Fill + Stroke», «Duotone».
• Применяя стиль к объектам, вы исключаете ручную настройку и человеческий фактор.

Расстояния и ритм

• Введите минимальный шаг отступа (напр. 2 px). Между любыми частями — кратно 2.
• Центровка по оптической оси важнее математической: иногда визуально лучше сдвинуть на 1 px.

Состояния и размеры

• Если нужны размеры 16/24/32, масштабируйте только по целым кратным и затем ручной контроль: проверьте толщины (они должны оставаться 1/1.5/2 px, а не становиться 1.33).
• Для активного/неактивного состояния используйте tints одного глобального цвета, а не разные цвета.

Шаг 5. Экспорт без сюрпризов

Подготовка ассетов

• Переименуйте иконки осмысленно: ic_home_24, ic_home_filled_24.
• Выделите иконки → Asset Export (Window → Asset Export) → добавляйте как ассеты.

SVG (для интерфейсов)

• В Asset Export выберите SVG. В настройках:
  Styling: Presentation Attributes
  Decimals/Precision: 2 (или 3, если много кривых)
  Responsive: ON
  Удалить лишнее: не встраивать растр, не создавать width/height, если нужен адаптив.
• Проверьте итог: один <path>/несколько <path>, корректные stroke-linecap/stroke-linejoin.

PNG/WEBP (растровые превью)

• Экспортируйте кратные масштабы: 1×, 2×, 3×.
• Фон — прозрачный. Проверьте, что пиксели «встают» на сетку (без размытия на 100%).

Частые ошибки и как их избежать

1. Дробные координаты и толщина → включите Pixel Preview, Snap to Pixel, правьте Transform.
2. Случайные скругления → фиксируйте 1–2 радиуса, избегайте «на глаз».
3. Зоопарк цветов → только Global Swatches и их tints.
4. Разная толщина линий → один базовый stroke; любые «тонкие» детали делайте заливкой, а не 1-пиксельной линией на масштабах, где её «смажет».
5. Случайные углы → используйте ровно 0/45/90° и повороты на кратные 45°.

Мини-чеклист перед экспортом

• Размер иконки 24/32 px, поля соблюдены.
• Все координаты целочисленные; толщина контура = базовой.
• Углы и радиусы соответствуют гайду.
• Цвета — из Global Swatches; нет «иконок-самозванцев».
• Символы/компоненты обновлены, дубликатов стилей нет.
• SVG проходит быстрый просмотр: чистые атрибуты, нужная точность.

Бонус: готовые пресеты для быстрого старта

• Стиль: Stroke 2 px, Round Cap/Join, Fill — None.
• Цвета (Global): Primary, Secondary, Accent, Neutral (только через tints).
• Радиусы: 2 px (малый), 4 px (крупный).
• Сетка: 1 px; рабочая область 24×24; внутреннее поле 2 px.
• Экспорт: SVG (Presentation Attributes, Precision 2), PNG 1×/2×/3×.