Illustrator — векторная графика

1. Вектор против растра

Вектор описывает фигуры формулами: точка — координаты, линия — пути, кривая — математические параметры. Поэтому логотип в векторе можно увеличить с 20 px до размера билборда без потери качества.

2. Интерфейс и первое открытие

File → New открывает диалог с пресетами: Web, Print, Artboard. Выбери Web 1920×1080 для интернет-графики или Print A4 для печати.

Ключевые зоны:

• Toolbar (слева) — инструменты рисования и редактирования;
• Панель слоёв (справа) — слои и примитивы;
• Панель свойств (Properties) — настройки объекта;
• Artboard — рабочая область (как лист бумаги);
• Color / Swatches / Gradient — вкладки цвета.

3. Фигуры и инструмент Перо

Базовые фигуры на панели инструментов:

Перо — главный инструмент

Перо рисует кривые Безье по опорным точкам:

• клик — угловая точка (прямой отрезок);
• клик + протяжка — сглаженная точка с рычагами кривизны;
• Alt + клик на рычаге — «сломать» кривую (сделать изгиб в обе стороны);
• Enter/клик по первой точке — закрыть путь.

4. Пути, опорные точки и редактирование

Любая фигура в Illustrator — это путь с опорными точками. Для правки используй:

• Selection (V) — выделение всей фигуры;
• Direct Selection (A) — выделение отдельных точек и сегментов;
• Add/Delete Anchor Point — добавлять и удалять точки;
• Convert Anchor Point (Shift + C) — менять тип точки (угол/сглаживание).

Полезные операторы Pathfinder: Unite (объединить), Minus Front (вычесть), Intersect (пересечение), Exclude (исключить). Панель: Window → Pathfinder.

Круг + Круг = Unite        # одна фигура из двух в круге
Квадрат - Круг = вырезан   # в квадрате появляется дырка
Овал AND линия = Intersect # остаётся только общая часть

5. Цвет: заливка, обводка, градиенты

Каждый объект имеет заливку (Fill) и обводку (Stroke). Цвет выбирается в панели свойств или инструментом Color Picker (двойной клик по цвету в панельке).

• Fill — цвет внутренней области;
• Stroke — цвет контура; толщина в поле рядом;
• None — отсутствие цвета (перечёркнутый квадратик);
• Swatches — библиотека фирменных цветов;
• Gradient — плавный переход между цветами (G — удерживать).

Цветовые модели

Для экрана — RGB, для печати — CMYK, для веба удобно копировать HEX-код. Глобальный цвет (Global) можно поменять один раз, и он обновит все объекты, где используется.

6. Работа с текстом

Инструмент Type (T) создаёт точечный или абзацный текст. Стили шрифта: Character (шрифт, размер, трекинг), Paragraph (выравнивание, отступы).

• Area Type — текст внутри фигуры (клик по фигуре инструментом Type);
• Type on a Path — текст вдоль кривой;
• Vertical Type — вертикальный текст;
• Outline Text (Type → Create Outlines, Ctrl + Shift + O) — превращает текст в вектор, лишая его редактируемости (нужно для логотипов).

7. Слои и организация

Слои помогают не запутаться в сложной иллюстрации. Панель Layers (Window → Layers):

• двойной клик по слою — переименовать;
• иконка «замок» — заблокировать слой (не редактируется);
• иконка «глаз» — скрыть слой;
• группа (Ctrl + G) — объединить объекты одного логического блока.

Изоляция: двойной клик по объекту внутри группы ставит программу в режим изоляции — редактируешь только внутренности, не затрагивая остальное. Выход — Esc.

8. Эффекты и внешний вид

Панель Appearance — «стек» свойств объекта: заливки, обводки, эффекты. Здесь можно добавить несколько заливок/обводок одному объекту — например, двойную рамку у плашки.

Выдели объект, открой Appearance (Shift + F6)
Добавь еще одну обводку: Add New Stroke -> цвет, толщина
Добавь эффект: Effect -> Drop Shadow / Blur / Transform
Все эффекты можно редактировать позже двойным кликом

Отличие эффекта от рисования: эффект остаётся «живым» — базовый объект сохраняется, а по нему строится внешний вид.

