Мета: Засвоїти відомості про графічні редактори та основні формати графічних файлів.  Знати класифікацію графічної інформації та принципи формування ображення.  Формувати початкові навички роботи в графічному редакторі Paint, засвоїти його призначення, ознайомитись із інтерфейсом програми та її можливостями. Мати уявлення про проглядачі (Viewer) графічних файлів. Показати, де можна застосувати отримані знання в житті. Виховувати зосередженість, вміння активно сприймати новий матеріал. Розвивати координацію рухів, окомір, зорову пам’ять.

Наочність, обладнання і програмні засоби: персональний комп’ютер із встановленою операційною системою Windows; переглядач графічних файлів IrfanView; графічний редактор Paint; графічні файли найпоширеніших форматів (bmp, jpg, png, wmf, gif, ico, …); зразок малюнка для практичної роботи.

Тип уроку: комбінований

Хід уроку

І. Організація класу

• Привітання
• Відмічання в класному журналі відсутніх
• Відповіді на можливі запитання учнів


ІІ. Повторення матеріалу

1. Комп’ютер – це інформаційна машина. А в якій формі і де зберігається інформація на ПК?
2. Що таке файл?
3. Яка саме інформація може зберігатися в ПК?
4. Як дізнатися, яку саме інформацію містить певний файл?
5. Що таке програма?
6. Які класи програм ми вивчали?


ІІІ. Актуалізація опорних знань

1. В чому полягає основне призначення ПК?
2. Як можна використати його вдома? А в різних професіях? Наведіть приклади.

ІV. Пояснення нового матеріалу

• Чи хотіли б ви дізнатися, а головне – навчитися створювати малюнки з допомогою ПК?

• Оголошення теми уроку. Запис її в зошити.

• Представлення даних на моніторі у графічному вигляді вперше було реалізовано всередині 50-х років для великих ЕОМ, що застосовувались в наукових і військових дослідженнях. Тепер, графічний спосіб відображення даних став дуже поширеним на усіх ПК. Графічний інтерфейс є необхідним майже для усіх програм, включаючи операційні системи.

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

• Комп'ютерна графіка охоплює всі види та форми представлення зображень, як на екрані монітора, так і на зовнішньому носії (папір, плівка, тощо).


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

• В залежності від способу формування зображення, комп'ютерну графіку можна поділити на:
1. растрову;
2. векторну;
3. фрактальну;
4. тривимірну.
Ми сьогодні розглянемо більш детально тільки растрову і векторну графіку, яка дуже широко представлена на ПК.

• За способами представлення кольорів комп'ютерна графіка поділяється на:
1. чорно-білу;
2. кольорову.


• За спеціалізацією в різних галузях, комп'ютерна графіка є:
1. інженерною;
2. науковою;
3. web-графікою;
4. комп'ютерною поліграфією.


•В наш час стрімко розвивається комп'ютерна графіка і анімація. Значне місце посідає графіка для комп'ютерних ігор.

• Структура та методи комп'ютерної графіки засновані на досягненнях фундаментальних та прикладних наук: математики, фізики, хімії, біології, статистики, програмування тощо. Це стосується, як програмних, так і апаратних засобів створення та обробки зображень. Тому комп'ютерна графіка є однією з найважливіших ділянок інформатики та стимулює розвиток комп'ютерної індустрії.

• А тепер я вам розповім про основні види графічних зображень більш детально.

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

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

Потрібно розрізняти:
• роздільчість оригінала;
• роздільчість екранного зображення;
• роздільчість друкованого зображення.

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

Роздільність екранного зображення. Для екранного зображення, найменшу точку растра називають пікселом. Розмір піксела коливається в залежності від вибраної роздільчості екрана монітора, роздільності оригіналу й масштабу відображення. Монітори можуть забезпечити роздільність 640х480, 800х600, 1024х768, 1600х1200 і вище. Відстань між сусідніми точками люмінофора в якісному моніторі складає 0,22-0,25 мм. Для екранного зображення достатньо роздільності 72 dpi.

Роздільність друкованого зображення. Розмір точки растрового зображення залежить від застосованого методу та параметрів растрування оригіналу. При раструванні на оригінал накладається сітка ліній, комірки якої утворюють елемент растра. Частота сітки растра вимірюється числом ліній на дюйм (lpi - lines per inch) і називається лінєатурою. Розмір точки растра розраховується для кожного елементу і залежить від інтенсивності тону в цій комірці. Якщо у растрі є абсолютно чорний колір, тоді розмір точки растра співпадає з розміром елементу растра (100% заповненість). Для абсолютно білого кольору заповненість складає 0%. На практиці заповненість коливається у межах 3-98%.

