Дата проведення: 1.02.2016
Клас: 7 «В»
Тема: «Векторна графіка. Інтерфейс програми векторної графіки ».
Мета: Сформувати навички роботи з векторними зображеннями, навчити прийомам редагування векторних зображень.
завдання:
Навчальна: Активізувати пізнавальну діяльність учнів, практичних умінь.
Розвиваюча: Розвивати пізнавальні інтереси, навички роботи з мишею і клавіатурою, самоконтролю.
Виховує: Виховати інформаційну культуру, уважність, акуратність, дисциплінованість.
Обладнання: дошка, комп'ютер, комп'ютерна презентація, картки самооцінювання, програма тесту MyTest, графічний редактор Inkscape, кубик-рубик.
Тип уроку: комбінований.
Структура уроку: Етапи: організаційний момент, психологічний настрой, постановка мети, перевірка домашнього завдання, теоретична частина, практична робота, Физминутку, закріплення знань, підведення підсумків, видача домашнього завдання з поясненням.
Методи: словесний, наочний, практичний.
Хід уроку:
Організаційний момент. Привітання. Обов'язкова позитивна мотивація. Хлопці, давайте встанемо кругом, називаючи ім'я сусіда побажаємо один одному удачі, везіння і всього найкращого.
Перевірка домашнього завдання. Перевірка домашнього завдання здійснюється за допомогою програми MyTest.
Що таке комп'ютерна графіка?
а) область інформатики, що займається методами, засобами створення та обробки зображень за допомогою програмно-апаратних засобів;
б) область інформатики, що займається графопростроеніем величезних зображень;
в) область інформатики, що займається об'єктно-орієнтованим програмуванням.
На які види ділиться комп'ютерна графіка?
а) векторна і фронтальна; б) фронтальна і растрова; в) растрова і векторна.
Що таке растрова графіка?
а) зображення формуються з точок різного кольору (пікселів), які утворюють рядки і стовпці (растр); б) зображення формуються з об'єктів: точка, лінія, окружність, прямокутник тощо., які зберігаються в пам'яті комп'ютера у вигляді графічних примітивів.
Що таке векторна графіка?
а) зображення формуються з точок різного кольору (пікселів), які утворюють рядки і стовпці (растр); б) зображення формуються з об'єктів: точка, лінія, окружність, прямокутник тощо., які зберігаються в пам'яті комп'ютера у вигляді графічних примітивів.
Мінімальний елемент растрової графіки.
а) піксель; б) графічні примітиви; в) точка.
Мінімальний елемент векторної графіки.
а) піксель; б) графічні примітиви; в) точка.
Пояснення нового матеріалу. Оголошення нової теми, учні повинні розставити в правильному порядку слова.
Inkscape використовують, перш за все, для створення векторних малюнків. Він може полегшити життя багатьом кресляра, художникам, дизайнерам, мультиплікаторів і інших людей творчих професій.
За своїм робочим функціям, він чимось схожий на інші графічні редактори, такі як Illustrator, CorelDraw або Xara X.
Можливо, з якоюсь, з перерахованих вище програм, ви вже й знайомі.
Завантажити безкоштовний, русифікований графічний редактор Inkscape (Інкскейп) ви можете: http://inkscape.org/.
Створення і збереження документа.
Відкриваємо програму, за замовчуванням видається документ у вигляді альбомної сторінки, її добре видно в центрі робочого поля, можна ввести свої вимоги до формату та розміру, краще ввести з деяким запасом.
. . .
При малюванні ви можете вийти за рамки цієї сторінки, але при друку зберігається тільки зображення на сторінці, а за її межами все втратиться. Змінювати властивості документа можна з меню Файл, Властивості документа. Для кожного документа відкривається нове вікно Файл, Створити (Ctrl + N). Перемикатися між документами можна за допомогою клавіатури (Alt + Tab).
Зберігають документ командами - Файл, Зберегти як ...
За замовчуванням Inkscape зберігає документ у власному форматі svg, але є можливість зберегти зображення в ряді інших форматів.
Інтерфейс програми.
Тепер уважно подивимося інтерфейс програми. Зліва знаходяться інструменти для створення різних фігур, а вгорі на панелі опцій - налаштування параметрів цих фігур. На самому верху, як і всюди - панель меню, ну і внизу, під таблицею палітри кольорів знаходиться смуга стану. Все, те ж саме, що і в інших графічних редакторах.
Натискаємо на будь-яку фігуру, так ми робимо її активною і простягаємо курсор по полотну. Ми намалювали фігуру, на ній ми бачимо білі крапки - це маркери, з їх допомогою легко можна змінювати контури фігури, витягаючи або навпаки стискаючи будь-яку сторону або деталь.
Ну, ось і весь принцип роботи цього графічного редактора. Складно? Думаю що ні. Все інше - зокрема, їх ми швидко освоїмо, не сумнівайтеся.
Узагальнення вивченого матеріалу. Учні працюють з постером. Ділимося за жетонами на дві групи. Перша група - комп'ютерна графіка, на які види вона ділиться, що таке векторна графіка, що таке растрова графіка, відміну растрової і векторної графіки. Друга група - про графічний редактор Inkscape, який це редактор, інтерфейс вікна, переваги і недоліки векторної графіки.
Физминутку. Після виконання практичної роботи хлопцям пропонується виконати ряд математичних вправ з закритими очима.
Практична робота.
Учні самостійно виконують роботу на ПК, відповідно до запропонованої їм практичної роботи.
Крок 1. Відкриваємо новий документ в Inkscape.
Почнемо з блюдця, на якому стоїть чашка кави. Блюдце буде складатися з п'яти різних еліпсів, так що готуйтеся малювати. Виберіть інструмент "Малювати кола, еліпси і дуги '(Circle / Ellipse tool (F5)) на панелі інструментів. Потім намалюйте еліпс, приблизно таких же пропорцій, як на малюнку нижче.
Тепер потрібно змінити кольори заливки та обведення (контуру). Для цього виділіть еліпс і відкрийте діалогове вікно 'Заливка і обведення' (Fill and Stroke) вибравши в меню Об'єкт> Заливка і обведення (Ctrl + Shift + F). На вкладці 'Обводка' натисніть кнопку 'X', щоб видалити контур у цій постаті.
Крок 2. Тепер потрібно заповнити еліпс радіальним градієнтом. Ми будемо застосовувати радіальний градієнт досить часто в цьому туторіали. Тому зверніть на це особливу увагу, якщо ви ніколи раніше не робили цього в Inkscape. У вкладці 'Заливка' (вікно 'Заливка і обведення' (Fill and Stroke)), натисніть на кнопку 'Радіальний градієнт'. Inkscape автоматично заповнить фігуру градієнтом, за замовчуванням, мінливих на прозорий.
Ми хочемо отримати градієнт з двома відтінками сірого кольору, тому тиснемо на кнопку 'Змінити' (Edit) під градієнтом. Тут можна змінити 'Опорні точки градієнта' (Color stops) і їх 'Прозорість' (Transparency). Встановіть світлий відтінок сірого (ddddddff) у першій опорної точки. Другий опорній точці задайте більш темний відтінок сірого (b2b2b2ff). Переконайтеся, що 'Прозорість' (Transparency) для обох кольорів була встановлена на 'Непрозорий' (Opaque) (без прозорості).
Крок 3. Наступне, що потрібно зробити, це налаштувати розмір і центр градієнта щодо вашого еліпса. Перетягніть мітки градієнта, як показано на малюнку нижче. Примітка: Якщо мітки градієнта відсутні, просто натисніть Створити 'і' Змінити градієнти 'на панелі інструментів (Ctrl + F1). Перший еліпс завершено, і тепер ми маємо уявлення про те, як створювати і змінювати градієнти. Наступні кроки будуть не настільки детально описані.
Крок 4. Решта еліпси в блюдце буде зовсім не важко створити. Наступний еліпс утворює білий край навколо блюдця. Самий просто спосіб його створити, це скопіювати створений раніше еліпс, перейшовши в пункт меню 'Правка' (Edit)> 'Продублювати' ((Ctrl + D) Duplicate). Потім залийте його світло сірим кольором (f2f2f2ff) у вікні 'Заливка і обведення'. Ссдвіньте його на пару пікселів нижче, ніж перший еліпс, і перемістіть назад через Об'єкт '(Object)>' Опустити '(Lower).
Примітка: Натисніть F1 (або 'Об'єкт'> 'Трансформувати'), щоб переміщати об'єкти за допомогою миші або клавіш зі стрілками в Inkscape. Буде важко побачити світло-сірий еліпс, тому я завжди ставлю під ним темний фон. Це видно з скріншоту нижче.
Крок 5. Тепер приступимо до темно-сірому основи блюдця. Ще раз продублюйте один з вже існуючих еліпсів. Потім залийте його іншим градієнтом, з двох темно-сірих відтінків (2b2b2bff і 666666ff). Посуньте центр градієнта вниз, до нижньої частини еліпса. Основа не повинна бути настільки ж широким, як решта блюдце. Натисніть F1 і трохи відсуньте ліву і праву сторону еліпса, щоб його "сплюснути".
Зауважте, при утриманні клавіші Shift, і перетягуванні одного з межі, обидві сторони будуть перетягувати відразу і в рівній мірі. Також відтягніть трохи нижню частину еліпса, щоб отримати правильну криву нижньої частини блюдця.
Посуньте еліпс вниз на кілька пікселів і натисніть Page Down кілька разів, щоб розташувати еліпс під двома іншими. У вас повинно вийти щось схоже на картинку нижче. Зверніть увагу на пропорції нижнього еліпса (виділеного) в порівнянні з двома іншими. Блюдце починає набувати форму!
Крок 6. Тепер нам потрібно створити центр блюдця. Намалюйте еліпс поменше, як показано на малюнку нижче (або виберіть верхній еліпс і зменшіть його). Відкрийте діалогове вікно "Заливка і обведення" (Ctrl + Shift + F). Потім залийте створений еліпс рівним сірим кольором (979797). Перетягніть повзунок Альфа-каналу (Alpha), що знаходиться нижче колірного кола, на 100.
Вкажіть обводке Суцільний колір (Stroke paint) b7b7b7 (непрозорість 100%). У вкладці Стиль обведення (Stroke style) встановіть ширину, щоб збігалася з шириною на зображенні нижче. Фактичний розмір обведення буде варіюватися, залежно від того, наскільки великими ви намалювали свої еліпси. У мене вказана ширина обведення в 3px, але у вас може в підсумку вийде інший розмір.
Крок 7. Блюдце майже готове. Останній штрих полягає в додаванні розмитою тіні. Продублюйте найнижчий еліпс (темно-сіра основа). Потім размойте його на 10% (в нижній частині вікна Заливка і обведення). Помістіть його нижче всіх інших об'єктів.
Блюдце готово! Щоб було легше виділяти блюдце надалі, можна згрупувати п'ять еліпсів. Просто виділіть їх все, і натисніть Ctrl + G. Тепер приступимо безпосередньо до чашки кави!
Крок 8. Почнемо з відтворення двох фігур за допомогою інструмента Криві Безьє (Bezier Curves) (Shift + F6). Намалюйте одну для лицьового боку чашки і одну для зовнішнього краю. Ці фігури повинні збігатися по ширині і кількості кривих. Рекомендується включити відображення сітки на допомогу для малювання ліній (Shift + #). Так само майте на увазі, при натисканні створюється точка, при перетягуванні - крива.
Зауважте, що обидві фігури мають однакову довжину кривої. А нижня частина краю збігається з лицьовою стороною чашки, і має однаковий вигин кривої. Сині цифри, відмічені на малюнку нижче, показують в якому порядку були створені точки / криві.
Крок 9. При все ще включеної сітці, помістіть край чашки прямо на лицьову сторону. Видаліть обведення у обох фігур. Залийте фігуру краю чашки (яка виглядає як еліпс) суцільним сірим кольором (e6e6e6ff). Залийте лицьову сторону чашки радіальним градієнтом, якій з кольору ecececff в центрі переходить в колір bdbdbdff. Потім розмістіть центр градієнта зверху фігури з чашкою, як показано нижче.
Крок 10. Зробіть дублікат фігури з краєм чашки, трохи змініть розмір, щоб створити ширину краю. Задайте цій фігурі тонку сіру обведення (d6d6d6ff) і радіальний градієнт від ecececff до bdbdbdff. Потім перетягніть мітки градієнта, щоб вони співпадали з картинкою нижче.
Крок 11. Наступні крок полягає в створенні напою всередині чашки. Ми, звичайно ж, хочемо створити фігуру, яка дасть видимість кави. Щоб дробиться цього, нам потрібно створити еліпс для кави і перетнути їм внутрішній край.
Ось як це робиться. Створіть еліпс, схожий на коричневий на зображенні нижче. Встановіть його поверх краю чашки. Потім продублюйте еліпс, який становить внутрішню частину краю. Виберіть тільки що намальований і продубльований еліпс. Пройдіть в меню, виберіть Контур (Path)> Перетин (Intersection) (Ctrl + *).
У вас повинна вийде така фігура, ніби в гуртку налито кави. Тепер ви можете залити її радіальним градієнтом, використовую два (або більше) відтінку коричневого.
Крок 12. Створити ручку для кружки буде зовсім просто. Використовуйте інструмент криві Безьє, щоб створити фігуру, більш менш схожу на ручку, показану нижче. Задайте їй тонку світло-сіру обведення і залийте лінійним градієнтом від лівого нижнього в правий верхній кут, використовуючи два відтінки сірого (bdbdbdff і ecececff). Тепер помістіть її за чашку.
Крок 13. Щоб зробити нашу чашку особливою, додамо навколо неї кілька синіх смуг. Зробити це буде трішки складніше, ніж здається на перший погляд. Не можна просто намалювати лінію, тому як її кінець ніколи не співпаде з кордоном чашки, як показано нижче.
Крок 14. Ось непоганий метод, який придумав я. Створюємо еліпс, приблизно тих же розмірів, що і край чашки кави. Потім заливаємо будь-яким кольором (без обведення). Дублюємо еліпс, поміщаємо його нижче першого і тягнемо трохи вниз. Потім правимо боку. Я залив еліпси різними кольорами, щоб можна було побачити, як це має виглядати в результаті.
Крок 15. Виділяємо обидва еліпса, переходимо в меню Контур (Path)> Різниця (Difference) (Ctrl + мінус). Вуаля! Тепер у нас є гарна зникаюча крива. Залийте нову фігуру будь-яким вподобаним кольором, і продублюйте стільки раз, скільки вважаєте за потрібне. Потім помістіть смужки зверху вашої чашки, де захочете.
Крок 16. Давайте створимо відображення на одній зі сторін нашої чашки. Намалюйте фігуру, як показано нижче, інструментом крива Безьє. Зафарбуйте її білим і встановіть прозорість на 90. Додайте її зверху лицьового боку чашки і кольорових смуг.
Крок 17. Тепер приступимо до пару. Намалюйте маленький білий еліпс. Ви можете це зробити напівпрозорим, і помітно размойте обведення. Помістіть його вище кави. Це дасть загальне враження тепла і пара.
Крок 18. Тепер створимо тонкий слід пара. Створюємо фігуру інструментом крива Безьє як показано нижче. Зафарбовуємо її світло-коричневим або золотим кольором, встановлюємо підлозі прозорість і розмиття. Пограйте з останніми, щоб результат виглядав слушно.
Наша чашка кави готова! Як і у випадку з блюдцем, ви можете згрупувати всі фігури, з яких складається чашка.
Давайте помістимо чашку зверху блюдця. І додамо невелику тінь під чашкою. Просто намалюйте маленький чорний еліпс і размойте його. Тепер вона у вас є, красива чашка кави і блюдце в векторі, створена за допомогою Inkscape! Сподіваюся, вам сподобалося так само, як і мені. Я також сподіваюся, що туториал продемонстрував основні особливості програми Inkscape - альтернативу для векторної графіки з відкритим вихідним кодом. Насолоджуйтесь!
VII. Закріплення знань учнів. Учні вибирають собі питання за допомогою кубика-рубика і відповідають на питання. 1) де застосовується комп'ютерна графіка? 2) що таке піксель? 3) мінімальний елемент векторного зображення? 4) при масштабуванні растрового зображення якості змінюється чи ні? 5) при масштабуванні векторного зображення якості змінюється чи ні? 6) назвіть одна перевага векторного зображення?
VIII. Підведення підсумків. Рефлексія.
Оцінити урок,
Оцінити себе.
Видача домашнього завдання. Виконати малюнок в Inkscape.
Що таке комп'ютерна графіка?На які види ділиться комп'ютерна графіка?
Що таке растрова графіка?
Що таке векторна графіка?
Складно?
Де застосовується комп'ютерна графіка?
О таке піксель?
Мінімальний елемент векторного зображення?
При масштабуванні растрового зображення якості змінюється чи ні?
При масштабуванні векторного зображення якості змінюється чи ні?