Векторна графіка для початківців: як вона працює і з чого почати

Крок 1

Зрозумійте різницю між вектором і растром

Растрове зображення — фото чи малюнок у Photoshop — складається з фіксованої кількості пікселів. Збільшите його сильніше, ніж дозволяє роздільність, — побачите розмиття й «сходинки». Векторне зображення описує форми математично: «точка тут, крива до точки там, заливка такого кольору». Програма перемальовує його в будь-якому розмірі, тому, як пише Inkscape про свій формат, вектор дає чіткий друк і рендер за будь-якої роздільності.

• •у векторі роблять логотипи, іконки, пласкі ілюстрації, інфографіку, шрифти, схеми;
• •у растрі працюють із фото, цифровим живописом, текстурами, ретушшю;
• •растр можна перетворити на вектор трасуванням, але результат майже завжди треба доводити вручну;
• •вектор у растр — легко: будь-яка векторна програма експортує PNG потрібного розміру.

💡 Швидкий тест: збільште зображення в 10 разів. Краї лишилися ідеально чіткими — це вектор. З'явилися пікселі — растр.

Крок 2

Розберіть анатомію контуру

Будь-яка векторна форма — це контур (path). Він складається з вузлів (anchor points, nodes) і сегментів між ними: прямих або кривих. Криві у векторних програмах — це криві Безьє: форму кожного сегмента задають напрямні (handles), що виходять із вузлів. Контур буває відкритим (лінія) або замкненим (фігура). У контуру є заливка (fill) — колір усередині — та обведення (stroke) — лінія по краю з певною товщиною.

• •відкрийте будь-який простий SVG-файл у текстовому редакторі: у ньому видно елемент `<path>` з атрибутом `d`;
• •`d` — це список команд: M — перемістити точку, L — пряма лінія, C — кубічна крива Безьє, Q — квадратична, Z — замкнути контур;
• •велика літера означає абсолютні координати, маленька — відносні;
• •у кубічної кривої дві контрольні точки на сегмент — саме їх ви тягаєте мишею, коли рухаєте напрямні в програмі.

💡 Писати SVG вручну не обов'язково, але раз подивитися на код корисно: стає зрозуміло, чому зайвий вузол — це зайва команда, а не «просто точка».

Крок 3

Збирайте форми з простих фігур

Початківці часто одразу беруться за перо й малюють складну форму точка за точкою. Простіше й охайніше — зібрати її з кіл, прямокутників і багатокутників булевими операціями. У Figma їх чотири: Union (об'єднати), Subtract (відняти), Intersect (лишити перетин) і Exclude (лишити все, крім перетину). В Inkscape є булеві операції та інструмент Shape Builder.

• •хмара — кілька кіл і прямокутник, об'єднані в одну форму;
• •півмісяць — коло мінус зміщене коло;
• •крапля — коло й повернутий квадрат, об'єднані разом;
• •навчальне завдання: набір із 6 погодних іконок (сонце, хмара, дощ, сніг, блискавка, місяць) лише з простих фігур і булевих операцій.

💡 Тримайте однакову товщину обведення й однакові радіуси заокруглень у всьому наборі — саме це робить іконки «родиною», а не випадковою добіркою.

Крок 4

Опануйте перо: менше вузлів, кращі криві

Перо (Pen tool) потрібне для форм, які не зібрати з фігур: листок, хвиля, літера. Клік ставить кутовий вузол, клік із перетягуванням — вузол із напрямними для кривої. Принцип, на якому тримається охайний вектор: якомога менше вузлів. Плавна крива з трьох вузлів виглядає краще, ніж «пилка» з двадцяти.

• •ставте вузли в крайніх точках кривої — там, де вона найвища, найнижча, найлівіша чи найправіша;
• •тягніть напрямні горизонтально або вертикально, щоб криві виходили рівними; кут обмежує клавіша-модифікатор (в Illustrator це Shift);
• •вправа: обведіть пером фото листка або велику літеру, а потім спробуйте вдвічі зменшити кількість вузлів без втрати форми;
• •для логотипа перетворіть обведення на контур (stroke to path) перед передачею файлу: тоді лінія масштабуватиметься разом із формою й не залежатиме від налаштувань обведення.

Крок 5

Оберіть формат і безкоштовну програму

Формат залежить від того, куди піде файл. SVG — відкритий векторний формат для вебу: браузер показує його в будь-якому розмірі, а атрибут `viewBox` задає систему координат малюнка. PDF — зручний для друку й передачі: його відкриває майже будь-хто. EPS — старіший формат обміну, його ще просять деякі друкарні. AI — робочий формат Adobe Illustrator. Для соцмереж і презентацій експортуйте з вектора PNG потрібного розміру.

• •Inkscape — безкоштовний векторний редактор з відкритим кодом для Windows, macOS і Linux; основний формат — SVG, імпортує та експортує також AI, EPS, PDF, PNG;
• •Figma — має безкоштовний тариф Starter; зручна для іконок та інтерфейсів, є Copy as SVG і розділ Export;
• •Illustrator — галузевий стандарт за підпискою; див. гайд Illustrator для початківців;
• •що б ви не обрали, принципи з кроків 2–4 однакові всюди.

💡 Покажіть свій набір іконок у спільноті й спитайте конкретно: чи однакова товщина ліній, чи читаються іконки в маленькому розмірі, чи немає зайвих вузлів. Збільште скриншот, щоб було видно контури.