Одним з перших умінь, яке набуває людина у своєму житті, інколи ще навіть не навчившись говорити, є вміння малювати. Ми малюємо на папері, на асфальті, на полотні, на дошці. Але останнім часом охочих малювати все більше приваблює комп'ютер. Світ комп'ютерної графіки неосяжний. Це і кілька мільйонів кольорів у палітрі, це і можливість оживити картинку, це і різні ефекти, застосувати які, на звичайному папері, досить складно або неможливо взагалі. Де, як не у комп'ютері, можна доповнити вподобану картину великого художника своїми персонажами, та ще й змусити їх рухатися? І все це можна зробити, не маючи спеціальної освіти!.. Ви вже трохи знаєте про комп'ютерну графіку. Згадаймо таке.
Які види графіки існують?
Які особливості растрової графіки?
Які формати мають файли растрових зображень?
Векторне зображення
На сьогоднішній день векторна графіка відіграє велику роль. Її технології широко використовують як для друкарського дизайну, так, і у веб-дизайні. Упевнено можна казати, що більшість дизайнерів успішно використовують векторну графіку. Векторні зображення використовують для створення графічних об'єктів, для яких має значення збереження чітких контурів (креслення, схеми, логотипи, мапи, діаграми тощо) навіть при зміні розмірів. На відміну від растрової графіки для побудови векторного зображення використовують примітивні геометричні об'єкти (лінії, кола, криві, багатокутники). У файлі зображення зберігають відомості про типи графічних об'єктів, числові значення їхніх властивостей, необхідні для їх відтворення, а також дані про товщину і колір контурів об'єктів та колір і тип заповнення їхніх внутрішніх областей.
Векторне зображення — це зображення, що складається з простих геометричних об'єктів (ліній, кіл, кривих, багатокутників), які можна описати математичними рівняннями.
Векторна графіка
На відміну від растрової графіки, у векторній графіці базовим елементом є лінія, яка описується математичною формулою. Таке представлення даних компактніше, але побудова об'єктів супроводжується неперервним перерахунком параметрів кривої у координати екранного або друкованого зображення. Лінія є елементарним об'єктом, якому притаманні певні особливості: форма, товщина, колір, тощо. Любий об'єкт (прямокутник, еліпс, текст і навіть пряма лінія) сприймається як криві лінії. Виключення складають лише імпортовані растрові об'єкти.
Векторні об'єкти завжди мають шлях, що визначає їх форму. Якщо шлях є замкненим, тобто кінцева точка співпадає з початковою, об'єкт має внутрішню ділянку, яка може бути заповненою кольором або іншими об'єктами. Всі шляхи містять дві компоненти: сегменти та вузли.
Шлях уявляє собою маршрут, що з'єднує початкову та кінцеву точку.
Сегмент - окрема частина шляху, може бути як прямою, так і кривою лінією.
Вузол - початкова або кінцева точка сегмента.
Кожен елемент векторної графіки містить ці три основні елементи і дозволяє їх редагування.
Векторний графічний редактор
Векторний графічний редактор - спеціалізована програма, призначена для створення та обробки векторних зображень. Такі програми використовуються в роботі художників і дизайнерів різних напрямків, конструкторів, мультиплікаторів, у сфері ділової графіки, для презентацій, публікації в Інтернеті і т.п.
Векторні графічні редактори надають можливість створювати і редагувати векторні зображення безпосередньо на екрані комп'ютера, а також зберігати їх у різних векторних форматах.
Перелічимо основні інструменти векторних редакторів.
Криві Безьє - дозволяють створювати прямі, ламані і гладкі криві, що проходять через вузлові точки, з певними дотичними в цих точках.
Набір геометричних фігур (примітивів).
Заливка - дозволяє зафарбовувати обмежені області певним кольором, або градієнтом.
Заповнення об'єктів
За допомогою кривих створюється контур об'єкта, всередині якого може бути заповнення (будь-який колір, штрихування або зображення). Заповнений об'єкт трактується як єдиний елемент, тобто при змінюванні форми об'єкта, заповнення заповнює всю його внутрішню ділянку.
Заповнення можна розбити на 4 категорії:
однорідне заповнення одним кольором або штрихуванням;
градієнтне, при якому кольори або тіні поступово змінюються (лінійна, радіальна, конічна, прямокутна тощо);
візерункове, при якому об'єкт заповнюється повторювальними зображеннями (двоколірними або повноколірними);
текстурне заповнення (художні зображення).
Текст створиться за допомогою відповідного інструменту, а потім часто перетворюється в криві [2] (у векторне зображення), щоб забезпечити незалежність зображення від шрифтів, наявних (або відсутніх) на комп'ютері, використовуваному для перегляду.
Олівець - дозволяє створювати лінії "від руки"
Ось кілька сучасних векторних редакторів:
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/)
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. Інтерфейс користувача
Приклад простого зображення
Поради для Inkscape:
Для малювання рівної фігури Ctrl
Одинарне клацання по фігурі – для зміни розмірів
Два (окремі) клацання по фігурі – для нахиляння та обертання
Подвійне клацання по фігурі – для скруглення кутів (всіх)
Колір заливки та контура - можна побачити в лівому куті вікна. Налаштування контура та заливки - Ctrl+Shift+F
Або фрагмент картини Василя Кандинського
Автор. Графічна Віртуозка (формат .png)
Автор. Графічна Віртуозка (формат .jpeg)
Поради для Gravit Designer:
Для малювання рівної фігури - тримаємо Shift
Для зміни розмірів, повороту - одинарне клацання по фігурі. Для скруглення кутів - панель керування.
Кольори заливки та контура - на панелі керування.
Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.
Для роботи можна використати будь-який редактор векторної графіки:
Розширення для роботи з Inkscape в Google Chrome
Google-малюнки
Векторний редактор з анімацією
Векторний редактор (можна з телефона)