Одним з перших умінь, яке набуває людина у своєму житті, інколи ще навіть не навчившись говорити, є вміння малювати. Ми малюємо на папері, на асфальті, на полотні, на дошці. Але останнім часом охочих малювати все більше приваблює комп'ютер. Світ комп'ютерної графіки неосяжний. Це і кілька мільйонів кольорів у палітрі, це і можливість оживити картинку, це і різні ефекти, застосувати які, на звичайному папері, досить складно або неможливо взагалі. Де, як не у комп'ютері, можна доповнити вподобану картину великого художника своїми персонажами, та ще й змусити їх рухатися? І все це можна зробити, не маючи спеціальної освіти!.. Ви вже трохи знаєте про комп'ютерну графіку. Згадаймо таке.

Векторне зображення

 На сьогоднішній день векторна графіка відіграє велику роль. Її технології широко використовують як для друкарського дизайну, так, і у веб-дизайні. Упевнено можна казати, що більшість дизайнерів успішно використовують векторну графіку. Векторні зображення використовують для створення графічних об'єктів, для яких має значення збереження чітких контурів (креслення, схеми, логотипи, мапи, діаграми тощо) навіть при зміні розмірів. На відміну від растрової графіки для побудови векторного зображення використовують примітивні геометричні об'єкти (лінії, кола, криві, багатокутники). У файлі зображення зберігають відомості про типи графічних об'єктів, числові значення їхніх властивостей, необхідні для їх відтворення, а також дані про товщину і колір контурів об'єктів та колір і тип заповнення їхніх внутрішніх областей.

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

Векторна графіка

На відміну від растрової графіки, у векторній графіці базовим елементом є лінія, яка описується математичною формулою. Таке представлення даних компактніше, але побудова об'єктів супроводжується неперервним перерахунком параметрів кривої у координати екранного або друкованого зображення. Лінія є елементарним об'єктом, якому притаманні певні особливості: форма, товщина, колір, тощо. Любий об'єкт (прямокутник, еліпс, текст і навіть пряма лінія) сприймається як криві лінії. Виключення складають лише імпортовані растрові об'єкти.

Векторні об'єкти завжди мають шлях, що визначає їх форму. Якщо шлях є замкненим, тобто кінцева точка співпадає з початковою, об'єкт має внутрішню ділянку, яка може бути заповненою кольором або іншими об'єктами. Всі шляхи містять дві компоненти: сегменти та вузли.

Шлях уявляє собою маршрут, що з'єднує початкову та кінцеву точку.

Кожен елемент векторної графіки містить ці три основні елементи і дозволяє їх редагування.

Векторний графічний редактор

Векторний графічний редактор - спеціалізована програма, призначена для створення та обробки векторних зображень. Такі програми використовуються в роботі художників і дизайнерів різних напрямків, конструкторів, мультиплікаторів, у сфері ділової графіки, для презентацій, публікації в Інтернеті і т.п.

Векторні графічні редактори надають можливість створювати і редагувати векторні зображення безпосередньо на екрані комп'ютера, а також зберігати їх у різних векторних форматах.

Перелічимо основні інструменти векторних редакторів.

Заповнення об'єктів 

За допомогою кривих створюється контур об'єкта, всередині якого може бути заповнення (будь-який колір, штрихування або зображення). Заповнений об'єкт трактується як єдиний елемент, тобто при змінюванні форми об'єкта, заповнення заповнює всю його внутрішню ділянку. 

Заповнення можна розбити на 4 категорії:

Ось кілька сучасних векторних редакторів:

Adobe Illustrator: Це один з найпопулярніших і потужних векторних редакторів. Він має велику кількість інструментів та функцій для створення складних векторних зображень і ілюстрацій.

CorelDRAW: Це ще один популярний векторний редактор, який пропонує широкий спектр інструментів для створення векторних графічних зображень, дизайну логотипів, ілюстрацій та багато іншого.

Inkscape: https://inkscape.org/release/1.2/windows/64-bit/  Це безкоштовний векторний редактор з відкритим вихідним кодом. Він підтримує багато основних функцій, які зазвичай очікуються від векторного редактора, і доступний для операційних систем Windows, Mac OS і Linux.

Affinity Designer: Це векторний редактор, розроблений компанією Serif. Він пропонує потужні інструменти для створення векторних зображень, дизайну логотипів, ілюстрацій та інших графічних проектів.

