Розділ Комп’ютерна графіка

Лекція 2
Тема: Векторний графічний редактор
1. Поняття векторної графіки, особливості.
2. Загальна характеристика Inkscape.
3. Інтерфейс Inkscape.
4. Розмітка, лінійки, направляючі і сітки в Inkscape.
5. Направляючі в Inkscape.

1. Поняття векторної графіки, особливості.

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

Векторна графіка
У векторній графіці базовим елементом є лінія, яка описується
математичною формулою. Таке представлення даних компактніше, але побудова
об'єктів супроводжується неперервним перерахунком параметрів кривої у
координати екранного або друкованого зображення. Лінія є елементарним
об'єктом, якому притаманні певні особливості: форма, товщина, колір, тощо.
Любий об'єкт (прямокутник, еліпс, текст і навіть пряма лінія) сприймається як
криві лінії. Виключення складають лише імпортовані растрові об'єкти.
Векторні об'єкти завжди мають шлях, що визначає їх форму. Якщо шлях є
замкненим, тобто кінцева точка співпадає з початковою, об'єкт має внутрішню
ділянку, яка може бути заповненою кольором або іншими об'єктами. Всі шляхи
містять дві компоненти: сегменти та вузли.
Шлях уявляє собою маршрут, що з'єднує початкову та кінцеву точку.
 Розділ Комп’ютерна графіка
 Сегмент – окрема частина шляху, може бути як прямою, так і кривою
лінією.
 Вузол – початкова або кінцева точка сегмента.
Кожен елемент векторної графіки містить ці три основні елементи і дозволяє
їх редагування.
Векторний графічний редактор – спеціалізована програма, призначена для
створення та обробки векторних зображень. Такі програми використовуються в
роботі художників і дизайнерів різних напрямків, конструкторів,
мультиплікаторів, у сфері ділової графіки, для презентацій, публікації в Інтернеті
і т.п.
Векторні графічні редактори надають можливість створювати і редагувати
векторні зображення безпосередньо на екрані комп'ютера, а також зберігати їх у
різних векторних форматах.
Перелічимо основні інструменти векторних редакторів:
 Криві Безьє – дозволяють створювати прямі, ламані і гладкі криві, що
проходять через вузлові точки, з певними дотичними в цих точках.
 Набір геометричних фігур (примітивів).
 Заливка – дозволяє зафарбовувати обмежені області певним
кольором, або градієнтом.
 Текст створиться за допомогою відповідного інструменту, а потім
часто перетворюється в криві (у векторне зображення), щоб забезпечити
незалежність зображення від шрифтів, наявних (або відсутніх) на
комп'ютері, використовуваному для перегляду.
 Олівець – дозволяє створювати лінії "від руки".


Особливості векторної графіки

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

2. Загальна характеристика Inkscape.

 Розділ Комп’ютерна графіка
Inkscape – відкритий редактор векторної графіки, функціонально схожий з
Illustrator, Freehand, CorelDraw або Xara X і використовує стандарт W3C під
назвою Scalable Vector Graphics (SVG). У програмі підтримуються такі
можливості SVG як фігури, контури, текст, маркери, клони, альфа-канал,
трансформації, градієнти, текстури і угрупування. Inkscape також підтримує
метадані Creative Commons, правку вузлів, шари, складні операції з контурами,
векторизацію растрової графіки, текст по контуру, зверстаний у фігуру текст,
редагування XML-даних безпосередньо і багато іншого. Він імпортує файли в
таких форматах як JPEG, PNG, TIFF та інші, і експортує файли у форматі PNG,
так само як і в деяких векторних форматах.
Основною метою проекту Inkscape є створення потужного і зручного
інструменту для малювання, повністю сумісного з зі стандартами XML, SVG і
CSS. Ми також успішно розвиваємо спільноти користувачів та розробників.
Офіційний сайт — Inkscape.org

