Урок 7.  Колір, його характеристики, засоби відтворення

План вивчення теми уроку

1. Опрацювати опорний конспект на даній сторінці сайту.

2. Виконати тестове завдання.

Опорний конспект з теми уроку

Комп’ютерна графіка

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

Основні сфери застосування технологій комп’ютерної графіки: 

• графічний інтерфейс користувача;

• спецефекти, кінематографія, телебачення;

• цифрове телебачення, Інтернет, відеоконференції;

• обробка цифрових фотографій;

• комп'ютерні  ігри, системи віртуальної реальності. 

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

• у медицині - комп'ютерна томографія;

• в науці - наприклад, для наочного зображення складу речовини, побудови графіків;

• в дизайні - для реклами, поліграфії, моделювання, та ін.

Види комп’ютерної графіки. Її функції  та приклади

• Векторна

• Растрова

• Тривимірна

• Фрактальна

Растрова графіка

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

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

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

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

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

Переваги і недоліки растрової графіки

Переваги растрової графіки:

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

  • фотореалістичність

Недоліки растрової графіки:

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

  • розмір файлу є пропорційним до площі зображення, роздільної здатності і типу зображення, і, переважно, при високій якості є великим

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

Властивості растрового зображення:

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

• Розмір зображення – визначає ширину та розмір малюнка

• Роздільна здатність зображення – визначає піксель на одиницю довжини зображення

• Глибина кольору – кількість бітів що використовуються для кодування кодування кольору одного пікселя

Розмір зображення

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

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

Роздільна здатність

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

Значення роздільної здатності задається при створенні зображення (у графічному редакторі, у програмі сканування, у налаштуваннях фотоапарату). Для графічного зображення, яке готується для розміщення в Інтернеті, достатньо роздільної здатності 72 dpi, для екранного сприйняття – 96 dpi, а для друку на принтері – не менше 300 dpi. Змінення значень цієї властивості для даного зображення можливе лише в графічному редакторі, при цьому автоматично змінюється кількість пікселів у зображенні.

Глибина кольору

Вам уже відомо, що однією з властивостей пікселя є його колір. Кількість кольорів, якими може бути зафарбований піксель на малюнку, залежить від такої властивості растрового зображення як глибина кольору. Глибина кольору – це кількість бітів, що використовуються для кодування кольору одного пікселя. Вимірюється глибина кольору в bpp (англ. bits per pixel – бітів на піксель) і задається при створенні зображення. Змінити значення цієї властивості можна при редагуванні малюнка.

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

Одним бітом можна закодувати тільки два кольори – чорний і білий, і отримати чорно-біле зображення. У повнокольорових зображеннях (фотографії, ілюстрації) на кодування кольору пікселя відводиться 24 біти, що дає змогу максимально відтворити приблизно 16,7 млн кольорів. Чим більше довжина двійкового коду кольору пікселя, тим більше кольорів можна використати у малюнку

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

Кольори у природі рідко є простими. Більшість колірних відтінків утворюють змішуванням основних кольорів. Спосіб розділення колірного відтінку на складові компоненти називають колірною моделлю. Існує багато різних типів колірних моделей, але в комп'ютерній графіці, як правило, застосовується такі: RGB, CMYK, НSB.

Найчастіше в комп’ютерній графіці використовуються колірні моделі RGB і CMYK. Це пов’язано з тим, що вони повністю моделюють спосіб отримання кольору на екрані монітора і при друці на принтері.

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

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

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

Залежно від складових колірні моделі умовно ділять на:

• Адаптивні (RGB): колір пікселя формується поєднанням базових кольорів червоного, зеленого і синього.

• Субтрактивні, або додаткові (оскільки модель доповнює кольори адаптивної моделі до всього спектра): назва моделі CMY походить від складових: блакитний, пурпуровий і жовтий.

• Перцепційні (Lab, HSB) мають за основу сприйняття кольору людиною.

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

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

Основна ідея колірної моделі Lab така: хоча наше око найбільш чутливе до таких кольорів, як червоний, зелений і синій, ми не зможемо розпізнати різні кольори, поки в мозку не зареєструються три додаткові нервових сигнали: зв'язок "фіолетовий - зелений", зв'язок "жовтий - синій" і зв'язок яскравості (інакше названий зв'язком "чорний - білий"). Фіолетовий колір не містить зеленого, жовтий не містить синього, а білий колір не містить чорного. У моделі Lab передбачається, що будь-який колір, що сприймається, можна описати, вказавши за допомогою чисел (квантування) його положення в цих компонентах. Коли для підрахунку деяких умов освітлення використовується специфікація Lab, їх можна надалі уточнювати на основі реакції на них людського зору.

