mozok.click » Інформатика » Комп'ютерна графіка. Векторний графічний редактор. Створення простих та складених векторних зображень
Інформація про новину
  • Переглядів: 5045
  • Автор: admin
  • Дата: 15-01-2018, 08:11
15-01-2018, 08:11

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

Категорія: Інформатика

 

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

 

23.1. Що таке комп’ютерна графіка?

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

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

Комп’ютерна графіка — це сукупність методів, прийомів і засобів створення та опрацювання графічних зображень за допомогою комп’ютера.

Сучасні апаратні та програмні засоби (мал. 23.1) значно розширюють спектр застосування комп’ютерної графіки. Це зручні інструменти для роботи з графічними зображеннями не лише для професіоналів, а й для пересічних користувачів.

Мал. 23.1

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

23.2. Як кодуються текстові, графічні та звукові дані?

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

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

Мал. 23.2

Дискретизація (від англ. discretisation) — процес усунення неперервності (часової та просторової) аналогових сигналів — носіїв даних.

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

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

Наочним прикладом часової дискретизації є кодування звуку за допомогою комп’ютера — приведення до цифрової форми (оцифровка). До комп’ютера надходить не сам звук (звукова хвиля), а електричний сигнал, зареєстрований деяким пристроєм, наприклад мікрофоном, радіо тощо.

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

Розрізняють два основні методи створення та кодування графічних зображень: растровий і векторний.

Растрове зображення складається з точок — пікселів відповідних кольорів і нагадує аркуш паперу в клітинку, на якому кожна клітинка зафарбована певним кольором.

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

Кожний растровий малюнок складається з певної кількості точок на одній горизонталі та одній вертикалі, які характеризують розмір малюнка. Наприклад, для операційної системи Windows типові розміри екрана монітора в пікселях можуть становити 640 х 480, 1024 х 768, 1280 х 1024. Що більша кількість пікселів міститься на екрані за одних і тих самих геометричних розмірів малюнка, то вища якість відтворення малюнка.

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

Обсяг файла, що містить растрове графічне зображення, — це переважно добуток розмірів (кількість пікселів за шириною й висотою) цього

зображення на глибину кольору — кількість бітів, що необхідна для кодування кольору пікселя.

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

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

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

Недоліком векторної графіки є «неприродність» малюнка. Природа «уникає» прямих ліній, і не завжди малюнок можна скласти з кіл і прямих ліній без втрати якості. Через це векторну графіку використовують здебільшого для побудови креслень, технічних та стилізованих малюнків, шрифтів, карт. Крім того, у векторних малюнках нечітко відтворюється колористичність відтінків.



23.3. Що розуміють під колірною моделлю?

Серед кольорів розрізняють: некольорові — білий, чорний, відтінки сірого; кольорові — прості (чисті) та змішані. Змішані кольори отримують унаслідок змішування кольорів.

Колірна модель — це спосіб утворення кольору шляхом змішування кольорів.

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

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

Таблиця 23.1

Колірна модель

Базові кольори моделі

Спосіб утворення кольору

RGB

Червоний (Red), зелений (Green), синій (Blue)

Будь-який колір складається з трьох основних (червоний, зелений, синій) та додаткових (блакитний, пурпурний, жовтий)

CMYK

Додаткові: блакитний (Cyan), пурпурний (Magenta), жовтий (Yellow) та ключовий — чорний (blacK)

До ключового кольору (чорного) додаються блакитний, пурпурний та жовтий, які доповнюють основні (відповідно червоний, зелений, синій) до білого

Колірна модель

Базові кольори моделі

Спосіб утворення кольору

HSB

Відтінок кольору — фон (Hue), контрастність (Saturation), яскравість (Brightness)

Колір вибирається з палітри, де фон — це номер кольору в спектральній палітрі, насиченість — його інтенсивність, яскравість — вміст чорної фарби