Глибина кольору. Характеризує максимальне число кольорів, які використані у зображенні. Існує декілька типів зображень із різною глибиною кольору:
• чорно-білі;
• відтінки сірого;
• з індексованими кольорами;
• повноколірні;

Чорно-білі зображення. На один піксел зображення відводиться 1 біт інформації - чорний та білий. Глибина кольору - 1 біт.

Зображення у відтінках сірого. Піксел сірого зображення кодується 8 бітами (1 байт). Глибина кольору - 8 біт, піксел може приймати 256 різних значень - від білого (255) до чорного (0 яскравості).

Зображення з індексованими кольорами. Перші кольорові монітори працювали з обмеженою колірною гамою (16, згодом 256 кольорів). Такі кольори називаються індексованими і кодуються 4 або 8 бітами у вигляді колірних таблиць. В такій таблиці всі кольори вже визначені і можна використовувати лише їх.

Повноколірні зображення. Глибина кольору не менше як 24 біти, що дає можливість відтворити понад 16 мільйонів відтінків. Повноколірні зображення називаються True Color (правдивий колір). Бітовий об'єм кожного піксела розподіляється по основних кольорах обраної колірної моделі, по 8 бітів на колір. Колірні складові організуються у вигляді каналів, спільне зображення каналів визначає колір зображення. Повноколірні зображення на відміну від вище розглянутих є багатоканальними і залежать від колірної моделі (RGB, CMY, CMYK, Lab, HBS), які різняться за глибиною кольорів і способом математичного опису кольорів.

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

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

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

Найпопулярнішими прикладними програмами є продукти фірм
• Adobe - PhotoShop,
• Corel - PhotoPaint,
• Macromedia - FireWorks,
• Fractal Design - Painter,
• стандартний додаток у Windows - Paint.

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

Але растрова графіка має свої переваги і недоліки.

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

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

Векторна графіка

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

Векторні об'єкти завжди мають шлях, що визначає їх форму. Якщо шлях є замкненим, тобто кінцева точка співпадає з початковою, об'єкт має внутрішню ділянку, яка може бути заповненою кольором або іншими об'єктами. Всі шляхи містять дві компоненти: сегменти та вузли.
Шлях уявляє собою маршрут, що з'єднує початкову та кінцеву точку.
Сегмент - окрема частина шляху, може бути як прямою, так і кривою лінією.
Вузол - початкова або кінцева точка сегмента.

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

Математичні основи векторної графіки

Різні об'єкти мають різні способи представлення.
Точка. Об'єкт на площині представляється двома числами (х, у) відносно початку координат.
Пряма лінія. Їй відповідає рівняння у=kx+b. Вказавши параметри k та b можна створити пряму лінію у відомій системі координат.
Сегмент прямої. Для опису потрібно додатково вказати параметри х1 та х2, відповідно початку та кінця відрізку.
Крива лінія ІІ порядку. До них відносяться еліпси, круги, параболи, гіперболи тощо. Пряма лінія є також випадком кривої ІІ порядку. Крива ІІ порядку не має точок перегину і описується рівнянням а0х2+а1у2+а2ху+а3х+а4у+а5=0. Для побудови відрізка кривої додатково потрібні ще два параметри початку та кінця відрізку.
Крива лінія ІІІ порядку. Важлива наявність точки перегину, що дозволяє відобразити різноманітні об'єкти.
Рівняння кривої ІІІ порядку а0х3+а1у3+а2х2у+а3ху2+а4х2+а5у2+а6ху+а7х+а8у+а9=0. Для опису відрізка потрібні ще два параметри початку та кінця відрізку. Зауважимо, що пряма та криві ІІ порядку є частковим випадком кривих ІІІ порядку.
Криві Без'є. Спрощений вид кривих ІІІ порядку. Метод побудови кривих Без'є заснований на використанні пари дотичних, що проведені до відрізка лінії в його закінченні. На форму кривої лінії впливає кут нахилу дотичної та довжина її відрізка. Таким чином, дотичні відіграють роль віртуальних важелів, за допомогою яких керують формою кривої.

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

