Векторная графика: основы и инструменты

1.

ЛЕКЦИЯ №2
Векторная графика: основы и инструменты

2.

ЦЕЛЬ И ЗАДАЧИ
Цель: сформировать понимание принципов векторной графики и научить применять базовые инструменты для создания
элементов пользовательского интерфейса.
ПОНЯТЬ
ОСВОИТЬ
НАУЧИТЬСЯ
логику векторных объектов и кривых
Базовые инструменты векторных
создавать иконки с использованием
Безье
редакторов и экспорт в SVG и PNG для
Boolean-операций
интерфейсов

3.

Растр VS Вектор
В чем разница?
Критерий
Растровая графика
Векторная графика
Основа
Пиксели (сетка точек)
Математические контуры
Масштабирование
Потеря качества при
увеличении
Неограниченное, без
потерь
Применение
Фотографии, текстуры,
сложные переходы
Иконки, логотипы, схемы,
шрифты
Редактирование
Пиксельное, ретушь,
коррекция
Контурное, изменение
формы, узлов

4.

АНАТОМИЯ ВЕКТОРНОГО ИЗОБРАЖЕНИЯ
Из чего строится векторное изображение:
▪ Опорная точка (узел) — координата на плоскости;
▪ Сегмент — линия между двумя узлами:
▪
Прямой (linear),
▪
Кривой (curve) — управляется рычагами;
▪ Контур (Path) — последовательность сегментов:
▪
Открытый — линия без заполнения,
▪
Замкнутый — можно заполнить цветом;
▪ Заливка (Fill) — цвет внутри замкнутого контура;
▪ Обводка (Stroke) — линия по границе контура.
«Уроки CorelDraw: Анатомия векторной иллюстрации»
www.interface.ru/home.asp?artId=23631

5.

КРИВЫЕ БЕЗЬЕ
Управление плавностью
плавный узел имеет направляющие рычаги
(handles);
⚫ длина рычага определяет силу изгиба;
⚫ угол рычага задаёт направление кривизны;
⚫ если рычаги лежат на одной прямой —
переход плавный;
⚫ если рычаги разорваны — образуется
острый угол.
⚫
Золотое правило: минимальное количество
узлов обеспечивает максимальную
плавность.

6.

ИНСТРУМЕНТ «ПЕРО»
Ошибка новичка: обводка формы множеством коротких сегментов.
Правильный подход: минимальное количество узлов + направляющие рычаги.

7.

ГЕОМЕТРИЧЕСКИЕ ПРИМИТИВЫ
Прямоугольник, Эллипс, Многоугольник, Линия
Кнопка
Иконка «плюс»
Переключатель
Иконка
«пользователь»
Прямоугольник + текст
Две пересекающиеся
Закругленный
Круг + форма туловища
полосы
прямоугольник + круг

8.

BOOLEAN-ОПЕРАЦИИ
Операция
Результат
Пример
применения
Объединение
(Unite)
Несколько форм
становятся одной
Сердце из двух
кругов и ромба
Вычитание
(Subtract)
Передняя форма
вырезает из задней
Полумесяц из двух
кругов
Пересечение
(Intersect)
Остаётся только
общая область
Сложная
геометрическая
форма
Исключение
(Exclude)
Всё, кроме
пересечения
Кольца, составные
знаки

9.

ПРИМЕР: ИКОНКА «СЕРДЦЕ»

10.

ТЕКСТ КАК ВЕКТОРНЫЙ ОБЪЕКТ
Текст остаётся редактируемым, пока не переведён в кривые.
Можно менять шрифт, кегль, межбуквенное расстояние.
Перевод в кривые (Convert to Path): буквы становятся
обычными контурами. Внешний вид не зависит от
установленного шрифта.
Когда переводить: логотипы, фирменные надписи. Сложные
типографические композиции.
Когда НЕ переводить: интерфейсные макеты для
разработчика (нужен реальный текст). Документы, где текст
может меняться.

11.

SVG-формат
SVG — язык векторной графики для
интерфейсов
SVG (Scalable Vector Graphics) — текстовое описание
векторных элементов.
Чёткость на экранах любой плотности (@1x, @2x, @3x).
Возможность изменения цвета через CSS.
Лёгкий вес, текстовый формат.
Открывается в браузере и текстовом редакторе.
Иконки, логотипы, схемы, интерфейсные элементы с изменяемыми
состояниями

12.

ВЕКТОРНЫЕ РЕДАКТОРЫ
Редактор
Ключевая особенность
Adobe Illustrator
Профессиональный стандарт, полный
набор инструментов
CorelDRAW
Сильные позиции в полиграфии и
рекламном производстве
Inkscape
Бесплатный редактор с поддержкой SVG
Figma
Векторная графика для интерфейсов
(рассматривается отдельно)
Цвет на экране — не «название», а набор числовых компонентов.

13.

ЭКСПОРТ: ВЫБОР ФОРМАТА
Перед экспортом проверить:
Границы артборда.
⚫ Отсутствие случайных невидимых объектов.
⚫ Корректность заливок и обводок.
⚫ Понятная структура контуров.
⚫
Формат
Назначение
SVG
Иконки, логотипы, схемы для
веб-интерфейсов
PNG
Растровое превью, сложные эффекты с
прозрачностью
PDF
Обмен макетами, печать, сохранение
векторного содержимого

14.

ЗАКЛЮЧЕНИЕ
«Дизайнер не рисует иконку — он проектирует систему,
где каждая форма подчиняется общим правилам,
а каждый пиксель имеет значение».