3. Інтерфейс Inkscape.
Інтерфейс векторного графічного редактора Inkscape складається з
керуючих елементів і функцій, покликаних зробити роботу художника простою і
зручною. Інтерфейс векторного графічного редактора Inkscape складається
головним чином з робочого вікна, в якому можна створювати і управляти
кресленнями. У вікні розташовані керуючі та інформаційні інструменти, робота з
якими описана на цій сторінці.
Вікно інтерфейсу Inkscape можна розділити на дев'ять основних областей:
 Розділ Комп’ютерна графіка

1. Головне меню (Головне меню у верхній частині вікна)

2. Панель інструментів
3. Контекстна панель управління
4. Розмітка, лінійки, направляючі та сітки
5. Панель елементів керування
6. Вікно інструментів
7. Полотно
8. Палітра
9. Рядок стану

Описані вище панелі інструментів і управління, доступні в Inkscape можуть

займати значний простір екрані монітора. Щоб зменшити розмір панелі
інструментів, виберіть у головному меню "Файл" –> "Налаштувати Inkscape ...".
Потім виберіть варіант "інтерфейс". Тут ви можете самостійно встановити великі
чи маленькі значки панелі команд, панелі елементів і т.д.

Головне меню
 Розділ Комп’ютерна графіка
Як і в більшості інших програм, головне меню Inkscape містить основні
функції роботи з програмою: робота з файлами, функції редагування та перегляду,
функції редактора роботи з текстом, фільтрами, об'єктами і контурами,
доповнення та довідкову інформацію.

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

Панель інструментів Inkscape розташована у верхній частині робочої

області екрана редактора одразу під головним меню. Панель інструментів
Inkscape містить значки-іконки, які викликають певні команди редактора. Ці
команди також доступні в головному меню або по комбінації клавіш. Панель
інструментів призначена для більш легкого доступу до найбільш
використовуваних функцій редактора. З панелі інструментів Inkscape в один клік
можна відкрити новий або існуючий документ, надрукувати його, завантажити
зображення, скасувати попередні команди, масштабувати, відкрити діалогове
вікно для налаштування властивостей документа і т.д. Кожен значок при
наведенні курсору миші відображає свою функцію за допомогою спливаючих
підказок.
Якщо всі значки панелі інструментів Inkscape не поміщаються на екрані, то
доступ до них може бути здійснений через кнопку з двома стрілочками з правого
краю панелі. Клацнувши по ним, ви побачите у вигляді меню всі інші команди
панелі, значки яких не поміщаються на панелі. Залежно від розміру екрана або
роздільної здатності монітора, значки можуть не поміщатися на панелі
інструментів Inkscape.

Вікно інструментів

Вікно інструментів Inkscape, складається з вертикального ряду кнопок,

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

В залежності від того, який інструмент вибраний у вікні інструментів

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

Полотно

Полотно або канва Inkscape є головною робочою областю програми. Це

основна частина інтерфейсу, оскільки саме тут користувач графічного редактора
створює і редагує малюнки. Полотно розташований посередині вікна програми і
схожий на зображення чистого аркуша паперу, розташованого на білому фоні. За
замовчуванням у вікні редактора сленва і зверху включені лінійки, для
визначення координат в пікселях. Значення за замовчуванням – видимість лінійки
і одиниці вимірювання можна змінювати в Властивостях документа.
Не дивлячись на те, що кордони відображуваного на полотні "листа"
визначають межі зображення для друку або збереження, при малюванні розмір
"листа" зовсім не обмежують область зображення. Ви навіть можете зробити
кордону "сторінки" та показані на малюнку вище тіні цих кордонів невидимими.
Налаштувати видимість меж сторінки можна у властивостях документа. Деякі
користувачі вважають за краще використовувати межі сторінки, інші
використовують для малювання весь простір полотна.

4. Розмітка, лінійки, направляючі і сітки в Inkscape

Лінійки розмітки
 Розділ Комп’ютерна графіка
