Тема: графічний редактор і його середовище.

Мета: ознайомитися з середовищем графічного редактора KolourPaint, навчитися використовувати інструменти графічного редактора для створення та зміни зображень. Після вивчення навчального матеріалу

• графічного редактора;
• буфера обміну;

• алгоритм створення зображення в середовищі KolourPaint;
• складові середовища KolourPaint;
• призначення й спосіб використання основних інструментів KolourPaint;
• алгоритм виділення засобами KolourPaint частин зображеннях різних типів.

Обладнання: ПК з встановленими ОС Linux KDE та KolourPaint, (даний) конспект.

План уроку

1. Організаційний момент.
2. Мотивація навчальної діяльності учнів.
3. Вивчення нового матеріалу.
4. Закріплення вивченого матеріалу.
5. Підбиття підсумків уроку.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Мотивація навчальної діяльності учнів
Дорогі діти! Ми починаємо вивчати нову для вас тему: «Графічний редактор». За декілька уроків складно навчитися малювати. Але наша мета інша: розглянути основні прийоми роботи з графічним редактором і навчитися створювати чи редагувати різноманітні зображення з допомогою його інструментів. Вже сьогодні ви маєте можливість відчути себе справжніми художниками.

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

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

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

Яким чином створено зображення на екрані монітора? Воно складено з маленьких (підсвічених) точок, що є елементами прямокутної таблиці-екрану. Ці точки зливаються в єдине ціле, якщо не придивлятися до них ретельно. Їх називають пікселами. Це слово походить від англійського слова pixel, що є скороченням від словосполучення picture's element – елемент зображення.

Піксел – найпростіший графічний об’єкт, що лежить в основі всіх графічних об’єктів.

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

Запуск програми KolourPaint здійснюють вказівкою меню Програми / Графіка / KolourPaint. Після запуску з’явиться вікно, зображене на малюнку.

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

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

Пенал кольорів розташовано у нижній частині вікна. Він містить такі складові:

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

палітрa кольорів
— з неї обирають кольори і відтінки для основного кольору і тла;

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

Робоче поле призначено для створення, відображення й зміни малюнку.

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

Відкриття файлу здійснюють вказівкою меню Файл / Відкрити. У наступному вікні діалогу Відкриття зображення — KolourPaint:

• перейти на потрібний носій;
• відкрити потрібну теку;
• виділити потрібний файл;
• натиснути кнопку Відкрити.

Збереження зображення здійснюють вказівкою меню Файл / Зберегти як. У наступному вікні діалогу Збереження зображення з новою назвою — KolourPaint задати теку, в яку буде записано файл, і назву файлу. Діалог зберігання викликають також вказівкою меню Файл / Зберегти, якщо створений малюнок раніше не зберігали.

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

Створення зображень
Перед створенням зображення потрібно встановити його розміри. Для цього потрібно навести вказівник на один з маркерів зміни розмірів. Вони розташовані на правій чи нижній сторонах малюнка або у правому нижньому його куті. Вказівник набуде вигляду двонапрямленої стрілки. Натиснути ліву кнопку миші («захопити» маркер) й потягнути вказівник у потрібному напрямку. При цьому у правій частині рядка статусу (при натиснутій кнопці миші) подано (у пікселах) початкові розміри, встановлені розміри та прирости розмірів. Цю саму дію можна виконати за допомогою вказівки меню Зображення / Змінити розмір/масштаб… або натискання клавіш клавіатури Ctrl + E, після чого ширину й висоту надрукувати цифрами.

Малювання ліній здійснюють за допомогою таких інструментів:

Лінія — для малювання прямих ліній;
Перо — для малювання довільних ліній;
Крива — для малювання кривих ліній.

1. Вибрати інструмент для малювання — клацнути лівою кнопкою миші по відповідній піктограмі.

2. Задати колір лінії за допомогою палітри.

3. Вибрати ширину лінії, клацнувши по потрібній піктограмі під панеллю інструментів.

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

Якщо потрібно накреслити горизонтальну чи вертикальну лінію або лінію, нахилену під кутом 45°, то при малюванні інструментом Лінія потрібно утримувати натиснутою клавішу Shift.

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

Для почергової відміни дій потрібно використати вказівку меню Зміни / Вернути або натиснути клавіші Ctrl + Z.

Пензель, розпилювач, ґумка
Майже всі графічні редактори використовують такі інструменти малювання:
Пензлик;
Розпилювач;
Ґумка.