9. Трассировка растровых изображений

Image Trace (Window → Image Trace или кнопка на панели) переводит растровую картинку в вектор: логотип со скана, подпись, штриховой рисунок.

Настройки:

• Mode — Black and White / Grayscale / Color;
• Threshold — граница чёрного и белого;
• Paths / Corners / Noise — детализация векторизации;
• кнопка Ignore White — убрать белый фон.

10. Экспорт: SVG, PNG, PDF

Что экспортировать и куда:

Подготовь артборды заранее: один логотип — один артборд (Artboard Tool, Shift + O). Кнопка Export for Screens (Ctrl + Alt + E) позволяет экспортировать все артборды сразу.

11. Сетки, направляющие и точность

Для аккуратной работы используй:

• Smart Guides — подсказки выравнивания (Ctrl + U);
• Rulers — линейки: зажми и потяни с линейки направляющую (Ctrl + ; — показать/скрыть);
• Grid — сетка для пиксельной точности;
• Align to Pixel Grid — привязка к пиксельной сетке для чётких веб-иконок.

Основные горячие клавиши

12. Маски и режимы наложения

Маска прячет часть объекта, не удаляя данные. Clipping Mask (Ctrl+7) ограничивает видимость контуром-рамкой: помести содержимое внутрь нужной фигуры, выдели всё (Ctrl+A) и примени маску. Обрезанное содержимое остаётся редактируемым.

• Opacity Mask — видимость по яркости чёрно-белого слоя;
• двойной клик внутри маски (режим изоляции) правит её содержимое;
• режимы наложения (Multiply, Screen) на объекте включаются во вкладке Transparency.

Объект-рамка + содержимое -> выделить всё (Ctrl+A)
Object -> Clipping Mask -> Make (Ctrl+7)

13. Символы, кисти и узоры

Повторяющиеся элементы не нужно копировать: Symbol (F8) хранит «образец», а все его экземпляры обновляются разом. Изменил символ — обновилась целая ветка иконок в макете.

• разорвать связь с образцом: Object → Expand или Ungroup;
• Art Brush рисует вдоль кривой, Scatter Brush рассыпает объекты по пути;
• узор-заливка делается так: выдели мотив и перетащи его в панель Swatches.

14. Градиентная сетка (Mesh)

Градиентная сетка превращает объект в набор точек с цветами, между которыми Illustrator строит плавные переходы. Это техника «живых» заливок: фрукты, ткани, кожа.

Выдели объект: Object -> Create Gradient Mesh
Параметры: Rows, Columns, Appearance (Flat / To Center)

• точки сетки двигаются инструментом Direct Selection (A);
• цвет каждой точки — любой, переходы пересчитываются автоматически;
• для новичка начинай с сетки 2×2 и повышай плотность постепенно.

15. Оптимизация SVG для веба

SVG из Illustrator попадает на сайт «как есть», но несёт много лишнего: слои, повторяющиеся атрибуты, метаданные. Вес режут оптимизацией, а одинаковые иконки собирают в спрайт.

File -> Export As -> SVG: включить "Minify" (сжатие)
После экспорта прогони файл через svgo:
npx svgo logo.svg -o logo.min.svg

• близкие по цвету объекты объединяйте в Pathfinder → Unite;
• одинаковые иконки — в один SVG-спрайт через <symbol>;
• для веба предпочтительнее <path>, а не группы однотипных тегов.

16. Shape Builder и продвинутое редактирование путей

Инструмент Shape Builder (Shift+M) соединяет и вычитает фигуры перетаскиванием — так собирают сложные силуэты из простых без рисования кривых вручную.

1) нарисуйте круг и прямоугольник;
2) выделите оба (V);
3) Shift+M, проведите по пересечению — области склеились.

Полезен и Pathfinder (панель Окно → Обрезка): операции Union, Minus Front, Intersect выполняют булевы действия над путями.

Union       — объединить контуры
Minus Front — вычесть верхний из нижнего
Intersect   — оставить общую зону
Exclude     — убрать общую зону

17. Перспектива и изометрия в Illustrator