RGB (від англ. Red, Green, Blue — червоний, зелений, синій) — це найбільш поширений спосіб кодування кольору. Використовується під час відображення зображення на екрані монітора комп’ютера чи телевізора, демонстрації презентацій, відеофрагментів, графіки. Будь-який колір можна отримати внаслідок зміни яскравості основних кольорів — червоного, зеленого та синього (мал. 23.5). У моделі RGB кожний з основних кольорів може набувати значень від 0 до 255. Наприклад, RGB(255,0,0) відображатиметься як червоний, оскільки параметр червоного кольору заданий його найбільшим значенням, а інші дорівнюють 0.

CMYK (від англ. Cyan, Magenta, Yellow, blacK — блакитний, пурпурний, жовтий, чорний) — відповідає малюванню фарбами на паперовому аркуші та використовується під час створення зображень для подальшого їх друкування за допомогою кольорового принтера. Це можуть бути рекламні плакати, фотографії, карти тощо. У цій моделі кожний з основних кольорів може набувати значень від 0 до 100 (мал. 23.6). Ці кольори отримують у результаті віднімання з білого кольору основних кольорів моделі RGB. Чорний колір задається окремо. При збільшенні кількості фарби зменшується яскравість кольору.

HSB (від англ. Hue, Saturation, Brightness — тон, насиченість, яскравість) — використовується для опису кольорів з моделей RGB і CMYK та є найбільш наближеною моделлю до сприйняття кольору оком людини (мал. 23.7).

Компонентами моделі HSB є:

• тон (Hue) — конкретний відтінок: червоний, жовтий, зелений, пурпурний тощо;

• насиченість (Saturation) — характеризує інтенсивність або чистоту кольору: зменшуючи насиченість, ми розбавляємо його білим кольором;

• яскравість кольору (Brightness) — залежить від кількості чорної фарби, доданої до певного кольору: що менше чорної фарби, то більша яскравість кольору.

Для відображення на моніторі комп’ютера модель HSB перетвориться

на RGB, а для друку на принтері — на модель CMYK.

Діапазони кольорів різних моделей не збігаються, тому точне переведення заданого кольору з однієї моделі в іншу неможливе. Наприклад, під час друкування зображення після його перегляду на екрані монітора відбувається конвертування зображення з моделі RGB у CMYK. Є графічні редактори, які підтримують різні колірні моделі: тоді на екрані монітора можна побачити, який вигляд матиме комп’ютерне зображення на папері.

Вправа 1. Утворення кольорів.

Завдання. Проаналізуйте, як зміна яскравості впливає на колір.

1. Завантажте графічний редактор Paint за допомогою вказівки Пуск/Усі програми/Стандартні/Paint.

2. На вкладці Початок у групі Кольори оберіть інструмент Редагування кольорів

3. У квадраті з кольорами в правій частині вікна Редагувати палітру клацніть мишею на кольорі обраного відтінку (мал. 23.7).

4. За допомогою повзунка у правій частині вікна обирайте світліші й темніші кольори обраного відтінку. Визначте, як змінюються при цьому значення параметрів Відтінок, Контраст, Яскравість.

5. Повторіть дії п.3 для іншого обраного кольору. Зробіть висновки про зміну кольору за різних значень параметра Яскравість.

6. Натисніть кнопку Скасувати та закрийте вікно графічного редактора.

23.4. Які параметри графічних зображень впливають на їхню якість?

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

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

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

Роздільна здатність вимірюється переважно кількістю крапок, розміщених на відрізку розміром один дюйм (англ. dpi — dots per inch — крапок на дюйм).

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

• оптичної роздільної здатності ока — око не розрізняє дуже дрібних деталей;

• роздільної здатності обладнання — зображення спрощується до максимальної роздільної здатності приладу.

Є й інші одиниці вимірювання роздільної здатності: растрової

графіки і сканерів — у spM — samples per inch (зразки, екземпляри на дюйм); моніторів — у ppi — pixel per inch (пікселі на дюйм).

Орієнтовна роздільна здатність різного устаткування:

сканер — 600-2400 dpi; монітор — 72-96 ppi; принтер — 300-1200dpi; проектор — 2400 dpi.