Лінійка розмітки розташована вгорі і зліва полотна Inkscape. Ділення
лінійки розмітки визначають відстані в деяких одиницях, за замовчуванням в
пікселях. Змінити налаштування одиниць виміру можна у властивостях документа
в меню "файл" – "Властивості документа".
Коли покажчик миші знаходиться над полотном, на лінійці з'являються два
чорних трикутника, трикутника, які відображають на лінійці координати курсору
щодо в нижнього лівого кута сторінки. Ці координати X і Y можна побачити в
рядку стану (у нижньому правому куті вікна програми), поряд з параметром
масштабу Z.
Зверніть увагу на те, що SVG координати починаються в нижньому лівому
кутку документа як зазвичай прийнято геометрії в декартовій системі координат.
Комбінація клавіш CTRL + R дозволяє приховати або відобразити лінійки
розмітки Inkscape . Також це можна зробити в головному меню "Вид" – "Показати
або приховати" – "Лінійки".

5 Направляючі в Inkscape
Направляючі створюються в Inkscape користувачем для полегшення
малювання або побудови фігур. Напрямні "притягують" деякі інструменти, тобто,
дозволяють встановити положення інструментів точно по ним. Використання
направляючих полегшує користувачам вирівнювання об'єктів, що створюються за
допомогою миші. Щоб використовувати направляючі, клацніть покажчиком миші
на горизонтальній або вертикальній лінійці і, утримуючи кнопку миші
натиснутою, перетягніть з'явилася направляючу в ту точку полотна, де вона
повинна бути, після цього відпустіть кнопку миші. За допомогою горизонтальної
лінійки створюються горизонтальні напрямні, з вертикальною – вертикальні.
Як перемістити напрямні Inkscape?
При активному інструменті вибору F1, пересуньте курсор миші до
направляючої. Коли покажчик виявиться над нею, напрямна змінить свій колір на
червоний. Потім клацніть по направляючої і перетягніть її туди, куди ви хочете.
Як видалити направляючу в Inkscape? Щоб видалити напрямну, просто
перетягніть її на відповідну лінійку за допомогою інструменту вибору.
 Розділ Комп’ютерна графіка
Як відключити видимість напрямних в Inkscape? Щоб приховати напрямні,
без їх видалення, виберіть у головному меню "Вид" – "напрямні". Поєднання
клавіш для перемикання видимості направляючих Shift + |.

У головному меню "Файл" – "Властивості документа" можна перевизначити

налаштування за замовчуванням для направляючих. Можна вказати чи повинні
направляючі показуватися за замовчуванням, задати колір напрямних – колір
самої направляючою і колір її, коли над нею знаходиться кнуказатель миші.
Направляючі часто використовуються для розміщення об'єктів на полотні, в
цьому випадку рекомендується встановити прапорець "направляючі прилипають
при перетягуванні".
Сітка
 Розділ Комп’ютерна графіка
Щоб не використовувати велику кількість напрямних, може виявитися
корисним просто активувати сітку в Inkscape. Зробити це за допомогою головного
меню "Вид" – "Сітка" або по гарячій клавіші # (Shift + 3).
Сітки діляться на два типи: прямокутна і аксонометріческая. Параметри
сітки можуть бути визначені в головному меню "Файл" – "Властивості
документа". Найбільш поширеним є прямокутна сітка, яка складається з
вертикальних і горизонтальних ліній. Аксонометріческая сітка містить додатково
діагональні лінії і може бути цікава для технічних чи архітектурних креслень. На
малюнку нижче наведений приклад аксонометричній і прямокутної сіток Inkscape

Як користуватися сіткою в Inkscape

Використовуйте список, що розкривається в діалоговому вікні властивостей
документа (приклад на малюнку справа), щоб вибрати тип сітки, яку ви плануєте
використовувати використовувати, а потім натисніть кнопку "Створити". Під
фразою "Певні користувачем сітки" (для одного документа можуть бути визначені
декілька сіток) буде створена нова вкладка з параметрами створеної сітки. Потім
визначте одиниці, які ви хочете використовувати, визначте точку відліку по
горизонталі і вертикалі (X і Y) і відстань між сусідніми лініями сітки. При
використанні аксонометричній сітки з'являється додатковий параметр, що
визначає кут двох ліній сітки.

Галочка Включена. Відзначте її, щоб використовувати цю сітку в поточному