Lab - це абревіатура трьох використовуваних компонентів колірного простору. Освітленість (англ. Lightness) задана координатою L (змінюється від 0 до 100, тобто від самого темного до самого світлого), хроматична складова - двома декартовими координатами а і b (а - положення кольору в діапазоні від зеленого (англ . green) до червоного / пурпурового (англ. red / magenta)), а b - його положення між синім (англ. blue) і жовтим (англ. yellow).

На відміну від колірних просторів RGB або CMYK, які є, по суті, набором апаратних даних для відтворення кольору на папері або на екрані монітора, Lab однозначно визначає колір. Тому Lab має широке застосування в програмному забезпеченні для обробки зображень в якості проміжного колірного простору, через яке відбувається конвертування даних між іншими колірними просторами. При цьому особливі властивості Lab зробили редагування в цьому просторі потужним інструментом кольорокорекції. Lab надає можливість виборчого впливу на яскравість і окремі кольори в зображенні, посилення колірного контрасту, видалення цифрового шуму.

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

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

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

У моделі HSB кожний колір характеризується трьома базовими компонентами:

• відтінок (англ. Hue),

• насиченість (англ. Saturation),

• яскравість (англ. Brightness).

Hue (колірний тон)

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

Повне колірне коло складається з 360°. Кожному градусу відповідає певна координата на ньому. 0° — це червоний колір. 60° — жовтий. А, скажімо, 240 ° — синій. Саме за це значення відповідає параметр Hue в даній моделі. 

Ось ці кольори на колірному колі ще називають чистими спектральними кольорами або хроматичними. Це кольорові кольори, яскраво виражені. Але відтінків кольорів там немає. Як і ахроматичних, «знебарвлених кольорів» (чорного, білого і відтінків сірого). Ось навіщо нам потрібні ще два параметри.

Saturation (насиченість)

Насиченість — це параметр, який визначає виразність кольору. Найвиразніші (насичені) кольори — ті самі «чисті спектральні». А при зменшенні насиченості колір поступово знебарвлюється.

Але як це працює у колірному просторі? Колірний тон ми представляємо як координату на колі. Чисті спектральні кольори — це кольори, які знаходяться безпосередньо на контурі кола. При віддаленні від краю до центру кола кольори тьмяніють.

Тобто всередині колірного простору насиченість — це віддаленість від центру. При 100% віддаленості ви опиняєтесь на межі кола. При 0% віддаленості — його у центрі. Але який колір ми отримаємо, перебуваючи у центрі кола?

Щоб правильно відповісти на це запитання, нам і потрібно познайомитись з третім параметром — яскравістю.

Brightness (яскравість)

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

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

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

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

Застосування HSB

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

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

І контраст кольорів можливий не тільки у контексті хроматичних кольорів, а й у контексті інших параметрів кольору.

Тобто, може бути контраст за насиченістю.

А може бути контраст за освітленістю. 

Схожа колірна модель: HSL

До речі, існує дуже схожа на HSB колірна модель HSL.

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

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

Палітра

Основні кольори — кольори, змішуючи які можна отримати всі інші кольори та відтінки.  Змішування кольорів залежить від колірної моделі. Існують аддитивна та субтрактивна моделі змішування.

Основним інструментом роботи з кольорами  є палітра кольорів в графічному редакторі. Палітра кольорів містить набір кольорів для малювання.

Відтінок Н визначає колір у спектральній палітрі (рожевий, блакитний, фіолетовий тощо) і задається цілим числом від 0 до 360. Мінімальне і максимальне значення відповідає червоному кольору, а проміжні – іншим кольорам спектра.

Насиченість S характеризує частку білого кольору, доданого до вибраного відтінку. Задається значення насиченості у відсотках від 0 до 100.

При мінімальній насиченості будь-який відтінок кольору стає сірим.

Яскравість B визначається домішкою чорного кольору до вибраного відтінку. Задається значення яскравості у відсотках від 0 до 100. Будь-який відтінок при мінімальній яскравості стає чорним.

