Урок на тему "Поняття комп’ютерної графіки. Растрові й векторні зображення та їх властивості. Колірні системи. Огляд та класифікація сучасних графічних редакторів. "

Розробка уроку з інформатики для 9 класу

 

 

Урок № 1

Тема  уроку: Поняття комп’ютерної графіки. Растрові й векторні зображення та їх властивості. Колірні системи. Огляд та класифікація сучасних графічних редакторів. Формати графічних файлів.

 Цілі уроку:

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

Тип уроку: засвоєння нових знань, умінь, навичок.

Методи роботи: пояснення, інформаційно - повідомлюваний з елементами проблемності, бесіда,  методичні прийоми: «лицарський турнір», «уявний мікрофон», бліцопитування, індивідуальний практикум.

Форми роботи: колективна, групова, індивідуальна.

Базові поняття та терміни: векторні і растрові зображення, колірні системи, формати графічних файлів.

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

 Програмне забезпечення: персональний комп’ютер із встановленою операційною системою Windows; графічний редактор Paint; NetSupport School Tutor.

Структура уроку

І. Органiзацiйний етап  (4 хв).

ІІ. Перевірка домашнього завдання (5 хв.).

ІІ. Мотивацiя навчальної дiяльностi (4–5 хв.).

ІІІ. Вивчення нового матерiалу (15–20 хв.).

IV. Засвоєння нових знань і вмінь (10-15 хв).

• Робота з підручником.
• Робота за комп’ютером. Інструктаж з ТБ.

VI. Підбиття підсумків уроку (2–3 хв).

VII. Повідомлення домашнього завдання (2 хв).

Хід уроку

І.   Організаційний етап.

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

ІІ.  Перевірка домашнього завдання. Слайд 1.

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

ІІІ. Мотивація навчальної діяльності.

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

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

  Для роботи з графічною інформацією розроблене відповідне програмне забезпечення: засоби перегляду, графічні редактори, фоторедактори та інші.

Спробуємо розібратися в цих поняттях більш детально.

ІV. Вивчення  нового матеріалу.

План вивчення теми

1. Поняття комп’ютерної графіки.
2. Растрові й векторні зображення та їх властивості.
3. Колірні системи.
4. Призначення та класифікація засобів обробки графічних даних.
5. Формати графічних файлів.
6. Засоби перегляду зображень та перетворення графічних форматів.

 

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

Слайд 2

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

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

 

Слайд 3

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

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

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

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

      Наведіть ще приклади.

Слайд 4

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

              Але найчастіше говорять про растрову і векторну графіку, яку ми сьогодні розглянемо більш детально.

Слайд5

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

Слайд 6

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

1. інженерною;
2. науковою;
3. web-графікою;
4. комп'ютерною поліграфією.

 

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

 

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

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

Слайд7

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

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

Растрове зображення- це набір пікселів, тобто кольорових точок, розташованих на правильній сітці.

Слайд 8

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

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

Слайд 9

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

• Adobe - PhotoShop,
• Corel - PhotoPaint,
• Macromedia - FireWorks,
• Fractal Design - Painter,
• стандартний додаток у Windows - PaintBrush.

Слайд 10

Програми растрової графіки можуть використовувати:

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

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

 

Переваги:

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

Недоліки:

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

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

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

Слайд11

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

 

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

 

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

Шлях уявляє собою маршрут, що з'єднує початкову та кінцеву точку.

Сегмент - окрема частина шляху, може бути як прямою, так і кривою лінією.

Вузол - початкова або кінцева точка сегмента.

 

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

 

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

 

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

Точка. Об'єкт на площині представляється двома числами (х, у) відносно початку координат.

Пряма лінія. Їй відповідає рівняння у=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. Для опису відрізка потрібні ще два параметри початку та кінця відрізку. Зауважимо, що пряма та криві ІІ порядку є частковим випадком кривих ІІІ порядку.

Криві Без'є. Спрощений вид кривих ІІІ порядку. Метод побудови кривих Без'є заснований на використанні пари дотичних, що проведені до відрізка лінії в його закінченні. На форму кривої лінії впливає кут нахилу дотичної та довжина її відрізка. Таким чином, дотичні відіграють роль віртуальних важелів, за допомогою яких керують формою кривої.

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

Слайд12

Заповнення можна розбити на 4 категорії:

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

 

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

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

 

Переваги:

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

розмір об'єктів та опис колірних характеристик майже не збільшує розміри файлу;

об'єкти легко трансформуються, ними легко маніпулювати.

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

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

Векторна графіка може містити в собі фрагменти растрової графіки, які перетворюються в об'єкти, але мають обмеження у їх обробці;

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

Векторні програми незамінні там, де принципове значення має збереження чітких контурів, а саме:

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

 

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

Слайд13

Користувачами векторних редакторів можуть бути:

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

 

Найпопулярнішими прикладними програмами є продукти фірм:

• Corel - CorelDraw,
• Adobe - Illustrator,
• Macromedia - FreeHand,
• стандартний додаток у MS Office - Word Editor.

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

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

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

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

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

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

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

IV. Засвоєння нових знань і вмінь. Слайд14.

Робота з підручником. (Виписати в зошит переваги та недоліки різних видів комп’ютерної графіки).

Переваги і недоліки різних видів комп’ютерної графіки

Робота за комп’ютером. Інструктаж з ТБ. Слайд 15.

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

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

Завдання 1: Ознайомитися з інтерфейсом та можливостями редактора і дати відповіді на такі питання:

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

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

Слайд16

VI. Підбиття підсумків.

Дати відповіді на запитання. Метод «Уявного мікрофона»

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

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

VII. Повідомлення домашнього завдання. Слайд 17.

Домашнє завдання: 

Опрацювати § 7.1 ст.239-248 підручник  Й.Я. Ривкінд, Т.І. Лисенко  «Інформатика 9 кл.»

Підготувати повідомлення за темою: «Методи стиснення даних у графічних файлах».

Підібрати 3 цікаві питання по даній темі.