документі.
Галочка Видима. Цей прапорець визначає видимість сітки на полотні. При
вимкненому прапорці сітка невидима. Цей параметр задає значення за
замовчуванням для кожної сітки таким чином, що навіть якщо видимість в цьому
параметрі включена, то всеравно можна перемикати видимість сітки через меню
або по гарячій клавіші #. Тобто, якщо в головному меню "Вид" – "Сітка"
видимість сітки відключена, то сітка не буде відображатися на полотні, навіть
якщо встановлена галочка "Видима".
 Розділ Комп’ютерна графіка
Одиниці сітки. В якості одиниць виміру для сітки доступні міліметри, фути і
пікселі. Ви можете вибрати ту розмірність, яка найбільше відповідає вашим
потребам. Якщо особливих потреб немає, то використовуйте варіант за
замовчуванням – пікселі.
Точки відліку по X і Y. Ці параметри визначають початкову точку сітки
Inkscape . Значення за замовчуванням "0" (нуль), але іноді буває зручно змінити її,
особливо для визначення точки краю аркуша.
Інтервал по X і Y. Ці параметри визначають відстань між двома лініями
сітки. Ці інтервали можуть відрізнятися для горизонтальних і вертикальних ліній,
таким чином, щоб сітка може складатися з прямокутників.
Кут по X і Z. Ці параметри доступні тільки для аксонометричній сітки. Вони
визначають кути ліній сітки на осі X і Z.
Кольори ліній сітки. За замовчуванням для сітки використовується синій
колір, але цей параметр також можна змінити. Існує два типи ліній. Найбільш
часто використовуваним є лінія сітки, але коли використовується сітка з
маленьким кроком, і безліччю ліній, то відображаються основні лінії сітки. Вони
допомагають оцінити відстані. Інші кольори можуть бути визначені для кожного
типу лінії. Параметр "Основна лінія сітки кожні ..." визначає частоту основних
ліній. Зазвичай цей параметр дорівнює 5 або 10.
Показувати точки замість ліній Цей параметр доступний лише для
прямокутної сітки Inkscape . Лінії сітки іноді можуть заважати при роботі з
інструментами малювання. Цей параметр дозволяє відображати сітку у вигляді
крапок.

Панель параметрів прилипання

Панель параметрів прилипання дозволяє легко настроїти параметри

прилипання об'єкта Inkscape . Функції цієї панелі зручні для правильного і
точного розміщення об'єктів. Панель параметрів прилипання розташована
вертикально по правому краю робочої області вікна.

Палітра кольорів

Палітра кольорів Inkscape це швидкий доступ до квітів, вона ж дозволяє

призначити кольори до фігур Inkscape . Вона відображається в нижній частині
вікна програми, або може бути відкрита у вигляді окремого вікна. Для цього в
головному меню "Вид" треба вибрати "Зразки кольорів" або використовувати
комбінацію клавіш Shift + Ctrl + W.
 Розділ Комп’ютерна графіка
Як користуватися палітрою кольорів в Inkscape. Щоб знайти колір, який вам
подобається, просто прокрутіть бігунок внизу палітри і виберіть колір.
Налаштувати палітру кольорів можна, клацнувши по трикутнику в правому кутку
палітри і вибравши один із запропонованих варіантів.
Щоб застосувати колір до фігур "колір заливки", просто натисніть на колір
після вибору однієї або декількох фігур.
Щоб застосувати колір до контуру, натисніть клавішу Shift під час вибору
кольору.

Рядок стану Inkscape

Рядок стану – знаходиться в самому низу вікна програми Inkscape. Вона

відображає (зліва направо):
 Колір заливки і обведення об'єкта.
 Можливість швидкої роботи з шарами і перемикання між ними.
 Область повідомлень.
 Індикатор координат покажчика миші.
 Управління масштабом.

Контрольні запитання:
1. Що таке векторна графіка?
2. Які є основні інструменти векторних редакторів?
3. Які є особливості векторної графіки?
4. Використання векторної графіки.
5. Які ви знаєте редактори для роботи з векторною графікою?
6. Назвіть плюси і мінуси векторної графіки.