Обсяг файла зображення вимірюється в байтах (Кб, Мб), залежить від глибини кольору, обраної колірної моделі, способу кодування, роздільної здатності для растрового зображення та складності графічних примітивів — для векторного.

23.5. У яких форматах можна зберігати графічні файли й у чому їхня відмінність?

Є багато форматів для запису графічних зображень у файл. У деяких з них підтримується тільки растрова або тільки векторна графіка,

в інших — обидва типи графіки. Розглянемо найпоширеніші формати графічних файлів (табл. 23.2).

Таблиця 23.2

Графічний

формат

BMP (Bit Map Picture)

Принцип побудови графічних зображень

Растровий

Особливості формату

Підтримується в будь-яких Windows-сумісних програмах. Файли в цьому форматі мають великий обсяг Підтримується в усіх графічних програмах, при стисненні файлів не відбувається втрат

GIF (Graphics Interchange Format)

Растровий

Файли цього формату займають менше місця порівняно з файлами в форматі BMP, що містять те саме зображення. Зменшення обсягу файлів досягається завдяки використанню алгоритмів стиснення, але це відбувається за рахунок втрат у палітрі кольорів малюнка. Маленька глибина кольорів — 8 біт. Графічні зображення у форматі GIF можуть мати прозорі області. Використовується для запису малих графічних форм або зображень із чіткими краями

JPEG (Joint Photographic Expert Group)

Растровий

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

PNG (Portable Network Graphics)

Растровий

Поєднує найважливіші характеристики форматів GIF і JPG. Забезпечує ефективне стиснення без втрат. Зображення цього формату можуть мати прозорі області

TIFF (Tagged Image File Format)

Растровий

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

SVG (Scalable Vector Graphics)

Векторний

Масштабований векторний формат. Текст у графіці SVG є текстом, а не зображенням, тому його можна виділяти й копіювати, він індексується пошуковими машинами

WMF (Windows Metafile Format)

Векторний і растровий

Формат використовується для збереження векторних зображень Колекції картинок Microsoft. Якщо прочитати файл WMF у векторному графічному редакторі, то одержимо векторний малюнок. Якщо той самий файл прочитати в растровому редакторі, то одержимо растрове зображення

EPS

(Encapsulated

PostScript)

Векторний і растровий

Використовується переважно для друку в професійній поліграфії. Містить як векторні зображення, так і растрові

PDF (Portable Document Format)

Векторний і растровий

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

Для розміщення на веб-сторінках в Інтернеті використовують растрові зображення у форматах JPG, GIF, PNG, оскільки ці формати передбачають стискання даних, і файли мають менший обсяг, ніж відповідні файли форматів без стискання.

Вправа 2. Растрові формати графічних файлів.

Завдання. Збережіть зображення Берегиня (Олег Шупляк)^рд (мал. 23.8) у форматах PNG, BMP, GIF і проаналізуйте якість зображення та обсяг файла в кожному з форматів.

1. У власній структурі папок створіть папку Графіка та в ній папку Формати. Скопіюйте до неї файл Берегиня (Олег Шупляк).jpg з папки Комп’ютерна графіка.

2. Клацніть правою кнопкою миші на скопійованому файлі та оберіть вказівку Відкрити за допомогою/Paint.

3. Відкрийте меню роботи з файлами за допомогою інструмента

в лівій верхній частині вікна. Наведіть вказівник миші на вказівку Зберегти як та оберіть Зображення у форматі GIF (мал. 23.9).

Мал. 23.9

4. Проаналізуйте, чи змінилась якість зображення. Щоб зробити висновок, збільште масштаб відображення зображення. Закрийте вікно графічного редактора.

5. Послідовно знову відкрийте вихідний файл у форматі JPG та збережіть його у форматах BMP та PNG. Оцініть якість отриманих зображень. Закрийте вікно графічного редактора.

6. У папці Графіка/Формати своєї структури папок оберіть подання Таблиця (мал. 23.10). Проаналізуйте обсяг файлів кожного формату. У якому з форматів обране зображення має найменший обсяг файла? Кращу якість? Зробіть висновки.

1. Для чого використовується комп’ютерна графіка?

2. Які типи зображень використовуються в комп’ютерній графіці?

3. У чому полягають переваги та недоліки растрових і векторних зображень?

4. Що таке графічні примітиви у складі векторного зображення?

5. Чи можна визначити розширення імені графічного файла, переглядаючи зображення, що міститься в файлі? Чи залежить якість зображення від типу файла?

6. Які особливості кодування текстових, графічних і звукових даних?

7. Що означає вираз «оцифровка зображення, фото»?

8. У чому полягають принципи кодування кольору в колірних моделях RGB, CMYK, HSB?

9. Графічні файли яких форматів використовують для розміщення на веб-сторінках в Інтернеті?

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

Критерії порівняння

Растрове зображення

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

     

Результати заповнення таблиці обговоріть у парі.

2. Пограйте в гру «Растрове чи векторне»: один з учасників гри наводить приклад зображення, а інший називає, до якого виду комп’ютерної графіки його слід віднести. Наприклад, фотографія — растрове, креслення — векторне тощо. Обґрунтуйте свій вибір, спираючись на властивості кожного з видів графіки.

3. Наведіть приклади зображень, які недоцільно зберігати у векторних форматах.

4. Розгляньте кодування кольору в моделі RGB, за якого яскравість кольорів кодується одним бітом — має значення 0 або 1 (мал. 23.11). Обговоріть, якою є глибина кольору при такому кодуванні. Як залежить кількість можливих кольорів при такому кодуванні від кількості бітів коду кожного кольору?

1. Використовуючи модель яскравості кольорів (мал. 23.12) за адресою https://www.geogebra.Org/o/hF5UhSPQ за допомогою повзунків для кожного з трьох основних кольорів визначте, як зміна яскравості від 0 до 255 впливає на відображення кольору.

Мал. 23.12

2. За допомогою онлайнового конвертера кольорів за адресою http://colorscheme.ru/color-converter.html проаналізуйте, як утворюються кольори в колірній моделі RGB. Для цього задайте значення від 0 до 255 для червоного, зеленого та синього кольорів і перегляньте, якому кольору відповідає вказаний набір значень. Наприклад, колір RGB(0,100,100) відображений на малюнку 23.13.

Мал. 23.13

Визначте, як кожний із вказаних кольорів подається в колірній моделі CMYK.

3. Розгляньте приклад аналогового й дискретного подання графічних даних на прикладі графіка функції у = х2 (мал. 23.14, а, б). Наведіть інші приклади аналогового й дискретного подання даних.

4. Визначте, у чому полягають методи таблично-хвильового (Wave-Table) синтезу та FM (Frequency Modulation) для кодування звуку. Для цього скористайтесь матеріалами з файла Методи кодування звуку з папки Комп’ютерна графіка. Обговоріть особливості, переваги та недоліки кожного із цих методів.

Дослідіть, як зміна глибини кольору впливає на відображення зображення та обсяг файла. Для цього відкрийте в середовищі графічного редактора Paint зображення Колаж.рпд та збережіть його у форматі bmp з різною глибиною кольору, обираючи послідовно тип файла Монохромний рисунок (глибина кольору — 1 біт), 16-колірний рисунок (глибина кольору — 4 біти), 256-колірний рисунок (глибина кольору — 8 біт) (мал. 23.15). Для збереження кожного наступного файла відкривайте вихідне зображення. Створіть і заповніть таблицю аналізу результатів дослідження.

для чого використовують векторні графічні редактори;

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

24.1. Для чого використовують векторні графічні редактори?

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

Для створення та опрацювання векторних зображень використовують векторні графічні редактори.

Популярними сьогодні векторними графічними редакторами є Adobe Illustrator, Corel Draw, Freehand, Xara X, Inkscape.

