Анімація в растровому графічному редакторі
За навчальною програмою 2018 року
Урок 16
10
(11)
Анімація в растровому�графічному редакторі
Розділ 2 § 16
Анімація – штучне відтворення руху в кіно, на телебаченні чи в комп’ютерній графіці шляхом послідовного відображення малюнків або кадрів з частотою, що забезпечує цілісне зорове сприйняття образів
10�(11)
Анімація в растровому�графічному редакторі
Розділ 2 § 16
Технології комп'ютерної анімації:
Класична (покадрова) анімація
Анімація ключових кадрів
Морфінг
Колірна анімація
ЗD-анімація
10�(11)
Анімація в растровому�графічному редакторі
Розділ 2 § 16
Технології відтворення анімації:
GIF
Презентаційна анімація
Flash-анімація
10�(11)
Анімація в растровому�графічному редакторі
Розділ 2 § 16
Графічний файл формату GIF:
Швидка зміна малюнків (кадрів), які мало відрізняються один від одного
Застосовують у веб-дизайні
Для невеликих анімацій
Обмежена палітра
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
1. Створюємо новий документ розміром 250х250 пікселів
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 13
2. Заливаємо шар чорним кольором
Панель параметрів
Використовуємо інструмент Заливка
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 13
3. Створюємо новий шар, на якому м’яким червоним пензлем діаметром 200 ставимо точку в центрі
Діаметр 200
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
1
2
3
4
4. Створюємо ще один шар і розміщуємо на ньому фігуру (інструмент Довільна фігура) в режимі створення Контуру.
5
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
1
5. Налашто-вуємо пензель білого кольору (меню Вікно ⇒ Параметри пензля) зі збільшеними інтервалами:
2
3
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
1
6. Переходимо на панель Контури та виконуємо обведення контура пензлем:
2
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
6. Переходимо на панель Контури та виконуємо обведення контура пензлем:
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
8. Застосовуємо стиль Роздроблений метал
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
9. На палітрі Шари створюємо новий шар, і застосовуємо трансформацію: меню Редагувати ⇒ Трансформувати контур ⇒ Масштаб; зв’язуємо висоту на ширину і вказуємо 80%. Зміни потрібно підтвердити Enter.
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
10. Знову переходимо на панель Контури і виконуємо обведення та застосовуємо стиль і зменшуємо до 80%. Повторюємо ще раз, щоб отримати три шари із сердечками різного розміру: найбільше, середнє та мале.
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
11. Відкри-ваємо панель анімації: меню Вікно ⇒ Шкала часу. Створюємо 4 кадри анімації:
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
12. Налашто-вуємо видимість шарів на кожному із них за схемою: Велике-Середнє-Мале-Середнє та тривалість кадрів по 0.2 секунди:
10�(11)
Анімація «Діамантове серце»
Розділ 2 § 16
1
13. Якщо анімація працює правильно, зберігаємо її для веб-середовища (меню Файл ⇒ Експорт ⇒ Зберегти для веб-середовища)
2
3
10�(11)
Дайте відповіді на запитання
Розділ 2 § 16
10�(11)
Домашнє завдання
Розділ 2 § 16
Опрацювати теоретичний матеріал з теми уроку
10�(11)
Працюємо за комп’ютером
Розділ 2 § 16
Створення анімації
Створіть анімацію «Діамантове серце»
10�(11)
Дякую за увагу!
За навчальною програмою 2018 року
Урок 16
10
(11)