Характеристики зображення та засобів його відтворення - яскравість, контрастність, роздільна здатність, інтервал оптичної щільності (фотографічна ширина), колірна гама, палітра, глибина кольору, насиченість кольору.
За навчальною програмою 2018 року
Урок 7
10
(11)
Характеристики зображення
Розділ 2 § 7
Комп’ютерна графіка — це розділ інформатики, у якому вивчаються методи створення й опрацювання зображень за допомогою комп’ютера.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Характеристики зображення
Розділ 2 § 7
Залежно від способу побудови та кодування графічного зображення, розрізняють зображення:
Растрові
Векторні
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Якщо придивитись до зображення на екрані монітора, то можна помітити, що воно складається з окремих
крапок, які називають пікселями (від англ. picture element — елемент малюнка). Піксель є найменшим елементом зображення.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Якщо на аркуші в клітинку намалювати квітку, зафарбовуючи певним кольором окремі клітинки, то отримаємо зображення, яке показано на рисунку.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Растрове зображення — це зображення, що являє собою набір пікселів, кожний із яких має певний колір.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Глибина кольору — це кількість бітів, які використовуються для кодування кольору пікселя растрового зображення.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Розглянемо зображення, що складається з пікселів восьми кольорів. Для кодування восьми кольорів достатньо чисел від 0 до 7, які можна подати двійковими послідовностями довжиною 3 біти. Отже, глибина кольору цього зображення 3 біти.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Розміри растрового зображення зазвичай задають як кількість пікселів по горизонталі та вертикалі, наприклад:
1366 х 768
1920 х 1080
2048x1152
Зі збільшенням числа кольорів глибина кольору зростає, що за однакової кількості пікселів зображення приводить до збільшення обсягу файла.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Під час кодування растрового зображення зберігаються дані про кожен піксель, тому зі збільшенням числа кольорів зростає глибина кольорів і, як наслідок, розмір зображення.
За глибини кольору 8 бітів (або 1 байт) можна закодувати
28 = 256 різних кольорів
а за глибини кольору 16 бітів (або 2 байти)
216 = 65 536 кольорам
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Фотографічну якість мають повноколірні зображення з глибиною кольору.
У файлі з растровим зображенням зберігаються:
24 біти
32 біти
або
розміри зображення
коди кольорів усіх його пікселів
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Властивості растрових зображень
До основних властивостей растрового зображення належать:
Кількість пікселів по горизонталі й вертикалі (розміри)
Роздільність
Кількість можливих кольорів
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Роздільність зображення вимірюють у крапках на дюйм (dpi — dots per inch). За однакових геометричних розмірів якість зображення залежить від роздільності:
Роздільність зображення — величина, що показує, скільки пікселів зображення розміщується на одиниці довжини.
чим більше пікселів припадає на одиницю довжини, тим більше окремих деталей можна зобразити.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Оскільки поняття роздільності вживають щодо різних об'єктів, слід розрізняти:
Роздільність зображення
Роздільну здатність монітора
Роздільну здатність принтера
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Чим вищі вимоги до якості зображення, тим більшою за однакових геометричних розмірів зображення має бути роздільність.
Для роботи з растровими зображеннями розроблено багато програм, які відрізняються набором засобів для редагування малюнків.
Для початківців
Для професіоналів
Paint
Adobe Photoshop
KolourPaint
GIMP та ін
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Растрові зображення мають як переваги, так і недоліки.
Переваги
Реалістичність зображень
Природність кольорів
Можливість роботи з фотографіями та сканованими зображеннями
Недоліки
Великий обсяг даних
Погіршення якості при збільшенні й зменшенні зображення
Складність редагування
Растрові зображення
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
Зображення на рисунку має 26 пікселів по горизонталі і 14 пікселів по вертикалі й відтворено з різною роздільністю: 96, 48, 24 пікселів на дюйм.
Отже, чим більше пікселів припадає на одиницю довжини, тим вищою є якість зображення.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Растрові зображення
Розділ 2 § 7
На рисунку проілюстровано, як у растровому графічному редакторі погіршилась якість зображення кільця (а) після послідовного зменшення (б) і збільшення (в) у 10 разів.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
У комп'ютерній графіці є різні способи розкладання кольорів на основі певних властивостей кольору або, як кажуть, різні колірні моделі.
Колірна модель — система кодування кольорів, яка використовується для зберігання, виведення на екран та друку зображення.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
Розглянемо три найпоширеніші колірні моделі, та принципи кодування кольору в них.
RGB
CMYK
HSB
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
У моделі RGB кольори отримуються змішуванням трьох базових кольорів:
Червоний
(англ. Red)
Зелений
(англ. Green)
Синій
(англ. Blue)
Їх називають основними кольорами.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
Інтенсивність кожного з базових кольорів кодується цілим числом у межах
від 0 (колір відсутній)
до
255 (яскравість кольору найбільша)
Таким чином, отримуємо
256x256x256 = 16 777216 різних кольорів.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
У моделі CMYK використовується змішування чотирьох складових:
блакитний (англ. Cyan)
пурпурний (англ. Magenta)
жовтий (англ. Yellow)
чорний (англ. blасК)
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
Вміст кожної зі складових кодується числом від 0 до 100. При цьому нульове значення всіх складових дає білий колір, а стовідсоткове значення — чорний.
Ця модель застосовується для підготовки зображень до кольорового друку. Перші три складові утворено вилученням із білого кольору базових кольорів моделі RGB: блакитний = білий -червоний, пурпуровий = білий-зелений, жовтий=6ілий-синій.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Колірні моделі
Розділ 2 § 7
У моделі HSB цілими числами кодуються такі характеристики кольору:
відтінок (англ. Hue)
насиченість (англ. Saturation),
яскравість (англ. Brightness);
Вважається, що ця кольорова модель ближча до сприйняття кольору людиною.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Формати файлів растрових зображень
Розділ 2 § 7
Як ви вже знаєте, формат файла — це набір правил запису даних у ньому. Від формату графічного файла залежить:
Спосіб зберігання даних малюнка
Алгоритм
їх стиснення
Стиснення найчастіше застосовується до растрових зображень, які мають порівняно великий обсяг.
(у растровому чи векторному вигляді)
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Формати файлів растрових зображень
Розділ 2 § 7
Розглянемо деякі формати графічних зображень.
Формат застосовують для збереження растрових зображень без стиснення, тому файли мають великий обсяг. Він дає змогу використовувати палітру з близько 16 млн кольорів.
BMP
Формат застосовують для збереження растрових зображень зі стисненням без втрати якості. Його палітра підтримує від 65536 до понад 4 млрд кольорів, а також прозорість. Колір зображення в цьому форматі відтворюється однаково на будь-якому комп'ютері.
PNG
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Формати файлів растрових зображень
Розділ 2 § 7
(Продовження…) формати графічних зображень.
Формат застосовують для збереження растрових зображень зі стисненням за рахунок втрати якості: менший файл — нижча якість. Зберігши зображення, не можна відтворити його початковий вигляд. Малий розмір файлів дозволяє працювати з фотографіями та в Інтернеті.
JPG
Формат використовують переважно для стиснення растрових зображень, які містять здебільшого одноколірні ділянки (логотипи, написи, схеми). Підтримує палітру всього з 256 вибраних кольорів, проте дозволяє зберігати прозорість окремих ділянок зображення й анімацію.
GIF
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Формати файлів растрових зображень
Розділ 2 § 7
Для розміщення на веб-сторінках в Інтернеті використовують растрові зображення у форматах:
JPG
GIF
PNG
Оскільки ці формати передбачають стискання даних і файли мають менший обсяг, ніж відповідні файли форматів без стискання.
9
© Вивчаємо інформатику teach-inf.at.ua
Розгадайте ребус
модель
«Ребуси українською» © rebus1.com
Розділ 2 § 7
Колірна
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дайте відповіді на запитання
Розділ 2 § 7
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Домашнє завдання
Розділ 2 § 7
Здійснити пошук інформації з теми «Інтервал оптичної щільності (фотографічна ширина)», підготувати виступ (текстовий документ, презентація тощо)
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Розділ 2 § 7
Створіть презентацію “Редактори растрової графіки”
1. Розмісіть роботу на Google-диску, надайте доступ, для перегляду і редагування учителю і 2 однокласникам.
2. Перегляньте проектну роботу своїх друзів. Додайте коментарі. Порівняйте змістовну частину і оформлення.
3. Оцініть власну роботу і переглянуті роботи.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дякую за увагу!
За навчальною програмою 2018 року
Урок 7
10
(11)