Векторний редактор Inkscape є вільно поширюваним програмним продуктом з відкритим кодом. Цей редактор є кросплатформним — розробники надають інсталяційні пакети для різних операційних систем: Windows, Mac OS X, Linux. Основним форматом зображень є SVG, проте всі проекти, створені в Inkscape, можна експортувати у формати, які використовуються в браузерах чи типографіях.

Завантажити Inkscape, як і інші програми, можна за допомогою

відповідної вказівки з головного меню або ярлика

програми


24.2. Які засоби векторного графічного редактора використовують для створення графічних об’єктів та налаштування їхніх властивостей?

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

льорів у нижній частині екрана, Панель інструментів, рядок меню, що містить вказівки для роботи з файлом та окремими об’єктами зображення (мал. 24.1).

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

на Панелі параметрів інструментів можна

обрати форму фігури — багатокутник чи зірка, кількість кутів, відношення радіусів тощо. Управляти відображенням панелей можна за домогою відповідних вказівок з меню Перегляд/Показати/Сховати (мал. 24.2).

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

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

Мал. 24.2

Щоб змінити розміри об’єкта, обернути чи нахилити його, слід спочатку виділити об’єкт за допомогою інструмента Позначення і трансформація об’єкта

Після цього навколо

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

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

Вказівки меню Об’єкт (мал. 24.6) використовують і для зміни інших властивостей об’єктів. За їх допомогою можна змінювати порядок розміщення об’єктів, групувати кілька об’єктів в один, вирівнювати та компонувати об’єкти, виконувати обертання на кут 90° чи віддзеркалювати об’єкт, налаштовувати колір і стиль заливки та контуру об’єкта тощо.

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

Крім кольору та способу заливки, можна також обрати ефекти Розмиття та Непрозорість. Значення 0 % для ефекту Непрозорість зробить об’єкт повністю прозорим. Задаючи значення, відмінне від 100 %, можна зробити об’єкт частково прозорим, у цьому разі частково буде видно об’єкт, що розташований під ним.

Вправа 1. Середовище Inkscape.

Завдання. Ознайомтесь із призначенням інструментів векторного графічного редактора Inkscape, особливостями малювання фігур та налаштування їхніх властивостей.

1. У власній папці створіть папку Векторна графіка.

2. Виконайте вказівку Пуск/Усі програми/Inkscape.

3. Відкрийте меню, ознайомтесь із набором вказівок кожного з пунктів меню.

4. Послідовно наведіть вказівник миші на кожний з інструментів панелей, розташованих у лівій та правій частинах вікна. За допомогою спливаючих підказок визначте назви інструментів.

5. Оберіть інструмент

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

в нижній частині вікна оберіть колір на власний розсуд.

6. На Панелі параметрів інструментів у верхній частині вікна оберіть форму фігури — зірка. Виконайте протягування мишею на полотні, щоб намалювати зірку бажаного розміру.

7. Оберіть інструмент Позначення і трансформація об’єкта

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

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

9. Виконайте вказівку Об’єкт/Заповнення та штрих. На вкладці Заповнення послідовно обирайте різні способи заливки: суцільний колір, лінійний градієнт, радіальний градієнт, візерунок. Поекспериментуйте з різними способами заливки. Визначте вплив ефектів Розмиття та Непрозорість на відображення фігури. Оберіть заповнення фігури на власний розсуд.

10. Збережіть результати у файлі з іменем Зірка в папці Векторна графіка своєї структури папок.

24.3. Як створювати малюнки з кривих і ламаних?

Для малювання довільних контурів, яків растровому графічному редакторі Paint, можна скористатися інструментом

дія якого нагадує

малювання звичайним олівцем від руки.

На відміну від інших графічних редакторів, Inkscape не містить окремого інструмента для малювання прямих ліній. Малювати прямі та криві

лінії можна за допомогою інструмента

При цьому, щоб намалювати

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

За замовчуванням за допомогою інструмента

малюють так звані

криві Безьє. Такі криві визначаються чотирма точками, дві з яких називаються вузлами кривої. Дві інші точки є маркерами напрямків відповідно до кожного з вузлів (мал. 24.8). Крива розміщується по дотичній до лінії напрямку.

Криві Безьє запроваджено в 1962 р. П’єром Безьє з автомобілебудівної компанії Рено, хоча ще в 1959 р. використовувались Полем де Кастельє з компанії «Сітроен», але його дослідження не публікувались і приховувались компанією як комерційна таємниця до кінця 1960-х.

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

за допомогою інструмента

Після вибору цього інструмента вздовж

кривої будуть відображені вузли, які можна переміщувати, щоб отримати криву необхідної форми.

24.4. Як до зображення додати текст і розмістити його вздовж контуру?

Як і в інших графічних редакторах, до створеного зображення в середовищі Inhscape можна додавати текстові

написи. Для цього використовують інструмент

з Панелі інструментів. Створений текстовий напис можна редагувати та форматувати. Для виконання дій з текстом використовують вказівки меню Текст (мал. 24.9).

Налаштувати параметри форматування тексту можна за допомогою вказівки Текст/Текст та шрифт.

Щоб текст розміщувався вздовж кривої або контуру фігури, слід виділити текстовий напис і відповідний графічний об’єкт при натисненій клавіші Shift та виконати вказівку Текст/Розмістити по контуру.


24.5. Як розміщувати об’єкти в різних шарах та опрацьовувати різношарові зображення?

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

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

перемістити його вище чи

нижче

перейменувати, двічі клацнувши на його імені,

показати чи приховати

заблокувати чи розблокувати

. Вибір

вказівки Шар/Додати шар або відповідного інструмента приводить до відображення вікна Додавання шару (мал. 24.12), у якому слід задати ім’я нового шару та спосіб розміщення відносно поточного шару.

Вправа 2. Багатошарове зображення.

Завдання. Створіть зображення, що складається з трьох різнокольорових фігур різної форми, що різміщені в різних шарах. Змініть порядок розташування шарів.

1. У векторному графічному редакторі Inkscape створіть новий документ. Збережіть його з іменем Фігури в папці Векторна графіка своєї структури папок.

2. На палітрі кольорів оберіть жовтий колір. Намалюйте фігуру у формі зірки.

3. Виконайте вказівку Шар/Шари. В області завдань Шари (мал. 24.11) двічі клацніть на імені шару та змініть його на Зірка.

4. Оберіть інструмент

щоб додати новий шар. У вікні Додавання шару (мал. 24.12) введіть ім’я шару Круг.

5. На палітрі оберіть синій колір. Намалюйте круг за допомогою відповідного інструмента. Щоб отримати круг, а не еліпс, утримуйте натисненою клавішу Shift.

6. Виконайте вказівку Шар/Додати шар. Задайте ім’я шару Прямокутник.

7. На палітрі оберіть червоний колір. Намалюйте прямокутник за допомогою відповідного інструмента.

8. В області завдань Шари виділіть шар Круг. Оберіть інструмент

щоб

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

9. Збережіть результати роботи.

Вправа 3. Значок папки.

Завдання. Засобами графічного редактора Inkscape створіть значок папки за зразком (мал. 24.14).

1. У векторному графічному редакторі Inkscape створіть новий документ. Збережіть його з іменем Значок папки в папці Векторна графіка своєї структури папок.

2. Намалюйте в центрі полотна прямокутник за допомогою інструмента Створення прямокутників і квадратів

3. Продублюйте цей прямокутник за допомогою вказівки меню Зміни/Дублювати.

4. Перемістіть верхній прямокутник трохи вгору. Для цього виберіть його за допомогою інструмента Позначення і трансформація , якщо навколо

нього відображено маркери зміни розміру (мал. 24.15) — натискайте на клавіатурі клавішу Т.

5. Продублюйте прямокутник двічі й розташуйте створені копії нижче основного зображення.

6. Виділіть перші два прямокутники при натисненій клавіші Shift і згрупуйте їх за допомогою вказівки Об’єкт/Групувати.

7. Створіть ярличок для папки, використавши один зі створених раніше прямокутників, розміщених нижче. Виділіть цей прямокутник, зменшіть його