Сетки перспективы позволяют строить «объёмные» иллюстрации прямо в векторе без 3D-редактора.

• Perspective Grid (Инструменты → Сетка перспективы, Ctrl+Shift+I) — три плоскости с точками схода;
• Изометрия — упрощённая перспектива без схода, углы 30°;
• движок 3D (Эффект → 3D и материалы) выдавливает и вращает фигуры.

Классическая изометрия: ромб 30°/150°,
вертикальные стороны — перпендикуляры.

18. Подготовка к печати: CMYK, обрезные метки и треппинг

Экран — RGB, печать — CMYK. Правильная подготовка файла экономит тираж и нервы.

Файл → Режим цвета документа → CMYK
Файл → Экспорт → PDF (типография)
+ обрезные метки (Marks), + выпуск 3–5 мм под обрез

19. Автоматизация рутины: Actions и скрипты JSX

Повторяющиеся операции — экспорт в несколько размеров, пакетная замена цвета — выполняются панелью Actions (Alt+F9) или скриптами.

// пример JSX: экспорт активного документа в PNG
var doc = app.activeDocument;
doc.exportFile(new File(doc.name + ".png"),
               ExportType.PNG8);

• Actions записываются нажатием кнопки записи и воспроизводятся по горячей клавише;
• скрипты JSX — полноценный JavaScript (см. курс JavaScript);
• для пакета файлов используйте «Пакетную обработку» в Actions.

20. Blend-объекты и плавные переходы форм

Blend (объект → blend) создаёт серию промежуточных фигур между двумя объектами — из простых форм рождаются ленты, контуры и плавные переходы без ручной отрисовки.

1. Нарисуйте две фигуры (например, круг и звезду).
2. Выделите обе → Object → Blend → Make.
3. Число шагов: Object → Blend → Blend Options.

• шаги настраиваются числом или «Smooth Color» для плавности перехода;
• blend остаётся редактируемым: правьте исходные фигуры — подробности обновятся;
• применяется к тексту, заливкам и обводкам — техника для баннеров и иконок.

21. Глобальные цвета и стили графики

Редактирование палитры проекта — боль, если все цвета «локальные». Глобальные цвета и стили графики позволяют поменять весь документ из одной точки.

• глобальный цвет (панель Swatches) — правка оттенка обновит все объекты, где он используется;
• стиль графики — набор заливки, обводки и эффектов, применяемый одним кликом;
• символы (раздел 13) — многократное размещение одного объекта с автообновлением.

// переназначить цвет документа в скрипте JSX
var sw = app.activeDocument.spots[0];
sw.colorModel = ColorModel.RGB;
sw.color.red = 255; // все использования обновятся

22. SVG-анимация и экспорт для веб-интерфейсов

Статичный SVG уже лёгок, но живые иконки — современный тренд. Анимировать вектор можно без плагинов: SMIL, CSS-анимации и JavaScript дают движение на основе готовых фигур.

<svg viewBox="0 0 100 100">
  <circle r="20">
    <animate attributeName="r" values="5;25;5"
             dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

• animate / attributeName — SMIL-анимация прямо в SVG (работает без CSS-классов);
• CSS @keyframes на transform — плавно и GPU-ускоренно;
• экспортируйте иконки с честными id и классами (не g_1) — стилизация извне станет осмысленной.

23. Проект «Логотип»: от эскиза до файлов

Финал курса — собрать всё сразу. Логотип — идеальный проектный фикс: здесь и кривые, и цвет, и экспорт, и проверка на носителях от визитки до аватара.

Файлы на выходе:
logo.svg  → веб и векторные вставки
logo.png  → растровые площадки (3000×3000)
logo.pdf  → печать и отправка заказчику
logo.eps  → legacy-типографии

• начинайте с формы в чёрно-белом: цвет добавляйте после, вес формы важнее;
• проверяйте читаемость на маленьком размере — 16px это нож;
• держите изоляционную зону и вариант для тёмного фона.

Что дальше

Освоив вектор, попробуй собрать из него интерфейс в Figma или анимировать в After Effects. Для экспорта иконок в веб-проект пригодится курс HTML.

← Вернуться к курсам