Теорія та презентація уроку

Створення GIF-анімації

Мета:  Допомогти учням засвоїти факти та основні ідеї створення GIF-анімації в середовищі Adobe Photoshop CS6. Забезпечити якість вивчення нового матеріалу. Формувати вміння виділяти головне, актуалізувати, конспектувати, порівнювати, зіставляти. Забезпечити диференційований підхід. Встановити зв'язки між засвоєними та новими знаннями. Формувати групи компетентностей: соціально-трудову, інформаційну, загальнокультурну, соціально-трудову, уміння вчитися.

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

Обладнання та наочність: комп’ютери, підручники, презентація, проектор.

Програмне забезпечення: Adobe Photoshop CS6.

Хід уроку

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

·        Привітання з класом

Доброго дня, діти.

·        Повідомлення теми і мети уроку

Тема нашого уроку «Створення GIF-анімації».

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

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

Не забувайте про правила поведінки на уроці. (Слайд2).

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

·        Повторення раніше вивченого матеріалу (Слайд3)

1.     Чи існує параметр border під час роботи із зображеннями? Якщо так, що він означає?

2.     Що означає параметр hspace?

3.     Яким чином за допомогою програми Photoshop можна вирізати потрібні частини зображення?

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

Слайд4. GIF (від англ. Graphics Interchange Format — «формат обміну зображеннями») — 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році.

Слайд5-6. Основними напрямки застосування анімацій є або привертання уваги на кнопку переходу, або реклама котра подається у вигляді банера. Банер (англ. banner — прапор, транспарант) — графічне зображення рекламного характеру. Банери розміщують для залучення потенційних клієнтів або для формування іміджу. Такі анімаційні банери ми вже спостерігали коли розпочинали тему «Веб-технологій».

Слайд7-8. Відкривши середовище Adobe Photoshop CS6 нам потрібна буде шкала часу. Відкрити її можна тиснувши двічі по відповідному надписі або «Вікно» - «Шкала часу».

Слайд9-11. Для початку створимо новий аркуш потрібним для нас розміром та заливкою фону (у нашому випадку 350 на 200 та прозорим фоном).

Слайд12-13. Додамо основу нашої клавіши за допомогою прямокутника з округленими кутами, заливкою та штрих пунктирним контуром.

Слайд14. Щоб додати стороннє зображення достатньо перетягти його на робочу область.

Слайд15-16. Розмістимо у верхньому лівому куточку й за допомогою гарячих клавіш Ctrl+J здублюємо стрілку для симетричного відображення з правої сторони.

Слайд17-19. Додамо надпис «Перейти» та встановимо для нього прозорість в 50%, а продублювавши надпис другий повернемо сталу прозорість.

Слайд20-25. Перейшовши до шкали створимо ще один кадр. На першому залишимо лише напівпрозорий надпис та фон, а на другому фон, непрозорий надпис та стрілки. Встановивши тривалість в 0,2 секунди та повторення «Назавжди» ми отримаємо безкінечну анімацію.

Слайд26. Для правильного збереження переходимо в «Файл» - «Зберегти для Web» та становивши параметр якості GIF 128 з тремтінням зберігаємо у потрібну для нас папку.

V. Усвідомлення набутих знань й формування вмінь та навичок

·        Практичне завдання (Слайд28-29)

Завдання 1

1.     Створити на робочому столі папку та назвати її власним прізвищем та ім’ям.

2.     Відкрийте середовище Adobe Photoshop.

3.     Створіть новий малюнок з прозорим фоном, шириною 350 пікселів та висотою в 200.

4.     Додайте опрацьовані під час уроку елементи та створіть 2 кадри. Для першого встановіть тривалість в 0,2 секунди і увімкніть лише відображення прямокутника та напівпрозорого надпису «Перейти».

5.     Для другого кадру встановіть тривалість в 0,2 секунди та вимкніть відображення напівпрозорого надпису й увімкніть надпис «Перейти» без прозорості та стрілки.

6.     Перевірте роботу анімації відтворивши її та збережіть як веб елемент GIF 128 з тремтінням у власну папку.

Завдання 2

1.     Створіть власну банерну анімацію розміром 300х600 для залучення користувачів (учнів) пройти безкоштовні онлайн курси по підготовці до ЗНО.

·        Релаксація

Вправа для профілактики короткозорості та порушення зору

Роботу нашу знов кидаймо,

Подалі погляд направляймо.

Роздивившись те, що далі,

Знов поглянем на деталі.

Роздивившись те, що далі,

Знов поглянем на деталі.

Роздивившись те, що далі,

Знов поглянем на деталі.

VI. Підведення підсумків уроку

·        Бесіда за питаннями (Слайд30)

1.     Що таке анімація?

2.     Які існують способи використання анімацій?

3.     З чого складається анімація?

4.     Опишіть алгоритм створення анімації в Photoshop.

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

Створити банерну анімацію по залученню клієнтів до купівлі обраного вами технічного пристрою розміром 750х400 та мінімальною кількістю кадрів в 5.