розмір, оберіть інструмент

та заокругліть його кути за допомогою

круглого маркера (мал. 24.16), перемістіть у верхню частину майбутньої папки, як показано на малюнку 24.17.

8. Виділіть обидва об’єкти (ярлик і папку) при натисненій клавіші Shift і використайте вказівку меню Об’єкт/Групувати.

9. Змініть колір прямокутника, що залишився в нижній частині полотна, на червоний, щоб не плутати його з іншим об’єктом.

10. У меню Об’єкт оберіть вказівку Вирівняти та розподілити... й за допомогою інструментів у відповідній області завдань вирівняйте об’єкти один відносно одного, як на малюнку 24.18.

11. За потреби клацніть на червоному прямокутнику, щоб маркери зміни розмірів змінилися маркерами обертання та нахилу, — стрілка над центром угорі стала горизонтальною.

12. Виконайте протягування за маркер нахилу вправо, щоб перетворити прямокутник на паралелограм, після чого виділіть усі фігури і здійсніть вирівнювання за лівою межею (мал. 24.19).

13. Намалюйте вкладений у папку аркуш паперу, щоб було зрозуміліше, що зображено папку. Для цього знову оберіть інструмент Створення прямокутників і квадратів і намалюйте поверх папки білий чи світло-жовтий

прямокутник трохи меншого розміру, ніж сама папка (мал. 24.20).

14. Додайте новий шар. Для цього виконайте вказівку меню Шар/Дода-ти шар. Надайте новому шару ім’я Шар 2. Виділіть червоний прямокутник і виконайте вказівку Шар/Пересунути позначене до шару та вкажіть Шар 2.

15. Змініть колір червоного прямокутника на жовтий. Отримаємо зображення, як на зразку (мал. 24.14).

16. Збережіть результати роботи.

1. Для чого призначені векторні графічні редактори?

2. Для чого в графічному редакторі використовують лінійки й сітку? Як їх відобразити?

3. Які графічні примітиви можна використати у векторному графічному редакторі Inkscape для створення зображень? Які властивості об’єктів при цьому можна змінювати?

4. Які способи заливки можна застосувати до об’єктів зображення?

5. За допомогою яких засобів графічного редактора Inkscape можна обертати, відображати й масштабувати об’єкти?

6. Чому інструменти на Панелі параметрів об’єктів змінюються при виборі іншого інструмента?

7. Які особливості малювання ліній у графічному редакторі Inkscape?

8. Як додати текстові написи до зображення? Які дії слід виконати, щоб розмістити текст уздовж контуру фігури, яка є на зображенні?

9. Як згрупувати кілька фігур в один об’єкт?

10. Як розмістити зображення в різних шарах? Які інструменти редактора Inkscape можна використати для управління шарами?

1. Обговоріть, що мають спільного та чим відрізняються растровий графічний редактор Paint і векторний Inkscape. За результатами побудуйте діаграму Венна.

2. Складіть одне для одного інструкцію малювання деякого зображення в середовищі редактора Inkscape. Намалюйте зображення за інструкцією, запропонованою вашим сусідом чи сусідкою.

3. Ознайомтесь із галереєю зображень, створених засобами графічного редактора Inkscape http://inkscape.deviantart.com/favourites/?offset=72. Обговоріть, які фрагменти зображень могли бути створені за допомогою кривих Безьє.

4. Розгляньте піктограми до розділів на сайті http://edufuture.biz, зокрема відображені на малюнку 24.21. Обговоріть, за допомогою яких інструментів векторного графічного редактора можна створити такі піктограми. Запропонуйте одне одному алгоритм створення однієї з таких піктограм.

1. Створіть засобами векторного графічного редактора заготовки розма-льовок для дошкільнят за зразками (мал. 24.22).

2. Створіть засобами векторного графічного редактора піктограми для позначення прогнозу погоди (мал. 24.23).

3. Створіть засобами векторного графічного редактора інструменти для програвача мультимедіа (мал. 24.24). Розробіть власний дизайн інструментів.