Операції з ними виконують однаково.

1. Обрати на палітрі колір.

2. Клацнути по піктограмі потрібного інструменту.

3. Вибрати під набором інструментів потрібну форму і розмір пензля, розмір розпилювача або розмір ґумки.

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

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

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

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

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

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

Багатокутник. Інструмент дозволяє будувати багатокутники з будь-якою кількістю сторін. Потрібно оберати на панелі інструмент, потім послідовно клацнути кнопкою миші в кожній вершині багатокутника. Останнє клацання потрібно зробити приблизно в тій самій точці, що й перше. Для того, щоб багатокутник містив лише кути 90° або 45°, при малюванні потрібно тримати натиснутою клавішу Shift.

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

Заповнення кольором
Ви можете окремою операцією задати заливку тла або заливку будь якої фіґури. Для цього виконайте такі дії.

1. Оберіть на палітрі потрібний колір (основний або колір тла).
2. Виберіть інструмент Заповнення повінню (F).
3. Спрямуйте вказівник миші всередину замкненого контура.
4. Клацніть кнопкою миші для завершення заливки.

Створення кольору
Палітра KolourPaint містить набір із 22 стандартних кольорів. Якщо серед кольорів палітри немає потрібного, його створюють самостійно. Для цього клацніть двічі по будь-якому кольору палітри та оберіть необхідний колір.

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

Під час роботи з текстовими написами на екрані відображено панель інструментів Шрифти, виділену червоним контуром на малюнку нижче. Ця панель містить списки Шрифт, Розмір, що розкриваються, і кнопки, що дають можливість змінювати накреслення тексту. Атрибути тексту можна задати як до початку введення тексту, так і після. Але це потрібно зробити до завершення роботи з текстом, тобто при відображенні пунктирної межі прямокутної області введення тексту.

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

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

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

• вибрати один з варіантів вибору;

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

• відпустити кнопку миші (навколо фрагмента з'явиться пунктирна рамка).

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

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

Буфер обміну — це область (оперативної) пам’яті, виділена (операційною системою) для тимчасового збереження інформації.

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

Вказівки меню Зміни /… :

• Копіювати — розташовує виділений фрагмент у буфер обміну;
• Вирізати — розташовує фрагмент у буфер обміну з вилученням його з малюнку;
• Вставити — вставляє фрагмент у малюнок;
• Вилучити вибране — видаляє виділений фрагмент без збереження копії у буфері.

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

Розглянемо приклад використання буферу обміну для створення такого напису.

1. Встановіть основний колір — синій, тла — сірий.

2. Клацніть по інструменту Напис і наберіть текст KolourPaint.

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

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

5. Скористайтеся вказівкою меню Зміни / Копіювати, а потім — Зміни / Вставити.

6. Клацніть по інструменту Заповнення повінню (F) і залийте кожну літеру копії тексту KolourPaint сірим кольором, користуючись правою кнопкою миші. Це буде майбутня тінь від первинного напису.

7. Виберіть інструмент Виділення і виділіть фрагмент, що містить сірий напис.

8. Скористайтеся вказівкою меню Зображення / Перекосити, установіть нахил по горизонталі 60°.

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

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

11. Клацніть мишею поза написами.

4. Закріплення вивченого матеріалу

1. Що таке графічний редактор? Яке його призначення?
2. Що таке піксел?
3. Як запустити програму KolourPaint?
4. Назвіть елементи вікна KolourPaint.
5. Як намалювати пряму лінію?
6. Як побудувати лінію, нахилену під кутом 45°?
7. Як додати текст до малюнку?
8. Як задати необхідний шрифт?
9. Як виділити фрагмент зображення у середовищі KolourPaint?
10. Які є інструменти KolourPaint для малювання фіґур із замкненим контуром?
11. Що таке буфер обміну? Яке його призначення?
12. Як копіювати у буфер і з буферу?

5. Підбиття підсумків уроку
Виставлення оцінок.

6. Домашнє завдання

Завдання 1. Створити новий документ графічного редактора KolourPaint. Намалювати прямокутний трикутник з горизонтальним і вертикальним катетами. Створити копію цього трикутника та відобразити її симетрично відносно вертикальної прямої. Перемістити отримане зображення таким чином, щоб отримати рівнобедрений трикутник (див. рисунок нижче).