Gravit Designer: Це безкоштовний векторний редактор, який доступний як веб-додаток, а також для Windows, Mac OS і Linux. Він має інтуїтивний інтерфейс і набір інструментів для створення векторних зображень.

Ось кілька онлайн векторних графічних редакторів, які можна використовувати:

Vectr (https://vectr.com/)

Gravit Designer (https://www.designer.io/)

Cliker https://www.clker.com/inc/svgedit/svg-editor.html?fbclid=IwAR2aKCiEbIaBsSJo2rrz2LOqpJk5UIcASuJsVM0cSVuJkduL1Jf4w4n1Kyw 

SVG-Edit (https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html)

Inkscape (https://inkscape.org/)

Boxy SVG (https://boxy-svg.com/)

Draw.io (https://app.diagrams.net/)

Lunacy (https://icons8.com/lunacy)

Method Draw (https://editor.method.ac/)

Figma (https://www.figma.com/)

Наявність і можливості редакторів можуть змінюватися з часом, тому рекомендується перевіряти актуальність та функціонал кожного редактора перед використанням.

Інтерфейс векторного графічного редактора Inkscape є досить зручним і функціональним. Локалізація виконана якісно, перекладені всі пункти меню, назви кнопок та інші елементи. При наведенні і затримці вказівника миші на кнопках – з’являється підказка з назвою кнопки. При виконанні дій з об’єктами у Рядку стану висвічуються підказки. Користування основними інструментами є інтуїтивно зрозумілим і подібним до комерційних векторних редакторів.

Після запуску Inkscape відкривається вікно, яке має наступний вигляд (розміщення панелей може дещо відрізнятися):

1 – Рядок заголовка

2 – Панель параметрів інструментів

3 – Панель інструментів

4 – Робоче поле

5 – Сторінка (полотно)

6 – Палітра

7 – Меню

8 – Панель команд

9 – Рядок стану 

Кожен інструмент має свою панель параметрів, налаштування яких дає можливість змінювати нарисований примітив до невпізнанності, а Палітра дозволяє швидко підібрати кольорову гаму об’єктів.

У меню згруповані команди для роботи з програмою та об’єктами на полотні. Рядок стану містить підказки по використанню обраних інструментів, інформацію про виділені примітиви, показує координати курсора та поточний масштаб сторінки тощо.

На Панелі інструментів векторного редактора розміщена 21 кнопка, кожна з яких має своє функціональне призначення.

У таблиці нижче представлено графічні зображення кнопок, назви інструментів та їх призначення. Так звані “гарячі клавіші” можуть значно полегшити створення малюнків, оскільки дозволяють обирати потрібний інструмент натискаючи відповідну клавішу або поєднання клавіш на клавіатурі.

Інструменти векторного редактора Inkscape

   Панель параметрів інструментів розширює можливості кожного інструмента і дозволяє налаштовувати його відповідно до потреб користувача. При цьому програма запам’ятовує останні налаштування. Якщо їх потрібно скинути на стандартні, це можна зробити останньою кнопкою в даній панелі (для кожного інструмента вона має свій вигляд і назву)

Практичне завдання.

Ознайомитися з функціоналом векторного редактора Inkscape. Створити просте зображення

Приклад простого зображення

Поради для Inkscape:

Для малювання рівної фігури Ctrl

Одинарне клацання по фігурі – для зміни розмірів

Два (окремі) клацання по фігурі – для нахиляння та обертання

Подвійне клацання по фігурі – для скруглення кутів (всіх)

Колір заливки та контура - можна побачити в лівому куті вікна. Налаштування контура та заливки - Ctrl+Shift+F


Або фрагмент картини Василя Кандинського

Автор. Графічна Віртуозка  (формат .png)

Автор. Графічна Віртуозка  (формат .jpeg)

Поради для Gravit Designer:

Для малювання рівної фігури - тримаємо Shift

Для зміни розмірів, повороту - одинарне клацання по фігурі. Для скруглення кутів - панель керування.

Кольори заливки та контура - на панелі керування.

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

Для роботи можна використати будь-який редактор векторної графіки:

Розширення для роботи з Inkscape в Google Chrome

Google-малюнки

Google-презентації

Векторний редактор

Векторний редактор з анімацією

Векторний редактор (можна з телефона)