4. Створіть інформаційні таблички для кабінетів фізики, хімії чи біології, які міститимуть назву кабінету, його логотип — маленьке зображення, що відображає відповідну науку, назву класу.

Вправа 4. Фігурний текст.

Завдання. Дослідіть особливості створення фігурного тексту в середовищі графічного редактора Inkscape. Скористайтесь інструкціями за адресою

h ttp://inkscape. pain t-net. ги/ ?id=23.

Проект «Обираємо майбутню професію»

Створіть постер про професію, яку будете представляти на «Ярмарці професій». Розмістіть на постері логотип, створений засобами графічного редактора, та напис із назвою професії.

Проект «Е-урядування»

Розробіть ескіз паспорта громадянина України у вигляді ID-картки.

СТВОРЕННЯ ПРОСТИХ ВЕКТОРНИХ ЗОБРАЖЕНЬ

Як створювати прості векторні зображення в середовищі векторного графічного редактора; як змінювати значення властивостей графічних об’єктів; як зафарбовувати об’єкти, використовуючи однорідні, градієнтні, візерункові й текстурні заливки.

У власній структурі папок створіть папку Практична робота 10.

Під час виконання практичних завдань пам’ятайте про правила безпеки життєдіяльності при роботі з комп’ютером!

Завдання 1. Дитяче свято (8 балів)

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

Завдання 2. Прапори (12 балів)

Створіть у середовищі векторного графічного редактора зображення прапора України та прапорів країн-сусідів України. Збережіть результат у файлі з іменем Прапори в папці Практична робота 10 своєї структури папок.

Завдання 3. Піктограми (12 балів)

Створіть у середовищі векторного графічного редактора зображення шести піктограм. Скористайтеся зразками, поданими на малюнку 25.1, або придумайте власні піктограми. Збережіть результат у файлі з іменем Піктограми в папці Практична робота 10 своєї структури папок.

СТВОРЕННЯ СКЛАДЕНИХ ВЕКТОРНИХ ЗОБРАЖЕНЬ

Як створювати складені векторні зображення в середовищі векторного графічного редактора; як опрацьовувати багатошарові зображення; як додати текстові написи до зображення.

У власній структурі папок створіть папку Практична робота 11.

Під час виконання практичних завдань пам’ятайте про правила безпеки життєдіяльності при роботі з комп’ютером!

Завдання 1. Логотип команди (12 балів)

Створіть у середовищі векторного графічного редактора логотип команди, яка братиме участь у змаганні «Молодь за чисту планету». Використайте символіку, що вирізнятиме українську команду з-поміж інших команд світу. Збережіть результат у файлі з іменем Логотип у папці Практична робота 11 своєї структури папок.

Завдання 2. Емблема (12 балів)

Створіть у середовищі векторного графічного редактора емблему команди на змагання «Козацькі забави». Назву команди розмістіть уздовж основної фігури емблеми. Збережіть результат у файлі з іменем Емблема в папці Практична робота 11 своєї структури папок.

Завдання 3. Дудл для Google (12 балів)

Створіть у середовищі векторного графічного редактора дудл для пошукової системи Google до Дня незалежності України. Збережіть результат у файлі з іменем Дудл у папці Практична робота 11 своєї структури папок.

завдання 4. Постер (12 балів)

Створіть у середовищі векторного графічного редактора постер для учнів початкової школи «Вивчаємо англійський алфавіт». Збережіть результат у файлі з іменем Постер у папці Практична робота 11 своєї структури папок.

Дудл для Google (від англ. Doodle — каракулі, малюнки на полях) — незвичний святковий логотип головної сторінки пошукової системи Google. Дудли з’являються на честь свят, річниць важливих подій чи ювілеїв відомих особистостей. Зокрема, до дня народження української письменниці Марко Вовчок (Марії Вілінської) Google присвятив дудл цій річниці (мал. 26.1).

 

Це матеріал з підручника Інформатика 9 клас Морзе

 






^