Заповнення можна розбити на 4 категорії:
1. однорідне заповнення одним кольором або штрихуванням;
2. градієнтне, при якому кольори або тіні поступово змінюються (лінійна, радіальна, конічна, прямокутна тощо);
3. візерункове, при якому об'єкт заповнюється повторювальними зображеннями (двоколірними або повноколірними);
4. текстурне заповнення (художні зображення).

У векторних редакторів є засоби застосування ефектів до простих об'єктів (відтінювання, витискування, викривлення, прозорість тощо). 

• Векторна графіка, так як і растрова також має свої переваги і недоліки:

Переваги:
Невеликі за розміром файли, оскільки зберігається не зображення, а лише його основні дані, використовуючи які, програма відновлює зображення. Розмір об'єктів та опис колірних характеристик майже не збільшує розміри файлу. Об'єкти легко трансформуються, ними легко маніпулювати. Редагуючи векторний об'єкт, можна змінити властивості ліній, з яких складається зображення. Можна пересувати об'єкт, змінювати його розміри, форму та колір, не впливаючи на якість зображення. Векторна графіка не залежить від роздільності, тобто векторні об'єкти відтворюють на пристроях з різною роздільністю без втрати якості зображення. Векторна графіка може містити в собі фрагменти растрової графіки, які перетворюються в об'єкти, але мають обмеження у їх обробці. У програмах векторної графіки є розвинуті засоби інтеграції зображення та тексту. Єдиний підхід до них обумовлює створення кінцевого продукту.

Векторні програми незамінні там, де принципове значення має збереження чітких контурів, а саме:
• повноколірні ілюстрації;
• складні креслення;
• логотипи та емблеми;
• графічні зображення для Web;
• мультиплікація;
• рисунки на основі оригіналів.

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

Користувачами векторних редакторів можуть бути:
• технічні редактори;
• вільні художники й дизайнери-початківці;
• розробники web-сторінок;
• оператори настільних видавничих систем;
• художники по рекламі;
• справжні художники-ілюстратори;
• користувачі початківці.


Найпопулярнішими прикладними програмами є продукти фірм:
• Corel - CorelDraw,
• Adobe - Illustrator,
• Macromedia - FreeHand,
• стандартний додаток у MS Office - Word Editor.

Формати найбільш популярних графічних файлів

- Як відрізнити графічний файл від іншого формату. Звичайно ж за розширенням імені.

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

(bmp, gif, jpg, tiff, png, wmf, ico, cur, lbm, … )

Учні записують в зошити розширення імен файлів найбільш популярних форматів для подальшого вивчення напам'ять.

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

• Демонстрація програми Irfan Viewer. Ознайомлення з деякими особливостями та можливостями.

V. Самостійне опрацювання нового матеріалу

•Запустити на виконання графічний редактор Paint.

• Завдання 1: Ознайомитися з інтерфейсом та можливостями редактора і дати відповіді на такі питання:
1. Описати інтерфейс графічного редактора. Чим він схожий на інші програми, а чим відрізняється?
2. Які інструменти має в розпорядженні користувач? Їх призначення.
3. Як вибрати необхідний колір?
4. Як зберегти створене зображення?
5. В яких форматах файлів може зберігати зображення редактор?
6. Чи можна застосувати текст в малюнку? Як це зробити?
7. Які ще цікаві можливості цього редактора ви віднайшли?

• Завдання 2: Створити простий малюнок в редакторі за зразком і зберегти його на диск в свою папку під своїм ім’ям.

VІ. Підсумок уроку

• Дати відповіді на запитання

1. Що ми сьогодні вивчали на уроці?
2. Що таке комп'ютерна графіка?
3. Де застосовується комп'ютерна графіка?
4. Класифікація комп'ютерної графіки.
5. Як формується зображення растрової графіки? А як векторної?
6. Переваги та недоліки растрової графіки.
7. Переваги та недоліки векторної графіки.
8. Найпоширеніші редактори векторної і растрової графіки?
9. Як відрізнити за зображенням растрову графіку від векторної?

• Оцінення найбільш активних учнів та найбільш вдалих графічних робіт.

• Домашнє завдання:
- Опрацювати § …
- Розробити власний орнамент для подальшого виконання на уроці в графічному редакторі
- Підібрати 3 цікаві питання по даній темі