Раніше для друку застосовували модель CMY і, відповідно, блакитне, пурпурове і жовте чорнило. Під час друку чорний колір і відтінки сірого отримували змішуванням цих чорнил у рівних частинах. Отримати чистий чорний колір таким чином не можна, і його додали окремо. У моделі HSB цілими числами кодуються такі характеристики кольору: відтінок (колірний тон) (Hue), насиченість (Saturation) та яскравість (Brightness). У цій моделі будь-який колір фактично отримують додаванням до колірного тону певного відсотка білого та чорного кольорів. Вважається, що ця колірна модель ґрунтується на особливостях сприйняття кольору людиною.

Палітра кольорів у графічному редакторі Paіnt. Редагування кольору

В графічному редакторі Paint з лівого боку Палітри знаходяться два індикатори встановлених на даний момент кольорів: колір верхнього індикатора показує основний колір малювання, а колір нижнього – відображає колір фону.

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

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

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

Інструмент Валик панелі інструментів дозволяє заповнювати обмежеі область малюнка кольором фону.

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

Команда Рисунок/Обратить цвета замінює всі кольори в малюнку і протилежні (білий — на чорний, жовтий — на синій і т.д.).

Зміна кольорів палітри. Для зміни будь-якого кольору палітри слід вибрати цей колір, клацнувши по ньому мишею, а потім виконати команд Параметры/Изменить палитру. При цьому відкривається вікно діалогу Изменение палитры, в якому слід натиснути кнопку Определить цвет.

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

Поле Дополнительные цвета містить 16 квадратів, в які можна записувати колір, створюваний користувачем.

У правій нижній частині вікна розміщені поля введення для визначені параметрів кольору в системі HLS (поля Оттенок, Контраст, Яркость) а системі RGB (поля Красный, Зеленый, Синий).

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

Визначений користувачем колір відображується в полі Цвет/Заливка вікна діалогу. Після визначення параметрів кольору слід натиснути клавішу Добавить в набор. Цей колір записується в палітру кольорів поля Дополнительные цвета і стане вибраним.

При натискуванні кнопки ОК вікно діалогу закривається і вибраний колір з поля Базовая палитра або Дополнительные цвета запишеться в палітру кольорів вікна редактора Paint.

Цю палітру можна зберегти командою Параметры/Сохранить палитру. При цьому відкривається вікно діалогу, в якому можна вказати ім'я і тип файла палітри.

Збережений файл палітри можна завантажити командою Параметры/Загрузить палитру.

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

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

Ви можете призначити новий колір переднього плану або тла за допомогою інструмента «Піпетка», панелі «Колір», панелі «Зразки» або палітри кольорів Adobe.

Кольором переднього плану типово є чорний, а тла – білий. (В альфа-каналі кольором переднього плану типово є білий, а тла – чорний).

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

• Щоб змінити колір переднього плану, натисніть на верхнє вікно вибору кольору у панелі інструментів, а потім виберіть колір у Палітрі кольорів Adobe.

• Щоб змінити колір тла, натисніть на панелі інструментів нижнє вікно вибору кольору, а потім виберіть колір у палітрі кольорів Adobe.

• Щоб поміняти місцями колір переднього плану та колір тла, натисніть на панелі інструментів значок «Перемикання кольорів».

• Щоб відновити типові кольори переднього плану й тла, натисніть на панелі інструментів значок «Типові кольори».

Огляд палітри кольорів Adobe

У палітрі кольорів Adobe можна вибрати кольори за допомогою чотирьох колірних моделей: HSB, RGB, Lab та CMYK. Використовуйте палітру кольорів Adobe, щоб налаштувати колір переднього плану, тла та колір тексту. Також можна налаштувати цільові кольори для різних інструментів, команд та параметрів.

Щоб вибирати лише ті кольори, що входять до безпечної веб-палітри, або вибирати з певної системи кольорів, можна налаштувати Палітру кольорів Adobe. Ви також можете скористатися палітрою HDR (високий динамічний діапазон), щоб вибрати кольори для використання в HDR-зображеннях.

Поле кольору в палітрі кольорів Adobe відображає колірні компоненти в колірних режимах HSB, RGB та Lab. Якщо відоме числове значення необхідного кольору, введіть його в текстові поля. Також можна застосувати колірний повзунок та колірне поле для попереднього перегляду кольору, який ви збираєтесь вибрати. Як тільки ви оберете колір за допомогою колірного поля та колірного повзунка, будуть відповідно змінені числові значення. У вікні кольору праворуч від колірного повзунка відображаються призначений колір (у верхній частині) та початковий колір (у нижній частині).

Пройдіть тестування, заповнивши наступну форму: